Creating and Editing Webforms

How to create webforms and edit existing webforms.

Table of Contents

Creating a webform

Click "Create content" on the black editing toolbar. From the list of options click "webform"

On this webform editing page, enter a title in the "Title" text field. This should be what you want your form to be called, because it will appear as a header.

Enter the title

Uncheck "Published"

While you create your webform, be sure to scroll down to the "publishing options" menu and uncheck "published. (You will re-check this box later when you want your form to go live on the website.)

Click "Save" to start building your form.

The Webform Edit Screen

You will now see this screen:

Start adding components. Each component is simply a field that will appear on your form. Choose from different component types depending on the information that will need to be entered in each field. You designate the question or the prompt for each field in the "new component name" box. Below is a list describing each component type:

Date, Email, Time: Self-explanatory. For example, you would use these for due dates, contact information, and meeting time availability.
Textfield: A simple box for a relatively short entry of text. For example, you'd use this type of field for a "Name" field, a phone number or a book title. You can use this field type for almost anything, so you will use it often.
Text Area: A larger text entry box for a potentially longer entry of information. For example, this could be used if a person might have to input multiple serial numbers.
Fieldset: This is just a way to organize or group the information on your webform. For instance, if you wanted to section information into a "Contact Information" section, you would add a fieldset named "Contact Information," save, drag it above the fieds you want to be included in the set, and then drag to indent those fields in the set. Make sure you press "Save" once this dragging has occured. Click on "fieldset" for further instructions.
Select: This option allows you to give answer choices to a question. People select their answer with list boxes or select circles. Click "select" for further instructions.

Webform Edit Screen (with added components)

Once you have added components, your form edit screen will look like this:

If you check "Mandatory" on a component, people will not be able to submit the form without filling out that field. These fields will be marked on your form (in form view) by a red asterisk.

Organizing and Re-ordering A Webform

You can drag components to re-order the fields on the webform by clicking and dragging the crosshairs to the left of the component you want to move. After you move a component, you must click "Save" for the changes to appear.

Viewing Your Webform

At any time, you can preview your webform by clicking the "View" tab.

Adding emails

In order for the submitted webform results to be sent to the correct place, you will need to assign emails. First, you will want to make sure you create a confirmation email message to be sent to anyone who fills out the webform.

Creating a submission notification email

From the "Webform" tab, choose the "E-mails" sub tab.

Write the email where you want to receive notification of the completed form in the address bar and press "Add."

Use the options under "E-mail header details" to customize your email. Customize the subject, from address, and sender name. Use the default options provided, enter a custom option, or select from options input into the form by the user.

Optional: You can format the email using basic text and "token values." Token values are placeholder values that will be replaced by that particular user's information (in this case, the person who the email is being sent to who filled out the form). See more token values you can use by expanding the "Token Values" dropdown menu.

You can test this option by filling out a test form and submitting it. Check to make sure the email notification sent to the form collector includes all the information wanted. Add token values to the email template if more information is desired in the email.

Fieldset Instructions

Create a fieldset. Drag the fields you want to be included in the fieldset to an indented position under it. When you have added a fieldset and format the other fields into it correctly, click save. Your edit screen will then look like this:

A box will now appear around that set of information on the form:

Select instructions

In order to create a question like this:

You choose "select" from the dropdown menu, name your field, and press add. Once in the options menu, add the values you want to appear as your choices. Type a value such as 100, and continue to use that pattern. Larger numbers give you more possibilities to add more options. For instance, if I wanted to add an option between email and telephone, I would use the number 150. Each value is then followed by a bar |. This bar can be created with Shift + \.

Also, as with most components, you can add a description about how that section of the form should be filled out. This description will appear like directions above that component on the form.