Building a Simple Form

Gravity Forms is a robust form-building tool that you have access to through your Wired Impact website. The drag and drop system makes it easy to build simple forms for collecting basic information from your website visitors.

If you’ll need the ability for users to make a payment through your form, follow our instructions for building a paid form. To add other more complicated form fields, such as integrations or fields using conditional logic, Gravity Forms provides great documentation and tutorials on how to use the form tool.

Through this article, we’ll walk through creating a simple form from scratch on your website. As an example, we’ll go through the steps of building an interest form for a nonprofit program. Website users would submit this form if they are interested in participating in a nonprofit’s program. The next steps after submitting this form would be for nonprofit staff to contact the form submitter with next steps to see if they are a fit for the program.

Make a Plan

Before you get started, make a plan for your new form, including where the form will live. Think about what you need the form to do and where it makes the most sense to include on your website. We’d recommend only including each form on one page. For related pages, you can link visitors to the page with the form to complete it.

For our example Program Interest form, we would plan to add it to a specific program page and serve as a way for interested participants to contact us in order to begin the application process for the program.

Rather than piecing things together as you go along, it’s a good idea to give the following form details some thought before you start building:

  • Form fields you’ll need to include
  • Which fields should be required for a user to submit the form
  • Content for the Thank You page visitors are directed to after submitting the form
  • Content for the email visitors will receive after submitting the form
  • Email addresses for those at your organization who should be notified when the form is submitted

Create a New Form

This section includes information on how to do the following:

To get started on our Program Interest form, you’ll need to create a new form in the backend of your website.

  • From your dashboard, go to “Forms” on the left-hand side of your screen.
  • Click “New Form”
  • Add a title for the form, such as “Program Interest”.
  • You can leave the description field blank for now.
  • Click “Create Form”

Add Form Fields

Go to the “Edit” tab at the top of your screen to start adding form fields. There are a variety of form fields available to add and customize to your form. Learn about each type of field and its intended purpose within Gravity Forms. For example, you might use the “Radio Buttons” field for multiple choice questions and the “Paragraph Text” field to ask questions requiring longer responses.

To add a form field to your form, drag and drop the desired field from the bank of possible fields on the right-hand side of your screen. You can also reorder fields once they’ve been added by using the same drag and drop method.

Each form field has additional settings to customize the field to serve your purposes, such as requiring the field or changing the field label. Once you’ve required a field, you’ll see an asterisk next to the field label. You can adjust these additional settings by clicking the arrow in the top right of each field.

Using the Program Interest Form example, we included the following fields in this simple form.

Once you’re happy with the form fields, click the blue “Update” button on the right.

Adjust the Settings

Within the settings (found by clicking “Settings” at the top of your screen), you’ll want to make the following adjustments for a simple form:

  • Edit the button text. For a Program Interest form, the button text might be “Express Interest”.
  • Check the anti-spam honeypot checkbox to prevent spam submissions.
  • Click “Update Form Settings”.

If your form includes any fields with conditional logic, you’ll also want to check the box to “Enable animations” at this point.

Set a Confirmation

Once you’ve made a form, you’ll want to customize the confirmation message to let form submitters know that they’ve successfully submitted the form and what they can expect next. To set a confirmation, go to “Settings” at the top of the page and click “Confirmations”.

We’d recommend either using confirmation text or a thank you page for the confirmation. See how to do each below.

Create a Thank You page

Create a new page and name it something along the lines of “Thanks for Your Interest in X”. This page can live as a floating page on your website and should not be added to the navigation.

Include content on the page that thanks your supporters and runs through any next steps. You might also highlight other content and calls to action on your site that they may be interested in, such as your About Us page or Volunteer Opportunities.

You will want to set this page to be “no index”. This means that the page will be blocked from search engine results and ensures that only visitors who complete the form will land on this page.

  • Within the content editor for your Thank You page, scroll down to the section titled “Yoast SEO” and click the settings cog tab on the left.
  • Under “Allow search engines to show this Page in search results?”, select “No”.
  • Click the blue “Update” button in the top-right corner of the screen.

To set your new Thank You page as the confirmation message for your form, go back into “Confirmations” within your form settings.

  • Below the “Default Confirmation”, click “Edit”
  • Next to “Confirmation Type”, select “Page”
  • Select the Thank You page from the dropdown
  • Click “Save Confirmation”

Create a confirmation message

Not every form requires a thank you page. Sometimes a simple “Your form was submitted successfully, and we’ll be in touch with you soon.” will do the trick if there aren’t many next steps for the form submitter.

To use a text confirmation message, you can edit the default message within the form.

  • Within “Default Confirmation”, click “edit”
  • Adjust the content to be whatever you’d like
  • Click “Save Confirmation”

Set Notifications

If you would like to notify either your team and/or the person who submitted your form that the form was submitted successfully and relay the details of the form, you can do so through an automated notification email.

Admin Notification

To update the admin notification that goes to you or members of your team:

  • Go to the “Notifications” tab within “Settings”.
  • Under “Admin Notification”, click “Edit”
  • Add to or update the “Send to Email” field to include all of the emails that new form submission notifications should be sent to, separated by commas. The default “{admin_email}” will go to the same email that receives administrative emails for your website.
  • If you’d like, you can adjust the “Subject” field to change the subjects of these automated emails based on your preferences.

If neither you nor your team members would like to receive an email each time the form is submitted, you can turn these notifications off. You’ll still be able to review and export form submissions at any time. To turn the admin notification off (or back on), simply click on the toggle next to “Admin Notification”.

Submitter Notification

To send an automated notification email to the person who submitted the form, you’ll need to have required the email field within your form fields.

  • Within “Notifications”, click “Add New”
  • Name the notification. This is purely internal and can be something along the lines of “Submitter Notification”.
  • Next to “Send To”, click the “Select a Field” option
  • Choose your email field from the dropdown
  • Add a “From Name” for the email notification
  • If you’d like, you can adjust the “From Email” to be different than the default admin email of your website.
  • Note a subject line for the email next to “Subject”
  • Add the body of your email within the “Message” section. To include a copy of all their answers from the form for their records, use “{all_fields}” to automatically pull those into the email.
  • Don’t forget to save your notification by clicking the blue “Save Notification” button at the bottom of the page.

For a Program Interest form, the “Message” section of the email might read something like this:

Hello,

Thanks for your interest in our program! We’ll take a look at your responses and reach out to you with more information and next steps within two business days. We’ve included a copy of those responses below for your records.

Best,
The X Team

{all_fields}

Add Your Form to a Page

Now that you’ve created your form and set up your notifications and confirmations, follow the steps below to add it to a page, test it and publish it.

  • Click the “Pages” menu on the left side of the backend of your website.
  • Click the name of the page where you want to include the form. This will take you to the edit screen for that page.
  • Place your cursor where you want to add the form and hit enter on your keyboard to create a new block. A paragraph block is added by default, but we’ll change that in the next step.
  • Type a forward slash (/) then the word “form” to filter the blocks until you see one called “Forms”.
  • Click the “Forms” option in the popup menu. A new block to choose your form will appear.
  • Using the “Select a Form” dropdown, choose the form you want to display on this page. Once you choose, a preview of the form may appear. Although, this doesn’t happen for every form.
  • In the Block Settings in the sidebar on the right of your screen, use the toggles to display or hide the “Form Title” and “Form Description”. In most cases we recommend hiding both of these and instead using page content to include text or headings above your form.
  • Click the gray “Preview” button in the top right to see how the form will display on the page.
  • Follow steps to test your new form within the page preview.
  • If everything looks great, publish your changes by using the blue “Publish” or “Update” button in the top right of the edit screen for the page. That’s it. Your form is now live.

Review and Export Form Submissions

Once visitors begin to submit completed forms through your website, you’ll be able to view and export that data for your records.

Still Have Questions?

Reach out to us within your website’s admin dashboard. Log into your website and then fill out the Website Support form. You’ll hear back from one of Wired Impact’s team members within one business day.