עוד פריסות טפסים (1)
הצגת הכל
https://neobrutalism.com/he/blocks/forms/newsletter-signup-form-with-social-proof
הרשמה לניוזלטר עם הוכחה
טפסים · Pro source
כרטיס ניוזלטר שעונה על שתי השאלות שבאמת מטרידות אנשים לפני שהם מקלידים כתובת: מה יגיע לתיבת הדואר, ומי כבר מקבל את זה. רצועת כותרת מלאה נותנת שם לרשימה, שורה אחת מכילה את שדה האימייל ואת כפתור ההרשמה, תיבת סימון מפורשת להסכמה מקשרת למדיניות הפרטיות, ומחסנית תמונות של מנויים יושבת מתחת לקו עם המונה החי.
טפסים
הרשמה לניוזלטר עם הוכחהפתחו תצוגה מקדימה בזמן אמת
- Hero, תמחור ו-auth
- תצוגה מקדימה של כל נקודת עצירה
- העתק את הקוד המקור
- MCP מוכן להתקנה
- Radix · Base UI · React Aria
- 158 בלוקים מוכנים
- קטעי עמוד שנשלחים
- לוחות מחוונים ושיווק
- Pro מפעיל את הקוד
- פריסות פתוחות
אהובה על מפתחים, מעצבים
ויוצרים
נתקלתי בערכת ה-UI שלך ולקחתי אותה מיד. חדשה, מתוחזקת באופן פעיל ומשתפרת כל הזמן — עבודה מדהימה! 🤘
Ziv Reich, מפתח תוכנה רק רציתי להגיד עבודה מעולה על neobrutalism.com. ממש אהבתי. אני גרוע בעיצוב, אז זה היה מדהים. השתמשתי בזה באתר האישי שלי.
Paul Bratslavsky, היוצר של Coding With Paul סוף סוף בניתי מחדש את האתר האישי שלי עם Neobrutalism.com — ספרייה כיפית, קל מאוד להתחיל!
Cameron Blackwood, יוצר תוכן Neobrutalism.com היא אחת מספריות רכיבי ה-UI האהובות עליי בסגנון רטרו — רכיבים שבאמת אפשר ל-ship.
Zhengyang Hou, אינדי האקר אחת מספריות ה-ui האהובות עליי לווב. עבודה מעולה — מקווה שזה ימריא רחוק.
Taseen Tanvir, מייסד ומעצב ניסיתי את Neobrutalism.com Pro — ערכת UI שלא נראית כמו כל השאר. הבלוקים הניאו-ברוטליסטיים 🔥 האיצו פרוטוטייפים של לייאאוטים מוזרים.
Nitesh Padghan, כותב צללים עיצוב דף נחיתה יפהפה עם איזון וזרימה מושלמים. פלטת הצבעים בשילוב האנימציות יוצרת חוויית משתמש יוצאת דופן.
Alan Obeng-Peprah, Senior Designer @ NativeXAI אני באמת מתרשם מהעיצוב שהם סיפקו. המוצר הסופי תאם בדיוק את מה שדמיינתי.
Desmond, מייסד-שותף @ VectorlabsVentures כבעל סוכנות, בדרך כלל אני מבלה שבועות בליטוש לייאאוטים של דפי נחיתה ללקוחות. עם Neobrutalism.com אני מחבר תבנית, מתאים את הטקסט ומוכן לשיפ.
Duke Opoku Amankwah, מייסד @ Midas התבניות לא רק מדהימות ויזואלית — הן גם בנויות מצוין. חסכו לנו שבועות של פיתוח.
Abiola Braimah, מפתח @ Studio IX איכות יוצאת דופן ותשומת לב לפרטים. העיצוב הרספונסיבי עובד חלק על כל המכשירים.
Acromond X., מייסד-שותף @ VectorlabsVentures שילוב התבניות האלה בזרימת העבודה קיצר משמעותית את מחזור הפיתוח. עבודה מצוינת.
Raquib S., מפתח Backend התבניות האלה הפכו למשאב ה-go-to שלנו. הקוד נקי, מתועד היטב וקל להתאמה.
Hallic M., מפתח @ AtlasLabs תבניות Neobrutalism.com מוצאות את האיזון המושלם בין אסתטיקה לפונקציונליות. משנות משחק אמיתיות לפרויקטים שלנו.
Ibrahim S., Frontend Lead @ ScaleUp תמיכה יוצאת דופן ותבניות באיכות פרימיום. ה-ROI על התבניות האלה פנומנלי.
Kevin K., CEO @ WebCraft תבניות Neobrutalism.com שינו לגמרי איך אנחנו ניגשים לפרויקטי לקוחות חדשים. איכות הקוד יוצאת דופן והעיצובים באמת ברמה עולמית.
Danny G., מייסד DevStack השתמשתי בהרבה ספריות תבניות, אבל Neobrutalism.com בולט בתשומת הלב לאופטימיזציית ביצועים ולארכיטקטורת קוד נקייה.
Ian D., CTO ב-Wavelength האנימציות והמיקרו-אינטראקציות בתבניות האלה פשוט מדהימות. ההשקעה הכי טובה לצוות העיצוב שלנו.
Ben S., Lead Designer ב-PixelPerfect כמייסד לא-טכני, תבניות Neobrutalism.com עזרו לנו להשיק MVP בזמן שיא בלי להתפשר על איכות העיצוב. המשקיעים שלנו התרשמו מאוד.
Matthew I., מייסד סטארטאפ אני מעריך כמה המודולים האלה מודולריים ומתועדים היטב. הצלחנו לערבב חלקים מתבניות שונות בלי חיכוך.
Garrett P., Frontend Lead ב-TechFusion ה-ROI על תבניות Neobrutalism.com מדהים. קיצרנו דרמטית את זמן הפיתוח תוך אספקת אתרים באיכות גבוהה יותר ללקוחות.
Xavier C., בעל סוכנות
שואלים
לעתים קרובות
כיצד בנויה בלוק הרשמה לניוזלטר עם הוכחה, מה תוכלו לשנות, ואיזה שימוש לעשות בו במקום בפריסות האחרות כאן.
השתמשו בזה כשההרשמה היא מוקד הסקשן — יש בו מקום לרצועת כותרת, לתיאור של מה שהרשימה באמת שולחת, לתיבת הסכמה ולהוכחה חברתית, ולכן הוא עובד כרצועה עצמאית בעמוד נחיתה. הרשמה קומפקטית לניוזלטר היא אותה משימה בדיוק, מצומצמת לתווית, שדה וכפתור, מתאימה לסרגל צד, לעמודת פוטר או לסוף מאמר, שם כרטיס מלא היה צועק מעל התוכן שלצדו.
כי שום דבר כאן לא מחזיק state. הטופס נשלח אל /api/newsletter בשליחה נייטיבית בלי handler של JavaScript, כך שהוא נשאר server component ולא שולח שום bundle לצד הלקוח. הוספת הודעת הצלחה או state אופטימי היא הרגע שבו תזדקקו ל-use client — ועד אז, הטופס גם ממשיך לעבוד כשה-JavaScript כבוי.
יש תווית אמיתית, היא פשוט sr-only. placeholder הוא לא תווית: הוא נעלם ברגע שמתחילים להקליד, הוא לא תמיד מוכרז בצורה אמינה, והוא נכשל בדיוק ברגע שבו ממלאים את השדה. שמירת התווית בקוד והסתרתה חזותית נותנת לעיצוב את מה שהוא רוצה בלי לקחת את השם ממי שמשתמש בקורא מסך.
כי הסכמה משתמעת היא לא הסכמה לפי כללי סגנון GDPR, ותיבה מסומנת מראש גם היא לא — לכן התיבה הזו מתחילה לא מסומנת, לא מסומנת כחובה, ונשלחת כהסכמה רק כשהיא באמת מסומנת. הקישור למדיניות הפרטיות יושב בתוך טקסט התווית, כך שהוא נקרא כחלק מההצהרה שמסכימים לה.
כי הן לא נושאות שום מידע שהמשפט שלצדן לא כבר נושא. המחסנית היא חזרה חזותית על Join 2,000+ subscribers, ולכן היא מסומנת aria-hidden עם alt ריק על כל תמונה — תיאור של שלושה פרצופים אנונימיים היה מוסיף שלוש הכרזות ואפס משמעות. אם מחליפים אותן בלקוחות בעלי שם, תנו לכל אחת alt אמיתי והסירו את ה-aria-hidden.
היא flex-col עד ל-breakpoint של sm ו-flex-row אחריו, כך שבמסך צר הכפתור יושב מתחת לשדה ברוחב מלא במקום להידחס לגדם של 90px לצדו. הכפתור גם שומר על basis קבוע במסכים רחבים כדי שתווית מקומית ארוכה כמו Abonnieren לא תגזול רוחב מהשדה.