Breadcrumb

Webforms

All About the Webform Module

Many websites contain forms, whether it is a simple feedback form or to handle registration and submissions. 

How to make a webform

  1. Go to Structure > Webforms > click on + Add webform
  2. Give it a title. Description and Category is optional. Make sure  Status  is Open
  3. Click Save
  4. After the page reloads, you’ll be taken to your new Form’s build page.
    + Add page -  allows you to add another page to your form;
    + Add layout – adds a flexbox layout
    but what we’re really concerned about is + Add elements
  5.  Click on + Add element.  You’ll be shown a list of available form fields.
    Some useful fields are:
    Name
    Email
    Text Field
    Text Area
    Look for your desired form element and click Add element
  6. Once the page finishes loading, a new window pane will appear on the right side of your screen for the element settings.
    Give your element a Title.  This will be the label that appears on the form.
    IMPORTANT: Keep your form labels short and simple but descriptive. This will come handy when you set up emails.
    Setup your form field however you want (check required fields if they are)
    When your done setting up the fields, click on save.
  7. When satisfied with your form, click Save elements.
  8. Click on the View tab to view your webform
  9. The submit button is added by default

Setting up emails

  1. Go to Structure > Webforms > Your webform > Settings > Emails/Handlers
  2. Click on +Add email
  3. On the right side of your screen, there should be a new Configurations window for setting up your email.
    Give it a title
    Depending on the context of this email (Notification, Confirmation, etc), you can tweak who the recipients are for this email.

    By default, [site:mail] will be selected. This is the email you used when you setup your Drupal site.

    to send it to a specific person, click on the to email dropdown and select Custom To email address…
    a new text field should appear and you can fill that with a custom email address.

    You can do something similar with the Send From and the Message sections.

    To use submitted form fields for a more personalized touch, use the following syntax:

    [webform_submission:values:<FIELD_KEY>]

Replace <FIELD_KEY> with the keys of your fields. This is why it’s important to keep your form labels short.

A sample personalized email:

Hi Kevin,
A question from [webform_submission:values:name] was submitted to you.
 

Their question was:
[webform_submission:values:question]

You can contact him on the following
[webform_submission:values:email]
[webform_submission:values:tel_number]

thanks,
Sample UCR

Email Handlers

1. Navigate to Structure -> Webforms
2. Click on "Build" for Request a Report (that's the form to be updated)
3. Click the Settings tab and choose "Emails/Handlers" in the sub tab
4. Click Edit for the Email Confirmation
5. In the pop out box, scroll to the "send to" area and update the to "to email" section, where you can remove any emails (or add emails)
6. Scroll and click "Save" 

MISCELLANEOUS

How to add conditions (conditional mails and fields)

  1. Go to Structure > Webforms > your Webform > Build > click on +Add element
  2. Go to Conditions
  3. Under Conditional Logic, setup your desired conditions with the given options
  4. Click Save
  5. Click  Save elements

How to configure reCAPTCHA

  1. Go to Configuration > People > CAPTCHA module settings > reCAPTCHA
  2. Enter your SITE and Secret keys. If you don’t have this, click on register for reCAPTCHA. This will redirect you to Google’s dashboard for configuring reCaptcha.*
  3. Click Save configuration

*if you’re registering your site for reCAPTCHA, please use the reCAPTCHA v2 under reCAPTCHA type. The Drupal reCAPTCHA module is only configured up to v2.

How to add a reCAPTCHA field to webform

If recaptcha is enabled on your site, you can add a recaptcha field like you would add any other field on the form:

  1. Go to Structure > Webforms > your Webform > Build > click on +Add element
  2. Search for CAPTCHA
  3. On the window that appears on the right side of your screen, leave Element Settings  alone but go to CAPTCHA Settings and under Challenge type select reCAPTCHA(from module recaptcha)
  4. Click Save

You won’t be able to see the reCAPTCHA field when you’re on admin mode.

Important: ReCAPTCHA and other similar technologies out there doesn’t really guarantee blocking 100% of bot submissions. Bots usually attack by submitting forms in large batches.

How to change the text on the submit button

  1. Go to Structure > Webforms > Your webform > Build > click on the Customize button for Submit button(s)
  2. On the window that comes up on the right side of your screen, go to Submit button label and enter in your desired button label. Click Save.

How to setup a customized confirmation screen

  1. Go to Structure > Webforms > your Webform > Settings > Confirmation
  2. The most popular option is to display a custom page so under Confirmation Type, select URL(redirects to a custom path or URL)
  3. Under Confirmation URL(  /confirmation will do ), enter in your confirmation page. This can be a simple basic page that just notifies the submitter
  4. Click Save

How to download form results

  1. Go to Structure > Webforms > your Webform > Results > Download
  2. I would leave everything untouched but go down to Column Options
  3. Depending on what you want to see on the report, check any items you see fit. The form fields you’ve added will be at the end.
    You’ll want to include Completed  as this will give you a timestamp of when this form was submitted
  4. Click Save settings. So you won’t have to go through step 3 every time.
  5. Click on Download. You will then get a csv file (form_name.csv)

How to add a webform as a block through Panelizer

  1. On the Panels Dashboard, Click Manage Content > look for Webform > Select Webform 
  2. On Configure Webform Block, choose to hide or display the title
  3. Under the Webform field, search for the name of your webform
  4. Select which region where this is going to be displayed
  5. Click Add
  6. Click Save on the Panelizer

How to add a webform as a block through Layout 

  1. In the Layout tab, after you have determined the section where the block will be, click on "Add Block". The panel on the right will open.
  2. Scroll to the "Webform" section or filter for "Webform". Select "Webform"
    webform block options
  3. Configure the block. You can change the title or uncheck the display title option. In the "Webform" field, start typing the name of the webform created, it will begin to auto populate. In the example, "Drupal Trainings" was used. Then click "Add block". 
    Webform block configure example screenshot
  4. Click on the pencil icon to configure, move, or remove the webform block. 
    pencil icon for block