Webforms

What is a webform?

A webform is a form you can create on your website to gather and store data from your visitors. The simplest implementation of a webform is a contact form, like the one you see here. You can make more complex webforms - gathering data such as first and last name, address, city, etc. You can also gather email addresses, website URL's, and have your visitors answer multiple choice questions or fill in entire paragraphs of information. All the information will be saved on the website for you to view and download in an Excel file for local storage and analysis. You can also choose to be notified by email when someone submits a form.

On this page you'll find:

• How to create a webform
• Adding fields to your webform
• Protecting your webform
• Protect all webforms on your site

How to create a webform

First, make sure you're signed up for webform support. Once webform support is installed on your website, browse to Create Content -> Webform:

Next you'll see a page similar to the page edit screen. You'll want to fill in the following fields:

• Title - the title of your webform
• Description - this will act as the body of the page - you may insert text, images, etc., just as if you were creating a page - the webform will show up below this.
• Confirmation message or redirect URL - This is what the user will see after submitting your webform. If you simply type a message, the user will see your message. If you type a URL (ie. web page address: http://www.feetfeetexample.com/thank-you) the user will be redirected to that address. This is useful if you want to create a separate thank you page and have them redirected to it after submitting the webform.
• Webform mail settings - here you'll be able to set where webform results are mailed to.
  • E-mail to address - specify the email address you'd like the webform results mailed to.
  • E-mail from name - decide the name you'd like to appear in the "From:" field when your results are emailed out.
  • E-mail from subject - specify the subject you'd like to appear in form submissions that are emailed out (ie. "Fleetfeetexample.com: Form Submission Received").
  • Submit button text - by default, the webform contains a "submit" button that people click to submit their responses. If you're rather it say something like "Go!" or "Submit RSVP" you can change that here.
• The remaining settings (menu settings, publishing options, etc.) are the same as for any page. When you're ready, save your webform by clicking the "submit" button at the bottom of the page.

Adding fields (components) to your webform

Now that you've got your webform created with title, description, and email settings, it's time to add the actual fields that users will be filling in. Anytime you need to edit a webform, simply click on the "edit" tab on the webform page, as you would with a regular page. Once in edit mode, you can click the configure link to edit the basic properties of a webform, as we did above; and the form components link to add input fields to the webform:

Now, to add fields to your webform, click on form components. You'll see the following page, where you can add input fields to your webform:

Simply type the name of the field you'd like to add, followed by the type:

• textfield - a one line text field, good for entering a word or two (ie. "first name")
• textarea - an area of text (you specify how many lines) - good for letting the visitor add a paragraph or two.
• email - used for capturing an email address.
• select - use this to ask your visitor a multiple choice question - you'll provide on question per line.
• more - experiment around with the various input formats. Once you select one to add, you'll find detailed instructions on the input field page explaining what the input field does and how to use it.

The mandatory checkbox means the visitor must enter something in the field, or the form will not submit. Use the E-mail checkbox to select those fields you'd like to have included in the email that is sent to you when the visitor submits the form.

Click the Add button to add the field. You'll be taken to an edit page where you specify:

• Label - this is the title of the input field that the user will see (ie. "First Name")
• Default value - if you want the field pre-filled with something. Typically you'll want to leave this blank.
• Description - if you need to instruct the user further on what to enter in the field, type an explanation here. This paragraph will appear just below the input field.
• Maxlength - if you want to restrict the user to a maximum amount of characters they can input in the input field, enter a value here (if not, leave blank).
• Width - enter values here to determine the length of the input fields as seen on the page. Experiment around with values to perfect the look of your webform, or leave blank to use the default width.
• Label placed left/ right - You can have a label placed just to the left or right of the user's input. If you're asking the user to input a dollar amount, for example, you could have the dollar symbol ($) appear to the left of the user input (as the user will only be inputting a number, not the dollar symbol).
• Advanced settings - the only settings you'll want to change here are the following:
  • Include in E-mails - check this box if you want results from this input field to be included in the email that is sent to you when a visitor submits the webform.
  • Mandatory - if checked, the webform will not submit until the user has entered a value in this input field. If, for example, you need to know the email address of a user, check this box to ensure that they don't leave it blank.

Click submit to save your input field.

When you're all done adding fields, hit publish to publish your webform.

protecting your webform

Important: After creating your webform, you need to protect it. Why protect your webform? To prevent hackers and spammers from misusing your form. If they do, your site may be compromised and we may have to temporarily shut down your web site for the security of the server. It is therefore vital that you protect all webforms on your site.

To protect a webform, you'll first need your Form ID.

How to find your Form ID - to find your webform ID, simply navigate to your webform, and then right-click on the "edit" tab and select "Copy Link Location."

Then paste the link location (hold down the Ctrl key on your keyboard and hit V) somewhere so you can view the form ID - ie. in your editor, in your browser address bar, a text document, etc. You'll see the following line pasted:

http://www.fleetfeetexample.com/node/3459/edit

The form ID is the number in bold above, in this case 3459.

Now that you know your form ID, you're ready to protect your webform. To protect a webform, simply browse to Create Content -> Add Webform -> Protect Webform:

This will bring you to the following screen:

In the Form ID field, you'll want to enter: webform_client_form_#, where the # is the ID of your webform you obtained above.

In the Challenge type field, select "Image (image captcha)" and hit Save. That's it - your webform is now protected. Users will need to enter a series of characters to prove they're human before submitting your webform.

To confirm that your webform is protected, you should see the following at the bottom of the webform you protected:

Protect all webforms on your site

For those of you that were using older versions of webform support, and have existing webforms on your site - it's important that you go back and enable protection for all your webforms. To ensure all your webforms are protected - browse to Manage Content -> List Content, and filter your content by type = webform. Repeat the above protection steps for all of the webforms published on your website.