Building the Form

Adding and managing Webforms require a two-step process:

1. Create a webform.

   1. Click on Structure on the Administrative toolbar

   2. Click Webforms.

      Open

      

   3. After following the Create Webform instructional steps outlined on this page, complete Step 2. Publish Webform - directly below.

2. Publish the webform by creating a content item.

   1. Click on Content > Add Content.

   2. Click on Webform.

   3. Enter a Title and select the Webform.

Note: This step is to be completed after you complete the Create Webform steps.

Some items of note:

• You’ll see “Watch video” buttons in various places in the Webform module. These short videos are a great way to learn about Webform features.

• “Filter webforms” is useful if you have a large number of Webforms.

• An Operations button for each Webform allows you to build forms and view submissions.

Open

Creating a Simple Form

In this example, we’ll start off with a very simple newsletter signup form and then later we’ll add more complex elements. We’ll initially create two elements – first name and email address. One way to do this would be to duplicate the existing Contact form by clicking on the down arrow on the Operations button and then selecting Duplicate. We could then edit the form. The other way is to create the form from scratch and we’ll show you how to do that here.

• Click on the Add webform button.

• Enter a Title.

  • Example: “Newsletter Sign-up" or some other appropriate description to fit the purpose of your form.

• Choose a Category (optional).

  • If you plan to have a lot of forms then adding categories can be useful.

  • We’ll add a Newsletter category by selecting the “Other…” option.

• Select the Status to be Open if you are ready to accept submissions. Otherwise, select Closed.

• Click Save to create the form.

Adding Form Elements

After saving, you will be redirected to the Build screen. Here, you can start adding elements to the form.

• The captcha element is automatically placed on your form.

• Click the Add element button.

• Use the Filter by element name box at the top to find "Text field”.

• Click on Add element next to that field.

Managing Form Fields

• Enter First Name for the field title.

• For this example, leave all the other settings as they are.

• Click Save to finish.

• Click Add element again.

• This time, find the Email field and click on Add element next to that field.

• Enter Email for the field title.

• Click Save.

Viewing the Form

• Click on the View tab to see the form.

Setting Required Fields

• To make a field required: 

  • Select the checkbox under the Required column for both the First name and Email fields.

  • Click Save elements.

Customizing the Submit Button

There are several ways to customize each field, or you may choose to leave the default settings for the form. 

• To change the Submit button text:

  • Click the Edit tab.

  • To the right of Submit button(s), click Customize.

  • Enter Signup under “Submit button label”.

  • Click Save.

Note: When using a customized submit button you can adjust the position of it relative to other elements.

When you select the View tab, you will see that both fields are Required and the Submit button is labelled Signup.