Μάθετε να δημιουργείτε μια απλή φόρμα επικοινωνίας για τον ιστότοπό σας με απλά βήματα, εξασφαλίζοντας αποτελεσματική επικοινωνία με το κοινό σας.

Οι φόρμες επικοινωνίας είναι ένα κρίσιμο στοιχείο των ιστότοπων, επιτρέποντας στους χρήστες να επικοινωνήσουν μαζί σας με ερωτήσεις, σχόλια ή αιτήματα.

Εδώ θα μάθετε τη διαδικασία δημιουργίας μιας βασικής φόρμας επικοινωνίας για τον ιστότοπό σας. Από τη ρύθμιση του έργου μέχρι την προσθήκη επικύρωσης φόρμας και στυλ, διασφαλίζοντας ότι θα έχετε μια λειτουργική και ευχάριστη φόρμα επικοινωνίας μέχρι το τέλος.

Ρύθμιση του Έργου

Πριν ξεκινήσετε την κωδικοποίηση, βεβαιωθείτε ότι το περιβάλλον ανάπτυξής σας είναι ρυθμισμένο. Ανοίξτε το πρόγραμμα επεξεργασίας κειμένου που προτιμάτε ή ένα από τα προτεινόμενα ολοκληρωμένα περιβάλλοντα ανάπτυξης (IDE) αρέσει Κωδικός Visual Studio ή Υψηλό Κείμενο.

Δημιουργήστε έναν φάκελο έργου για να διατηρήσετε οργανωμένα τα αρχεία HTML και CSS.

Μέσα σε αυτόν τον φάκελο, δημιουργήστε ξεχωριστά αρχεία για HTML (index.html

instagram viewer
) και CSS (στυλ.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">
<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, όπως padding και margin, για το στυλ της φόρμας επικοινωνίας για καλύτερη εμφάνιση.

* {
 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 και στοχεύστε το στοιχείο φόρμας.