למד ליצור טופס יצירת קשר פשוט לאתר שלך עם שלבים פשוטים, כדי להבטיח תקשורת יעילה עם הקהל שלך.

טפסי יצירת קשר הם מרכיב מכריע באתרי אינטרנט, המאפשרים למשתמשים לפנות אליך עם פניות, משוב או בקשות.

כאן תלמד את התהליך של יצירת טופס יצירת קשר בסיסי לאתר שלך. מהקמת הפרויקט ועד להוספת אימות טפסים וסטיילינג, הבטחת טופס יצירת קשר פונקציונלי ונעים עד הסוף.

הגדרת הפרויקט

לפני שתתחיל בקידוד, ודא שסביבת הפיתוח שלך מוגדרת. פתח את עורך הטקסט המועדף עליך או אחת מסביבות הפיתוח המשולבות המומלצות (IDEs) כמו Visual Studio Code אוֹ טקסט נשגב.

צור תיקיית פרויקט כדי לשמור על קבצי HTML ו-CSS מסודרים.

בתוך תיקיה זו, צור קבצים נפרדים עבור HTML (index.html) ו-CSS (style.css). לבסוף, קשר את קובץ ה-CSS שלך במסמך ה-HTML שלך קטע באמצעות תָג.

יצירת מבנה HTML

הבסיס של כל טופס יצירת קשר הוא מבנה ה-HTML שלו. כך תוכל ליצור את רכיבי ה-HTML הדרושים עבור טופס יצירת הקשר שלך.

<main>
<h1>Welcome to my Formh1>
<formid="form">
<divclass="input__container">
<labelfor="name">Namelabel>

<inputtype="text"id="name"name="name"required />
div>
<divclass="input__container">





instagram viewer



<labelfor="email">Emaillabel>
<inputtype="email"id="email"name="email"required />
div>
<divclass="input__container">
<labelfor="message">Messagelabel>
<textareaid="message"name="message"rows="4"required>textarea>
div>
<button>Submitbutton>
form>
main>

קוד ה-HTML שלמעלה יוצר אלמנט טופס ומקנן שדות קלט מרובים על מנת לקבל קלט משתמשים עבור טופס יצירת הקשר.

כרגע, טופס יצירת הקשר שלך נראה כך:

טופס יצירת קשר אטרקטיבי וידידותי למשתמש משפר את חווית המשתמש הכוללת. קוד ה-CSS שלהלן משתמש במאפיינים של flexbox ו-CSS box כמו ריפוד ושולי כדי לעצב את טופס יצירת הקשר למראה טוב יותר.

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
html {
 font-size: 62.5%;
}


body {
 font-family: "Mulish", sans-serif;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}


main {
 width: 40rem;
 box-shadow: 2px 3px 5pxrgba(0, 0, 0, 0.2);
 margin: 0 auto;
 height: 45rem;
 border-radius: 2rem;
 padding: 2rem;
}


h1 {
 text-align: center;
 font-size: 3rem;
 padding: 1rem 2rem;
}


form {
 margin: 3rem 0;
 display: flex;
 flex-direction: column;
 row-gap: 2rem;
}


.input__container {
 display: flex;
 flex-direction: column;
 row-gap: 0.5rem;
}


.input__containerlabel { font-size: 1.6rem; }


.input__containerinput,
textarea {
 padding: 1rem 2rem;
 border-radius: 5px;
 border: 1pxsolid#555;
 resize: none;
}
button {
 align-self: flex-start;
 padding: 1rem 2rem;
 border-radius: 5px;
 border: none;
 background: #333;
 color: #fff;
 cursor: pointer;
}

טופס יצירת הקשר שלך נראה כעת כך:

יישום אימות טפסים

הבטחת הדיוק והשלמות של המידע שסופק על ידי המשתמש היא חשיבות עליונה. גישה יעילה אחת כוללת שימוש ב-JavaScript עבור אימות טפסים בצד הלקוח. כדי להתחיל, צור תג סקריפט בסוף קובץ ה-HTML שלך ומקד לאלמנט הטופס.