Form

Form shortcode arguments
Classes
Sizemini small medium large big huge massive
Fieldsequal width
Stateloading success error warning
Otherinverted
idID of the form.
nameName of the form.
methodForm method: get/post.
actionForm action.
Fields shortcode arguments
Classes
Countone two three ... ten
Otherinline grouped equal width
Field shortcode arguments
Classes
Statedisabled error
Widthone wide two wide three wide ... sixteen wide
Otherrequired
labelLabel text for the field
Basic form
<form>
  <fields two>
    <field label="Label">
      <input>
    </field>
    <field label="Label">
      <input>
    </field>
  </fields>
  <button type="submit">Submit</button>
</form>
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>
Edge cases

Shipping Information

<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.
Shortcode demo
Text in a regular field.
Text in a description field.
<form title="Description field">
  <field>Text in a regular field.</field>
  <field description>Text in a description field.</field>
</form>
Compact description field
Use at least one letter, one numeral, and seven characters.
<form>
  <field label="Password"><input type="password"></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

Dan Lewis

How do we tell it where to send the form response?

websevendev

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.

Leave a comment

Your email address will not be published. Required fields are marked *