Forms Block

Forms may look complicated, but with the Gutenberg Editor, it is easy to build and customize them to fit your website needs. The process is straightforward and you can have a form up and running in only a few clicks.

Add a form block

You can search for the from option using two different ways.

• Click on the Add Block icon.

• Search for the word "form", then select the icon.

• Alternatively, you can use the slash command and enter "/form" in a new paragraph block, then press enter to add one quickly.

After you have added a form block, you will be able to choose from a pre-built form or to skip. Skipping will produce a basic contact form like the one below.

Customize the form block

Each form can be modified to fit your needs and the main hub to do this will be your toolbar at the top. This will appear once the field has been selected. 

Insert new field

• Select a current field in the form; a toolbar will appear.

• Click the three dots on the far right on the toolbar to expand options.
• From the menu, select:
  • Insert before - to add a new field above the current field.
  • Insert after - to add a new field below the current field.

• Type a ‘ / ‘ in the field to see the types of fields that can be added.

Modifying an existing field

• In the example shown above, the 'Select' field is utilizing the "Select" form field option where the user will be able to choose an option from a dropdown menu.

• To change this to another form field option, navigate to the toolbar at the top.
• Click on the checkmark to open the menu for the other options; if you hover over the checkmark, it will say "Select: change block type or style."
• When you hover over each option, a preview of that option will pop out to the right.

Edit a field's information

• Click on the name of the field you would like to edit.
• Under the Block menu in the right hand navigation, change the Input Settings to your desired text for the Input name, Input type, Input label, and Placeholder text (what appears in the fillable field).

Making a field required

Each field on your form can be required or not. 

• Click on the name of the field you would like to make required.
• Slide the button to the right to make the field required for the user to fill in while completing the form; if it is slid to the left, the field will not be required to be filled in for submission.