After you log in into your Drupal site, hover over Structure and click Webforms:

Click the "+ Add webform"

Add a title for your new webform, the description is optional, then click Save:

You will see the following window, click the "+ Add element" button to start adding fields to your webform:

The "Select an element" window will pop up, let's start adding a "text field":

Add a title:

Scroll down and make this text field "required" by checking the checkbox as shown in the screenshot, then click Save:

Awesome! You have your first text field added, now click the "+ Add element" button to add a new field:

This time let's add an email field, this field makes sure that a valid email was entered when is "required":

Add a title:

Scroll down, make it "required" and click Save:

Let's add a "Radios" field, click the "+ Add element" button:

Use the top filter box to find the "Radios" field, click "Add element":

Add a title, make sure to select "Custom options" and type your option values:

These are the different options that can be used in a "Radios" field:

Scroll down and click Save:

Let's add a "Select" field, use the top filter box to find it, then click the "Add element" button:

Add a title, this time we will change the machine name to something simpler, click the "Edit" link next to the generated machine name:

Use a simpler machine name:

You can add more options to select from:

Scroll down and click Save when ready:

Let's add a "Textarea" field, click the "+ Add element" button and click the "Add element" button next to "Textarea":

Add a title:

Scroll down and click Save:

You can see how the Webform is looking so far, right-click the "View" link and select "Open Link in a New Tab":

Don't worry about the format of the email right now, later we will add this form to a single page:

Now we will configure the webform submission, go to the "Settings" tab, and then click on the "Emails / Handles" sub-tab:

Click the "+ Add email" button to add an email that will receive all the webform submissions:

In the "Send to" section, under the "To email" label, select "Custom To email address" from the dropdown and then add the desired email or emails separated by commas:

(For testing purposes is better if you add your own UCCS email first to test the submissions, then you can modify the email when the webform is ready)

(Optional!) In the "Reply To" section, select the "Email (email)" element from the dropdown. This email element will show the email from the user that fills the webform. When you reply to an email it will automatically populate the email from the user.

Note: The Send From "From email: must always be set to the default Site:mail option. If this is changed, your webform will not be able to send emails to the users on your Send To list.

Scroll down and click Save:

Let's test the webform, right-click the "Test" link and select "Open Link in a New Tab":

This will generate random values, click the "Submit" button:

This is the email with the webform submission values:

As you can see above, it is difficult to see the submission values in this email.

In the next section, I will show you how to format the email submissions so it is easy to read the values.

How to format webform submission emails

Go back to the "Build" view of the webform, we will focus on the key/machine-name of each input field of the form:

Using these webform input keys/machine-names we will write a custom HTML email submission body in a way that is easier to read.

Example structure of the custom HTML email submission script:

<p>Submitted on [webform_submission:created]</p><br />

<h2><strong>Name of the Webform</strong></h2>

<p><strong>Webform Input 1:</strong> [webform_submission:values:webform_input_1_key:value]</p>

<p><strong>Webform Input 2:</strong> [webform_submission:values:webform_input_2_key:value]</p>

<p><strong>Webform Input 3 Date field:</strong> [webform_submission:values:webform_input_3_date_key]</p>

Because our web form doesn't have any Date/Time fields, the custom HTML email submission script will be as follows:

<p>Submitted on [webform_submission:created]</p><br />

<h2><strong>Webform Example</strong></h2>

<p><strong>Name:</strong> [webform_submission:values:name:value]</p>

<p><strong>Email:</strong> [webform_submission:values:email:value]</p>

<p><strong>Best soccer team:</strong> [webform_submission:values:best_soccer_team:value]</p>

<p><strong>Which genre of movies do you like the most?:</strong> [webform_submission:values:movies_you_like:value]</p>

<p><strong>Message:</strong> [webform_submission:values:message:value]</p>

Go back to the Settings/Emails/Handlers Tab of your webform and click the "Edit" button:

In the "Message" section change the "Body" dropdown and select "Custom body...":

Now we will copy and paste the custom HTML email submission script inside the custom body text area, but there is something important to consider:

• If your site is hosted on the Acquia cloud you will need to click the "Source" button to paste the custom HTML email submission script as HTML.
• If your site is hosted on the UCCS servers you Don't have to click the "Source" button and just paste the custom HTML email submission script in the text area.

Save the changes by scrolling down and clicking the "Save" button.

Let's test the web form to make sure the custom HTML email submission script is correct and displays all the values of the submission.
Open the Test link on a new Tab:

Click the "Submit" button:

Go to your email Inbox and check the web form submission email:

Everything should be displayed correctly.

Add the webform to a Single Page in the UCCS Karsh Drupal theme

Now that the webform is created and configured, we need to add it to a "Single Page" so it has all the correct format and style.

You can use an existing page to add the new web form, in this example I will create a new page.
Hover over "Content", then hover over "Add content" and click the "UCCS Single Page 2018" link:

In order to add the webform to a page, you will need to use the "Single Page - Webform" row.

First, add a title to the new page and then select the "Add Single Page - Webform" option from the "Content Row" dropdown:

A new "Single Page - Webform" row will appear.

From the "Webform" dropdown select the correct web form, in this case, is "Webform Example".
Click the "Save" button when ready:

After saving the changes you should see the new webform with the proper style:

Done.