DrJohn

u Ca

prro

all U

l n

Wivers

eity

b I N

sov

ie

tm

e be

r

T20

r19

aining Guide - Webforms

TABLE OF CONTENTS

• How to access your current web forms + submission data • How to edit your current webforms

• Edit form fields • Edit email notifications • Edit who has access to edit the form/submissions

• Adding a new web form • Adding a web form to a page on the website

UPWARD

UPWARD

ACCESSING CURRENT WEBFORMS + SUBMISSIONS

3

GETTING STARTED

• In order to make changes to your website, you must first login. Once logged in to CMS, Drupal, you will be able to make edits on each page using the editor.

• Site Details: • Site URL: www.jcu.edu • Content Management System (CMS): Drupal Version 8

• How to Login: • In your web browser’s address bar, go to www.jcu.edu/user • A login page will appear and you should insert your username and password

UPWARD

www.jcu.edu/userhttp:www.jcu.edu

GETTING STARTED – ACCESSING CURRENT WEBFORMS

• Once you login, you will see a toolbar at the top of the page. You will use that tool bar to access your webforms.

• To access the webforms, hover over Structure and then select “Webforms” • You will then be taken to a page with all your current webforms on the website.

UPWARD

WEB FORM LIST

• On the next screen, you will see all the webforms on your site.

UPWARD

NEXT TO EACH FORM THERE IS AN OPRERATIONS BUTTON THAT WILL

ALLOW YOU TO EDIT, VIEW SUBMISSIONS, ETC.

LIST OF CURRENT FORMS SITE NAME/ ROLE

HOW MANY SUBMISSIONS HAVE BEEN COMPETED FOR THE FORM

IF THE FORM IS STILL ACTIVE / LIVE ON THE SITE

ACCESSING FORM SUBMISSIONS

• To access the form submissions for a form, you can select on the number that appears in the “results” column for a specific form.

• You will then be taken to a page with all the form submissions for that form. You can view the form submission data on that screen or download an excel file of the submissions

UPWARD

FORM SUBMISSIONS

SUBMISSIONS You can view all the submissions for

your form here. •

FILTERS • If you have a lot of form submissions you can use the

filters to search for a specific submission • Insert your filters and then select the filter button to

filter your form submissions

DOWNLOAD SUBMISSIONS • If you would like to download an export of all the

submissions select the download link here. • See next slide for more details

UPWARD

FORM SUBMISSION DOWNLOADS

• After selecting “download” you will be taken to the following screen.

• All the setting should be set as you need to export all the form submissions.

• If you would like to refine the submissions you export you can complete the download options section. You can limit the export of submissions to: • Latest number of submissions • By submission number • Submission ID • Date – submissions between

certain dates

• Once you have the settings as you need, scroll down to the bottom of the page and click download. The submissions will be downloaded to an excel file on your computer. UPWARD

EDITING CURRENT WEBFORMS

UPWARD

UPWARD

EDITING A CURRENT WEB FORM – EDITING FORM FIELDS

• From your list of web forms, under “Operations” select “Build” next to the form you want to edit. You will then be taken to all of the fields that are currentlying in your selected web form.

REQUIRED FORM FIELD • Select the checkbox if

you want a certain form field to be required.

• Click save elements to save the update

OPERATIONS • Select “edit” next to the field you want to

edit. You will then be taken to a screen with that specific form field.

TITLE • This is the text that will appear

on the form field for the form

TYPE • This is the type of field that is

used for the form field

MOVE FIELDS • If you select the icon to the left

of the title you can drag and drop the fields to re-order them

EDITING A CURRENT WEB FORM – EDITING FORM FIELDS

• Once you select edit for the form field, a screen will appear where you can edit the form field, Type, Title Text and options available if the form is a dropdown, checkbox or multi value form field.

• You will need to click save at the bottom of the screen to save the updated form field.

WARD UP

TITLE • This is the text that will appear

on the form field for the form

OPTIONS • This form field is a select box

so there are multiple options a user can select. Those fields can be edited here.

CONDITIONS • You can also setup the specific

form field to be a conditional field. For example, if someone selects Monday on this form another form field can appear.

• Or if someone selects Monday it can email a certain email address.

• Select “conditions” and setup the conditional information here.

ADDING A NEW FORM FIELD

• If you would like to add a new form field to an existing form, in the “build” section of the form, you would select “add element”

• Once you select add element a box will appear with the different options for using on the form. The typical options you will use are: • Checkbox • Textarea • Text Field • CAPTCHA – this is a field that prevents spam • File Upload Element • Checkboxes • Radios • Email

• Next to the form field you want to add, select “add element”

UPWARD

ADDING A NEW FORM FIELD

• Once you select “add element” another screen will appear for you to add in the details for that form field.

• Select Save when you are finished adding the elements of the form field.

• You will then need to select “save elements” on the entire form to save your changes.

UPWARD

EMAIL NOTIFICATIONS

• For each form, you are able to setup different emails that will be notified when the form is completed on the website.

• To view/setup email notifications follow the steps below:

1. Go to the web forms section/ your list of web forms on the site:

UPWARD

EMAIL NOTIFICATIONS

2. Under operations, near the form you want to setup email notifications, select the dropdown arrow and click “settings”

UPWARD

EMAIL NOTIFICATIONS

3. You will then be taken to a screen with the main settings for the form. Select “email/handlers.” There you will see the emails that are setup to be notified when a form is submitted.

4. You can either select “edit” to edit the existing notification or select “add email” to setup a new/additional email notification for the form submission.

UPWARD

EMAIL NOTIFICATIONS

5. If you select edit, a panel will appear where you can edit the email address that gets sent the email notification.

Tthths

UPWARD

his is what is in e body copy of e email;

ubmission info

Name of email

notification - This

is only seen in

Drupal

Place email that

the email

notification should be sent to.

You can also add if additional emails should be copied or bcc’d on the email

This is what the person who receives the email notification will see in the from email name and name in the email

EMAIL NOTIFICATIONS

6. The “Conditions” tab will allow you to setup an email notification based on if a certain field in the form is filled out or select. For example, the email notification can be sent to a certain email if a userselects “Monday” for the days they can work.

UPWARD

Set the conditions to have this email notified

ACCESS TO A WEBFORM

• For your forms on the website, you can grant other site’s access to edit your form if needed.

• To edit or see who has access to your form, go to the form you want to edit in the form list and select “Settings” under operations.

• Then select the “access” tab. • Once you get to the access tab, you will see a

list of all the roles that are on the website, you should make sure your role is selected (if creating a new form), you can select additional roles if you want them to be able to view the form’s submissions or edit the webform.

• Select the checkbox next to the role you would like to give access and select “save”

• NEVER click “anonymous user” or “authenticated user”

UPWARD

ADD A NEW WEBFORM

UPWARD

ADDING A NEW WEBFORM • To add a new webform to your site, go to the “webforms” section as described in the

previous slides. Then, select “add webform”

• A pop-up box will appear and you should name your form and select your site/the site the form will appear on under “category”

• Click save • You will then fill out all the form fields and details for the form

UPWARD

TITLE • This only appears in Drupal. It does not

appear for the user of the website. • Recommend naming by your site for

easy look up. i.e. Biology – Learn About the Program Video

ADDING A NEW WEBFORM • Once you select, save you will be on the “build” screen, where you can add the form fields.

Select “add element”

UPWARD

ADDING A NEW WEBFORM • Once you select, save you will be on the “build” screen, where you can add the form fields.

Select “add element”

• Add the the form fields you would like on the form.

UPWARD

ADDING A NEW WEBFORM • After you finished adding the form fields, click “settings” > “Email / Handlers” • Setup the email notifications that will receive an email when the form is completed. • Select “ Add Email”

UPWARD

ADDING A NEW WEBFORM • After you finished setting up the email notifications, select “Access” • You will need to select your “role” / site to have access to this form and save the page. • Once you are done setting up the form you will need to create a page/ select the form on the

page you want to add the form to.

UPWARD

ADD A NEW WEBFORM TO A PAGE ON THE SITE

UPWARD

ADDING A NEW WEBFORM TO A PAGE

• If you are adding the webform to it’s own new page. Create the new webpage in the “content” template as you normally would on the site.

• The page must be in the content template to contain a form. • Once the page is created, in the “Body” tab, select “add contact form” from the dropdown of

UPWARD

different sections you can add on the page.

ADDING A NEW WEBFORM TO A PAGE

• After “Add Contact Form” is selected you will then have a dropdown appear that lists all the forms on the site, find your site, and select the form you want to add on the site.

• Save and publish the page.

UPWARD

Drupal+Webform+Training+Guide 1Drupal+Webform+Training+Guide 2Drupal+Webform+Training+Guide 3Drupal+Webform+Training+Guide 4Drupal+Webform+Training+Guide 5Drupal+Webform+Training+Guide 6Drupal+Webform+Training+Guide 7Drupal+Webform+Training+Guide 9Drupal+Webform+Training+Guide 10Drupal+Webform+Training+Guide 14Drupal+Webform+Training+Guide 15Drupal+Webform+Training+Guide 16Drupal+Webform+Training+Guide 17Drupal+Webform+Training+Guide 18Drupal+Webform+Training+Guide 19Drupal+Webform+Training+Guide 20Drupal+Webform+Training+Guide 21Drupal+Webform+Training+Guide 22Drupal+Webform+Training+Guide 23Drupal+Webform+Training+Guide 24Drupal+Webform+Training+Guide 25Drupal+Webform+Training+Guide 26Drupal+Webform+Training+Guide 27