Webforms: Create a Structure

Step by Step

 

1. To create a new Webform, go to Structure > Webform and click on “+ Add webform”

 

 

2. Fill the following fields:

 

• Title: it’s a name to identify and find the form structure in other settings

• Administrative description: write a description to explain the objective of this form. Is not to be shown to the final user.

• Category: If your form is “Quiz and Trivia”, select this option. If not, select “Other”, and write the category, also you can select “None”

• Status: select Open or Closed.

 

3. Click on “Save” to finish.

 

 

Adding Elements:

 

1. After creating the webform, in the Build section, you can add elements and organize the webform structure

 

2. To do this, click on "Add Element", search the element by the name or scroll the list, and click on "Add element".

 

 

3. Then, will open a window to configure the element:

 

• Title: identify the fields in the form.

• Key: identifies which field an information is related to. Can't be changed after the element creation.

• Placeholder: helps the user to understand how to fill a field.

• Autocomplete: helps the user with text suggestions when he clicks on the field.

 

 

• Organizing the Fields: Press the arrow on the left side of the element name and drag the item to the position that you want.

 

 

• Flexbox: is used to organize the fields in columns. The items of a flexbox will stay like the image below:

   

◦ Flex: this property specifics the numbers of columns that an element will occupy about the other items in the same row.

 

 

• • Required Fields: to make a form field mandatory, mark the checkbox of the "Required" column.

 

4. Click on "Save Elements" to finish it.

 

 

Ajax Configuration:

 

1. Click on the tab Settings, search for Ajax settings, mark the checkbox and select the options indicated below.

 

2. To finish, click on the "Save".