Table of Content
User comments, day to day communication between webmasters, service questions, overall opinions, so many different varieties of disclosure we find on sites rely on a useful contact form to permit with this back and forth communication to take place in the first location. Be conscious of the chances of net-based communication. Nevertheless, use a proper contact form that is easy to get and utilize.
How to code an HTML5 form?
HTML:
<form> <ul class="form-style-1"> <li><label>Full Name <span class="required">*</span></label><input type="text" name="field1" class="field-divided" placeholder="First" /> <input type="text" name="field2" class="field-divided" placeholder="Last" /></li> <li> <label>Email <span class="required">*</span></label> <input type="email" name="field3" class="field-long" /> </li> <li> <label>Subject</label> <select name="field4" class="field-select"> <option value="Advertise">Advertise</option> <option value="Partnership">Partnership</option> <option value="General Question">General</option> </select> </li> <li> <label>Your Message <span class="required">*</span></label> <textarea name="field5" id="field5" class="field-long field-textarea"></textarea> </li> <li> <input type="submit" value="Submit" /> </li> </ul> </form>
CSS:
<style type="text/css"> .form-style-1 { margin:10px auto; max-width: 400px; padding: 20px 12px 10px 20px; font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif; } .form-style-1 li { padding: 0; display: block; list-style: none; margin: 10px 0 0 0; } .form-style-1 label{ margin:0 0 3px 0; padding:0px; display:block; font-weight: bold; } .form-style-1 input[type=text], .form-style-1 input[type=date], .form-style-1 input[type=datetime], .form-style-1 input[type=number], .form-style-1 input[type=search], .form-style-1 input[type=time], .form-style-1 input[type=url], .form-style-1 input[type=email], textarea, select{ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border:1px solid #BEBEBE; padding: 7px; margin:0px; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; } .form-style-1 input[type=text]:focus, .form-style-1 input[type=date]:focus, .form-style-1 input[type=datetime]:focus, .form-style-1 input[type=number]:focus, .form-style-1 input[type=search]:focus, .form-style-1 input[type=time]:focus, .form-style-1 input[type=url]:focus, .form-style-1 input[type=email]:focus, .form-style-1 textarea:focus, .form-style-1 select:focus{ -moz-box-shadow: 0 0 8px #88D5E9; -webkit-box-shadow: 0 0 8px #88D5E9; box-shadow: 0 0 8px #88D5E9; border: 1px solid #88D5E9; } .form-style-1 .field-divided{ width: 49%; } .form-style-1 .field-long{ width: 100%; } .form-style-1 .field-select{ width: 100%; } .form-style-1 .field-textarea{ height: 100px; } .form-style-1 input[type=submit], .form-style-1 input[type=button]{ background: #4B99AD; padding: 8px 15px 8px 15px; border: none; color: #fff; } .form-style-1 input[type=submit]:hover, .form-style-1 input[type=button]:hover{ background: #4691A4; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } .form-style-1 .required{ color:red; } </style>