Create an Online Petition With Gravity Forms and GravityView (Show Signatures on the Front End!)

Are you looking to host your own online petition using Gravity Forms?

Creating a petition is a good way to raise awareness about important issues and make your voice heard. Are you ready to start effecting real change? In this post, we’ll show you how to create a petition on your website using Gravity Forms and display signatures on the front end using GravityView. 

Let’s get started! 🙌

What Is an Online Petition?

Hosting an online petition is one of the best ways to rally a large group of people behind a common cause. 

Traditionally, petitions were signed using pen and paper by a group of people to indicate their support of a petition letter. However, most petitions these days are carried out online. 

Thanks to the ubiquity of the internet, online petitions can spread quickly and generate thousands of signatures in a short amount of time. Online petitions have a better chance of “going viral” and generating lots of support. 

There are various websites out there that allow you to draft petitions and then share them online to generate signatures. However, hosting a petition on your own website gives you more control over the process.

WordPress Petition Plugins

There are several WordPress plugins that allow you to create petitions on your website and collect signatures. However, most of them lack flexibility, which can make it difficult to find an optimal solution.

What Is GravityView?

GravityView is an add-on for Gravity Forms (the number one WordPress form plugin!) that allows you to display form entries on the front end of your website. Using Gravity Forms in combination with GravityView gives you a powerful way to build WordPress-powered web applications, such as task-management systems or business directories.

Gravity Forms allows you to create a form so users can sign your petition. You can then use GravityView to display those signatures on the front end in a variety of different ways.

Here’s what our online petition will look like when we’re finished:

Okay, let’s start building our petition form along with a View to display signatures on the front end! 👇

Creating the Petition Form

The first step is to create the petition form so you can collect signatures for your petition letter.

Start by hovering over Forms in your WordPress Admin menu and clicking on New Form. Next, give your form a name and click Create Form.

Now you can start building your petition form using the Gravity Forms drag-and-drop builder. Feel free to add different fields to your form depending on the information you want to capture for your petition.

For this example, we’ll keep things simple by adding the following 3 fields:

• Name (Name field)
• Email (Email field)
• City (Single Line Text field)

We’ll also add a fourth field allowing users to choose whether to show their name publicly on the front end or keep it anonymous. For this we’ll use a Drop Down field with two options – “yes” or “no”.

Here’s what our form looks like on the front end:

If you’re looking to create an email petition, in other words, if you want to send an email every time a user signs your petition letter, you can do that by configuring Gravity Forms email notifications.

Now that we have a way to collect signatures for our petition, we can use GravityView to display those signatures on the front end!

Displaying Signatures on the Front End 

The next step is to create a View that allows you to display signatures on the front end of your site.

Installing GravityView

To get started with GravityView, purchase a license from our website. Next, log in to your Account page, click on the Downloads tab at the top and download the plugin file to your computer.

To install the plugin, head over to your WordPress site, hover over Plugins, and click Add New. Now click Upload Plugin and select the zip file you downloaded in the previous step. When the plugin has finished installing, click Activate.

Creating a View

GravityView adds a new custom post type to WordPress called “Views”. Views allow you to display data collected through Gravity Forms.

To create a new View, hover over Views and click New View. Now give your View a name (something like “Petition Signatures”) and select your petition form as the Data Source.

After selecting a data source, you can choose a view type. A view type is a layout template for displaying Gravity Forms entries. For this example, we’ll choose the Table layout.

Now you can start building your View using GravityView’s drag and drop interface. 

Adding Fields to Your View Layout

Start by scrolling down to the Entries Fields section. Here you can add fields that display as columns in a table.

To add a new field, click the + Add Table Column button. For this example, we’ll add the Name and City fields along with the Date signed and a counter that keeps track of the number of signatures.

To add the signature counter field, click the + Add Table Column button and select the Custom Content field. Custom Content fields allow you to add merge tags, shortcodes, and HTML to your view layout! After adding a Custom Content field to your View, click on the gear icon to open the field settings.

To create a signature counter, we’ll use the sequence merge tag. This merge tag displays the result number of an entry. To ensure that the first signature displays as number 1, the second as number 2, and so on, we’ll add the “reverse” modifier. 

Finally, we’ll add a custom field label by modifying the Label settings.

The next field we need to add is the “Date signed”. To do this, click the + Add Field Button and select the Date field. This will display the date the entry was created.

Finally, we need a way to conditionally display the name based on whether the user selected “Yes” or “No” from the “Display full name?” dropdown field. If they selected “Yes”, we want to display their full name but if they selected “No”, we want to replace their name with “anonymous”.

To do this, we can use the handy shortcode. This allows us to show/hide content depending on whether a value matches a certain condition.

To conditionally display the Name field, we’ll use the following code inside a Custom Content field.

Now feel free to add any other fields to your View that you think are necessary!

Adding Widgets to Your View

Widgets are tools for navigating your View and displaying extra information. You can add widgets to the widget areas located at the top or bottom of the view layout.

Widgets include things like search bars, pagination info, and page navigation links. To add a widget to your View, simply click the + Add Widget button and select a widget from the list.

After adding fields and widgets to your View Layout, the final step is to configure the View Settings.

Configuring the View Settings

To modify the View settings, scroll down to the Settings meta box. Here you’ll find a few different options that you may wish to enable.

First off is the option to show only approved entries. This allows you to first approve signatures before they are displayed on the front end.

Next is the option to allow user export. Enabling this option gives users the ability to export a list of signatures to either CSV or TSV by adding “/csv” or “/tsv” to the end of the View URL.

When you’ve finished configuring the View Settings, you can embed your View on a page or post using the GravityView embed shortcode.

Embedding the View on a Post or Page

Start off by copying the embed shortcode. You’ll find it on the right of the View page above the “Update” button.

Next, create a new post or page and add a “Shortcode” block by clicking on the ‘+’ button and selecting Shortcode.

Now paste the shortcode inside the Shortcode block and update your page/post.

If you’re not using the WordPress block editor (Gutenberg), simply paste the shortcode into a text module.

Finally, update the page and check it out on the front end. The shortcode will be replaced by a list of signatures.

Displaying the Total Number of Signatures

Instead of displaying the names of everyone who signs your petition, you may only want to display the total number of signatures. This is easy to accomplish using our Math add-on 😎

Math by GravityView allows you to do calculations (both simple and complex) using your Gravity Forms data. Using the [gv_math] shortcode, you can output calculations anywhere on your website, including posts, pages, and widgets.

To display the total signatures added, edit the page or post where you want to display the total number of signatures for your petition and paste the following shortcode inside a Shortcode, Paragraph, or Heading block. 

[gv_math scope="form" id="9"] {Name:5:count} [/gv_math] people have already signed this petition!

Remember to swap out the form ID and the merge tag. Notice that we’re using the count modifier here. This will count the number of entries received and return the value.

After adding the shortcode to your page or post, test it out by reloading the page on the front end.

As you can see, the [gv_math] shortcode is replaced by the number of signatures that our petition has received so far!

Create a Petition Using Gravity Forms and Display Signatures Using GravityView

Creating an online petition is a great way to bring large groups of people together in support of a common cause. Unlike traditional pen and paper petitions, online petitions are easy to access and can generate signatures from all over the world.

In this post, we showed you how to create an online petition form using Gravity Forms and display signatures on the front end using GravityView. We also covered how to use the Math by GravityView add-on to display the total number of signatures anywhere on your website!

So now it’s over to you. Have you found a cause that you’re passionate about? Are you ready to take action and start effecting real change? Start building your online petition today 🙌