These are notes for the above video, you need to watch it to get the full picture.
The following code snippets are examples of form fields for Dawn as well as all the free Shopify 2.0 themes - Craft, Crave, Sense, Taste, Ride, Studio, & Colorblock.
One-line Text Input
For websites like this you can also use input type=“url” if you want validation but that wasn’t important for me.
<div class="field">
<input class="field__input" type="text" id="ContactForm-website" name="contact[website]" placeholder="Website">
<label class="field__label" for="ContactForm-website">Website</label>
</div>Multi-line Textarea
<div class="field">
<textarea
rows="10"
id="ContactForm-message"
class="text-area field__input"
name="contact[message]"
placeholder="Message"
></textarea>
<label class="form__label field__label" for="ContactForm-message">Message</label>
</div>Select Dropdown
<svg style="display: none">
<symbol id="icon-caret" viewBox="0 0 10 6">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
</symbol>
</svg>
<div class="field">
<div class="select">
<select class="field__input select__select" style="font-size: inherit; padding-top: 0.8rem;" id="ContactForm-Options" name="contact[options]" placeholder="Options">
<option selected disabled required value="">Choose an option:</option>
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
</select>
<svg class="icon-caret" aria-hidden="true" focusable="false" viewBox="0 0 10 6">
<use href="#icon-caret" />
</svg>
</div>
<label class="field__label" style="visibility: hidden;" for="ContactForm-Options">Choose an option:</label>
</div>Checkbox
<div style="margin-bottom: 2rem; display: flex; align-items: center;">
<input type="checkbox" name="contact[gift]" value="yes" >
<label for="gift">This is gift</label>
</div>