Form
Form shortcode arguments
| Classes |
| ||||||||
id | ID of the form. | ||||||||
name | Name of the form. | ||||||||
method | Form method. [get|post] (Default: get) | ||||||||
action | Form action. | ||||||||
amp | Set to "true" to allow displaying form on AMP pages. |
Fields shortcode arguments
| Classes |
|
Field shortcode arguments
| Classes |
| ||||||
label | Label text for the field |
Basic form
<form amp="true">
<fields two>
<field label="Label">
<input>
</field>
<field label="Label">
<input>
</field>
</fields>
<button type="submit">Submit</button>
</form>Notes
By default forms are not rendered on AMP pages. Add the attribute amp=true to enable. Ensure the form works on AMP pages.Inline fields
<form>
<fields inline>
<field eight wide label="Name">
<input placeholder="First Name">
</field>
<field three wide>
<input placeholder="Middle name">
</field>
<field five wide>
<input placeholder="Last name">
</field>
</fields>
</form>Equal width fields
<form small>
<fields equal width>
<field label="Field">
<input>
</field>
<field label="Field">
<input>
</field>
<field label="Field">
<input>
</field>
</fields>
<fields>
<field label="Field">
<input>
</field>
<field label="Field">
<input>
</field>
<field label="Field">
<input>
</field>
</fields>
</form>Required fields
<form>
<fields two required>
<field label="Field">
<input>
</field>
<field label="Field">
<input>
</field>
</fields>
<field required label="Field">
<input>
</field>
</form>Edge cases
<form text container segment>
<header dividing tag="h4">Shipping Information</header>
<field label="Billing Address">
<fields>
<div twelve wide field>
<input name="shipping((address))" placeholder="Street Address">
</div>
<div four wide field>
<input name="shipping((address-2))" placeholder="Apt #">
</div>
</fields>
</field>
</form>Notes
Same shortcodes are not able to nest so the div shortcode with field class can be used as a substitute.Shortcode arguments cannot contain square brackets, so double parenthesis can be used instead.
Description field
<form>
<field>Text in a regular field.</field>
<field description>Text in a description field.</field>
</form>Compact description field
<form>
<field label="Username"><input type="text"></field>
<field compact description>Use at least one letter, one numeral, and seven characters.</field>
</form>Notes
Compact description field describes the previous field.