In un precedente articolo abbiamo visto come creare form semplici in HTML, questa volta però il form di contatto che andremmo a creare sarà uno molto più complesso rispetto ai precedenti.
Per capire in dettaglio come creare il modulo di contatto, guardate la video guida seguente.
Se avete bisogno del codice sorgente usato per creare il form, lo trovate qui giù:
Codice sorgente HTML usato per la realizzazione del modulo di contatto:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form #1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<h1>Ultimate HTML5 & CSS Contact Form</h1>
<fieldset>
<legend>Please provide your details below</legend>
<label for="name">Your Name</label>
<input type="text" id="name" name="name" maxlength="30">
<br>
<label for="email">Email</label>
<input type="email" id="email" name="email" required maxlength="40">
<br>
<label for="phone">Phone</label>
<input type="phone" id="phone" name="phone" maxlength="10">
<br>
<label for="subject">Subject</label>
<select id="subject" name="subject">
<option value="Support">Support</option>
<option value="Sales">Sales</option>
<option value="Report a bug">Report a bug</option>
</select>
<br>
<label id="message_label" for="message">Message</label>
<textarea id="message" name="message" id="" cols="30" rows="2"></textarea>
<br>
<label for="file">Upload a file</label>
<input type="file" id="file" name="file" multiple>
<br>
<input type="submit" id="submit" value="Send details">
</fieldset>
</form>
</body>
</html>Codice sorgente CSS usato per la realizzazione del form di contatto:
* {
font-family: 'Lato', 'Helvetica';
}
body {
background-color: rgb(245, 245, 245);
}
h1, input, textarea, select, option, legend {
color: #555;
}
h1 {
font-weight: bold;
font-size: 30px;
}
#email {
margin-left: 60px;
}
#name {
margin-left: 22px;
}
#phone {
margin-left: 54px;
}
#subject {
margin-left: 46px;
}
#message {
margin-left: 35px;
}
#file {
margin-left: 1px;
border: 0px;
}
#submit {
margin-left: 99px;
background-color: rgb(44, 212, 114);
color: #fff;
border: 0px;
font-weight: bold;
font-size: 16px;
}
input, textarea, select {
padding: 8px;
border: 1px solid rgb(141, 141, 141);
border-radius: 5px;
margin-top: 20px;
}
legend {
background-color: #fff;
font-weight: bold;
padding: 10px;
border: 1px solid rgb(141, 141, 141);
border-radius: 5px;
}
fieldset {
border: 1px solid rgb(141, 141, 141);
border-radius: 5px;
}