Forms

When to use Gravity Forms

An online form allows users to enter information or data into a select set of fields that is collected by the form creator. Forms can be used to submit an online application, sign up for a newsletter, schedule an appointment, and more.

The university highly encourages online forms versus PDF’s, as online versions are ADA compliant and ensure accessibility to all users.

Gravity Forms

Gravity Forms is a WordPress plugin that allows site owners, admins, and publishers to create simple or advanced forms to collect information on their WordPress site. Gravity Forms is easy to configure, mobile-optimized, and security protected.

Video tutorial

In this video, we will cover how to build a custom online form and add it to a webpage.

Learn how to create forms

Self guided tutorial

Creating a form

Once logged into the WordPress editor, click “Forms” from the menu on the left hand side. You can select to create a new form or edit an existing form. For this example, we will build a new form.

Some things to keep in mind while creating your form: 

• Make sure your purpose is clear. Users should know what the form is for. 
• Provide clear instructions. It can be helpful to your users if you provide a quick sentence on how to complete each answer box.
• Be concise. Keep your form’s appearance organized and clean.

To get started, click “Add New” near the top of the page. A pop up will appear, enter a form title and a description for the form. Click “Create Form”. Select the Edit tab located at the top of the page below your form title. This is where you can add specified fields to your custom form. On the right hand side, there are four categories of fields for you to choose from in building a form.

• Standard Fields: Standard Fields provide basic form functionality, such as single line answers, paragraph box, and multi-select options, to name a few.

• Advanced Fields: Advanced Fields are for specific uses. They enable advanced formatting of regularly used fields such as Name, Email, Address, etc. Name and Email are ALWAYS required in creating a custom form on the NAU website.

• Post Fields: Post Fields allow you to add fields to your form that create Post Drafts in WordPress from the submitted data. These post fields: title, body, category, image, tags can be used to help submit information for blog/news posts.

• Pricing Fields: While this is rarely used on NAU sites, Pricing Fields allow you to add fields to your form that calculate pricing for selling goods and services. It may be a helpful tool for events.

When you are ready to begin building your form, simply click, drag and drop the fields from each category you would like to include. The fields can be dragged anywhere on the form to place them in the order you would like them to be presented. 

To further customize the fields, click on each of them to expand their settings and include field labels, instructions/descriptions, and required fields. The required check box allows you to select which answers are required and will prevent the form from being submitted if it is not filled out or selected.

To avoid losing your work, click ‘Update’ on the right hand side regularly before moving onto another section within the form.

Settings

Now that you have completed building and editing your form, let’s move onto the form’s settings, which allows you to customize your admin notifications and receipts to form submitters. 

Click “Settings” at the top of the page. To the left of the “Form Settings” page, there are 4 sections dividing the settings: Form Settings, Confirmations Settings, Notifications Settings, and Personal Data. In this training we will review the first three, as personal data settings shouldn’t need adjustments.

Form settings

In this settings section, we can select the label placement, description placement, and enable anti-spam honeypot. For consistency on NAU websites, be sure to always select:

• Label Placement to Top Aligned
• Description Placement to Above Inputs and
• Anti-Spam Honeypot must be Enabled

Remember, before moving to another section, click ‘Update Form Settings’, otherwise you will lose your work.

Confirmation settings

The Confirmations settings is where you can customize your message to form submitters.

A generic ‘Thank you’ message will be used if you do not opt to customize your message. To customize your message click “edit”, type in your new message, an click “Save Confirmation” to save the update.

Notification settings

The Notification settings is where you set up how your department receives the submitted form. Notifications of a form submission can be sent to multiple admins. The Admin Notification is required for all forms, otherwise all submitter answers will be lost. 

Follow the steps below to set up the forms notification settings: 

• Click “Admin Notification”. 
• The Name field defaults to ‘Admin Notification’.
• The Send to Email field: is where we will add the Admins/Maintainers email.
• The From Email field: should include DoNotReply@nau.edu. 
• The Subject Line field: must be: {form_title} submission from {Name (First):1.3} {Name (Last):1.6}. The curly brackets need to be included for the field to work.
• The Message field: is the Body of the email. Be sure to always include form contents by using {all_fields}.

Before moving to another section, be sure to click Update Notification, to avoid losing your work.

Adding a form to your page

Now that the custom form is set up using the Gravity Forms editor, you can add it to your webpage.

To begin, you’ll need to create a new page, or go to an existing page.

To add the form, click the small box with a plus sign. A pop-up box will appear with a preview of 6 commonly used WordPress block opinions. Search for ‘Forms’ in the search box. The Gravity Forms logo (a black hexagon shaped icon) with the word Forms will appear. Click the logo to add the block. 

A drop down option of all your custom forms will be available for selection. I will select the form I just built, and it will automatically pull into the webpage. 

Preview your changes by clicking ‘preview’ on the top right corner of the page editor. A popup will appear. You can preview your page on desktop, tablet, or mobile. Click the view you would like to see and hit ‘preview in new tab’. 

The embedded Gravity form is responsive to varying screen sizes, but you can double check by previewing the different screen sizes. Most users are on a mobile device, so it is always important to make sure your form is mobile friendly.

If your preview display looks good, return to your editor page and click ‘Submit to workflow’ (the blue button on the top right of the editor) to save your work and submit it for review.

Next topic

Tables

Learn how to easily create and manage tables using TablePress on your NAU website.