Webforms are a built-in function of our platform. They are great for signing people up to your newsletter, collecting prospective client information, RSVPing people for events, and more. Here's how to integrate one to your website:
STEP 1: Log in to your website dashboard (if you don't know how to do that, click here) and click on the Content>Form tabs to the left and New Webform button at the top right.
Step 2: The Title will be the name of the Webform, as well as the URL path. The Body will be the page content that appears before the webform. If you are unfamiliar with creating a new page, click here for more information. Finally, when this content in populated, click the Publish button at the top right.
STEP 3: After hitting publish, you will be redirected to the webform editing screen. The first thing to do here is create all your webform components. You add components by giving them a Label, Type, and toggling whether they are Mandatory fields or not.
Label is the label for the field as it appears on the form. For example, if you wanted to get a person's first name, you would give the field a label of First Name.
Type is the type of field being added. Here are the most common ones explained:
- Textfield: This is the most common field. Do not use for emails. It's used for one line of text input. Examples include name, phone number, city, state etc.
- E-mail: This field will only accept valid e-mail addresses. Using this field and making it mandatory is a great way to make sure you are receiving useful form submissions in which you can get back to people.
- Date: You can use this field to have users select a specific day (in the specificity of day, month, and year).
- Select options: This field is for creating a list of options for a user to pick from. You can choose to let users select one or multiple options.
- Textarea: This is like textfield, but it allows for multiple lines of text. Common uses for textarea fields are comments, descriptions, details etc.
Mandatory field toggles if the Label is important. If the client does not fill out the information, the webform will inform them to fill in the select Label.
Once you've fill in the details for a new field, click Add to be taken to the Edit component settings for this new field.
For Select options, you have a few variables to set. An option Description can be added to give the user a little information on the options below. For the Options themselves, you can add as many as you'd like by clicking Add item for each additional item. You can also toggle whether users can select one or multiple options, then choose whether any of those options are selected by default. Finally, you can scroll to the bottom and click Save component.
STEP 4: The Label and Field Key are automatically populated, so you don't need to change either of these unless you want to. Once again, you will have the option to toggle whether this field is Mandatory or not. For Textfield, Email, and Textarea.
When everything is set, scroll to the bottom and click Save configuration.
STEP 5 (OPTIONAL): You can choose to reorder form fields by clicking and dragging the four-way arrow to the left of an item and re-positioning it as desired. Once you are happy with the positioning, click the Save button.
STEP 6: The next step is to set the E-mail recipient for form submissions. Click on the E-mails tab to the right of Form components and enter the desired recipient e-mail in the Address field. Finally, click Add.
If you wish the client to receive an email notification. Click on the Component: Email
You will be redirected to a new page. This page shows a header called Email Header Details with 3 sections called Email subject, Email from Address, and Email from name. Each have 3 exact features
- Default: The email which is sent from will have an email notification called "firstname.lastname@example.org"
- Custom: manually enter the "sender" address for every form submission.
- If you have an e-mail or name field in your form that is set as mandatory Component: This notification will have a specific component you have created.
This page is automatically set to default.
When everything is set, scroll to the bottom and click Save e-mail settings.
STEP 7: The last step is to setup the Form Settings. Click Form Settings to the right of E-mails. In this section, you setup where users are taken after their submission via a Confirmation message and Redirection location.
The Confirmation message is generally a thank-you message users see after submitting their form. If you've selected Confirmation page from the Redirection location options, you'll see this as it's own page. Otherwise it displays briefly as a message.
Redirection location is a way to choose where your users are taken after submitting the form. By default, a Confirmation page is selected. This will show a default confirmation message (or a custom one if you've populated the Confirmation message above. You can also select a Custom URL: This is a good way to send them a particular file you've uploaded to your file browser. To send them a file, open the file and copy the URL from "/sites" onward (e.g. "/sites/default/files/users/johndoe/example.pdf"). The last option is to select No redirect, which reloads the page that the form is on.
Finally, scroll to the bottom and click Save configuration to save the Form Settings. Note: You also have the option to change the Submit button text by populating the Submit button text field.
Note: If you wish to insert a secure webform for payment processing on your website, we recommend Typeform (http://www.typeform.com/) for this.
If you have any more questions, feel free to submit a support request here.