Come creare un semplice modulo di contatto utilizzando HTML, CSS e JavaScript

I moduli di contatto sono una componente cruciale dei siti Web, poiché consentono agli utenti di contattarti con domande, feedback o richieste.

Qui imparerai il processo di creazione di un modulo di contatto di base per il tuo sito web. Dall'impostazione del progetto all'aggiunta della convalida e dello stile del modulo, assicurandoti di avere alla fine un modulo di contatto funzionale e gradevole.

Impostazione del progetto

Prima di iniziare a scrivere codice, assicurati che il tuo ambiente di sviluppo sia configurato. Apri il tuo editor di testo preferito o uno degli ambienti di sviluppo integrato (IDE) consigliati Piace Codice di Visual Studio O Testo sublime.

Crea una cartella di progetto per mantenere organizzati i tuoi file HTML e CSS.

All'interno di questa cartella, crea file separati per HTML (indice.html) e CSS (style.css). Infine, collega il tuo file CSS nel tuo documento HTML sezione utilizzando il file etichetta.

Creazione della struttura HTML

Il fondamento di qualsiasi modulo di contatto è la sua struttura HTML. Ecco come puoi creare gli elementi HTML necessari per il tuo modulo di contatto.

<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>

Il codice HTML sopra crea un elemento del modulo e nidifica più campi di input per ricevere input dell'utente per il modulo di contatto.

Al momento, il tuo modulo di contatto è simile al seguente:

Un modulo di contatto attraente e intuitivo migliora l'esperienza complessiva dell'utente. Il codice CSS riportato di seguito utilizza le proprietà flexbox e del modello box CSS come il riempimento e il margine per definire lo stile del modulo di contatto per un aspetto migliore.

* {
 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;
}

Il tuo modulo di contatto ora assomiglia a questo:

Implementazione della convalida del modulo

Garantire l'accuratezza e la completezza delle informazioni fornite dagli utenti è fondamentale. Un approccio efficace prevede utilizzando JavaScript per la convalida del modulo lato client. Per iniziare, crea un tag script alla fine del file HTML e scegli come target l'elemento del modulo.