Form
Title
Form Text
<div class="form">
<p class="title">Title</p>
<p>Form Text</p>
<form action="" method="POST">
<input class="input-1" type="text" aria-label="Full Name" name="Full Name" placeholder="Full Name"
required>
<input type="tel" class="input-1" aria-label="Phone Number" name="Phone Number"
placeholder="Phone Number" required>
<input type=“text” placeholder="Email Address" aria-label="Email Address" name="email" required>
<textarea name="Message" placeholder="Write Your Message Here" aria-label="Message" required></textarea>
<button class="button" type="submit" aria-label="submit" value="button">Submit</button>
</form>
</div>
Checkboxes Example
<div>
<label>How Would You Like To Be Contacted?</label>
<p>Check all that apply.</p>
<div>
<input type="checkbox" id="Phone" name="How Would You Like To Be Contacted?" value="Phone">
<label for="Phone">Phone</label>
</div>
<div>
<input type="checkbox" id="Email" name="How Would You Like To Be Contacted?" value="Email">
<label for="Email">Email</label>
</div>
</div>
Select State Option
<div>
<label for="usstates">US States <span>*</span></label>
<select name="US State" id="usstates" aria-invalid="false" aria-labelledby="usstates">
<option value="Please Select" selected="selected" disabled>Please Select</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
<option value="DC">Washington DC</option>
<option value="AE">ARMED FORCES AFRICA \ CANADA \ EUROPE \ MIDDLE EAST</option>
<option value="AA">ARMED FORCES AMERICA (EXCEPT CANADA)</option>
<option value="AP">ARMED FORCES PACIFIC</option>
</select>
</div>
Disclaimer Box
<label class="disc" aria-label="I have read the disclaimer">
<input type="checkbox" aria-label="I Have Read The Disclaimer" name="I Have Read The Disclaimer" value="Yes" required>
<p>I Have Read The Disclaimer *</p>
</label>
Form with Upload Attachment
add:
accept-charset="utf-8" enctype="multipart/form-data"
to form tag line
Example:
<form action="" method="POST" accept-charset="utf-8" enctype="multipart/form-data">
Put this input section where the attachment will be going
<label class="custom-file-upload">
<input onchange="showname()" id="file" accept="image/jpeg,image/png,image/gif,image/svg+xml,application/pdf,image/x-eps,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" name="Attachment" type="file">
<span id="image-upload">Attach Your Files <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.004 5H9C7.162 5 5.414 5.737 4.076 7.076C2.737 8.415 2 10.163 2 12C2 13.838 2.737 15.586 4.076 16.924C5.414 18.263 7.162 19 9 19H17V17H9C7.697 17 6.45 16.471 5.49 15.51C4.529 14.55 4 13.303 4 12C4 10.698 4.529 9.451 5.49 8.49C6.45 7.529 7.697 7 9 7H17V6L17.001 7H17.004C17.794 7 18.543 7.314 19.113 7.886C19.684 8.457 19.999 9.208 20 10.002C19.9997 10.3947 19.9214 10.7835 19.7696 11.1457C19.6179 11.5079 19.3957 11.8363 19.116 12.112C18.8392 12.3922 18.5098 12.6148 18.1466 12.7672C17.7835 12.9196 17.3938 12.9987 17 13H9C8.86963 12.9984 8.74086 12.9711 8.62108 12.9196C8.50129 12.8681 8.39286 12.7935 8.302 12.7C8.20794 12.609 8.13283 12.5003 8.08099 12.3802C8.02916 12.2601 8.00163 12.1308 8 12C8 11.748 8.11 11.493 8.301 11.302C8.39171 11.2079 8.50021 11.1327 8.6202 11.0809C8.7402 11.029 8.86929 11.0015 9 11H17V9H9C8.21 9 7.459 9.315 6.886 9.889C6.314 10.461 6 11.211 6 12C6 12.789 6.314 13.54 6.888 14.114C7.16401 14.3939 7.49277 14.6164 7.85529 14.7685C8.21781 14.9205 8.60688 14.9992 9 15H17.001C17.6572 14.9995 18.3068 14.8691 18.9123 14.6163C19.5178 14.3635 20.0673 13.9933 20.529 13.527C20.9948 13.0652 21.3644 12.5156 21.6167 11.9101C21.8689 11.3047 21.9988 10.6552 21.9987 9.99929C21.9986 9.34337 21.8686 8.69395 21.6161 8.08854C21.3637 7.48313 20.9939 6.93371 20.528 6.472C20.0674 6.0055 19.5186 5.63515 18.9137 5.38246C18.3087 5.12977 17.6596 4.99976 17.004 5Z" fill="#807E7E"/>
</svg></span>
</label>
<script>
function showname() {document.getElementById('image-upload').innerHTML = document.getElementById('file').files[0].name};
</script>