Following this guide you will be able to see the typography, styles, and layout to better understand how each section works.
The form below needed to be added in the rich text field, by selecting advanced and the show source code. The styles are on the site style sheet so by just following the code on the right the desired look should appear if you are using the right style sheet.
The code below would be the form used in html format to get the desired rendering on each page.
<form action="" method="post">
</form>
The code below would be put inside the form to distinguish and put the form fields into just one column or two:
<fieldset class="form-columns-1">
</fieldset>
<fieldset class="form-columns-2">
</fieldset>
This html will be added inside to the columns above in order to separate labels and inputs and give them all the same styles:
<div class="field-container">
</div>
The rest of the code that below will go inside the code above.
The code below will go on top of all of the input fields, radio fields, and checkbox fields.
<label for="example">First Name</label>
This code would be used for a regular text field like first name or last name:
<input type="text" id="example" name="example">
This code would be used for a phone number:
<input class="phone" type="tel" name="phone" value="" placeholder="" autocomplete="tel">
This code would be used for a email:
<input class="email" type="email" name="email" required="" placeholder="" value="" autocomplete="email">
This code would be used for a text area:
<textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
This code would be used for a select box:
<select name="things" id="things">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
This code would be used for a list of radio options:
<ul>
<li>
<label>
<input type="radio" name="items" checked="checked">
<span>Option One</span>
</label>
</li>
<li>
<label>
<input type="radio" name="items">
<span>Option Two</span>
</label>
</li>
</ul>
This code would be used for a list of check boxes:
<ul>
<li>
<label>
<input type="checkbox" name="more_items" checked="checked">
<span>Option 1</span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="more_items">
<span>Option 2</span>
</label>
</li>
</ul>
For the submit button all thats needed is to add this code below:
<div class="field-container submit">
<input type="submit" value="Submit" class="form-submit">
</div>