עוד פריסות טפסים (1)
הצגת הכל
https://neobrutalism.com/he/blocks/forms/compact-newsletter-signup-form
הרשמה קומפקטית לניוזלטר
טפסים · Pro source
הטופס השימושי הקטן ביותר שיש — שדה אימייל מתויג, כפתור אחד ושורת הרגעה, יושבים על מסגרת עם צל אופסט קשיח שגורמת לו להיראות כאובייקט מכוון ולא כשדה קלט תלוש. הרוחב מוגבל ל-max-w-md כך שהוא נכנס בקלות לסרגל צד, לעמודה בפוטר או לסוף מאמר בלי לעצב מחדש את מה שסביבו.
טפסים
הרשמה קומפקטית לניוזלטרפתחו תצוגה מקדימה בזמן אמת
- 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., בעל סוכנות
שואלים
לעתים קרובות
כיצד בנויה בלוק הרשמה קומפקטית לניוזלטר, מה תוכלו לשנות, ואיזה שימוש לעשות בו במקום בפריסות האחרות כאן.
בגלל המיקום שבו הוא יושב. הבלוק הזה מוגבל ל-max-w-md, בלי רצועת כותרת, בלי תיבת סימון להסכמה ובלי שורת אווטארים, כך שהוא שורד בתוך סרגל צד או עמודת פוטר ברוחב של שליש עמוד. הרשמה לניוזלטר עם הוכחה היא הגרסה העצמאית לרצועה ברוחב מלא, שם יש מקום להסביר מה נשלח ברשימה ולהראות שאנשים אחרים כבר קוראים אותה.
עם צל קשיח אחד על הכרטיס עצמו: shadow-[12px_12px_0px_0px_var(--color-accent)]. בגרסה הקודמת הוצב div ממוקם אבסולוטית נוסף מאחורי הכרטיס כדי לדמות את האפקט, מה שהכפיל את הקוד ויכול היה לצאת מיישור. שנו את שני הערכים 12px כדי להרחיק את המסגרת, הפכו את הסימנים כדי לשלוח אותה לפינה הנגדית, או החליפו את הטוקן ב-var(--color-primary) כדי להעצים אותה.
כי לכרטיס הזה אין רצועת כותרת ואין תיאור — אם התווית תוסתר, הטקסט היחיד מעל הכפתור יהיה ה-placeholder, והסקשן לא ייתן שום רמז למה הוא מיועד. כשטופס כל כך קומפקטי, התווית היא גם הכותרת של הדבר עצמו, ולכן היא מרוויחה את מקומה.
היא ההרגעה שמחליפה תיבת סימון להסכמה בגודל הזה, ולכן היא חייבת להיות כנה — אם ברשימה שלכם יש רצף הודעות פתיחה או שיתוף כתובות עם שותף, המשפט הזה שגוי וצריך לשכתב אותו ולא רק למחוק. במקומות שבהם נדרש opt-in מפורש על פי חוק, השתמשו בהרשמה לניוזלטר עם הוכחה במקום, שיש בה תיבת סימון.
רק את ה-action. הטופס שולח את השדה email בשליחה נייטיבית אל /api/newsletter, בלי onSubmit ובלי state בצד הלקוח, כך שהבלוק הוא server component שלא שולח שום JavaScript. הפנו את ה-action לנתיב שלכם או ל-server action; אם אתם רוצים הודעת הצלחה בתוך העמוד במקום ניווט, זה הרגע שבו הקובץ צריך use client ופיסת state.
כן — הכרטיס מוגבל ל-max-w-md וממורכז בתוך מעטפת הסקשן, כך שהוצאת ה-div הפנימי מהסקשן והכנסתו לעמודה צרה יותר עובדת בלי שינוי. הדבר היחיד שחייבים לשמור הוא ה-id על שדה האימייל: זה מה שהתווית מצביעה אליו, ושני עותקים של הבלוק באותו עמוד ידרשו id שונה לכל תווית כדי שתישאר תקינה.