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.
3 responses to “Form”
How do we tell it where to send the form response?
These shortcodes are basically regular HTML form elements, so you can treat it as such. For example you could handle it with PHP. But this is advanced and requires manual coding. If you need a simple contact form then go with a plugin like CF7 instead.