How to Integrate Google Forms With WordPress
There are countless WordPress plugins available that enable you to insert all sorts of different user submission forms on your site, from generic contact forms, to detailed surveys, to premium forms with loads of customizable fields and extra features.
But before you make the decision to download and install the next trendy WordPress form plugin you come across, you may want to consider Google Forms first, especially since there’s a plugin available that can integrate it seamlessly with your WordPress website.
Introducing Google Forms
Google Forms is both incredibly versatile and totally free to use. Part of Google’s cloud storage service Google Drive, the feature is so tucked away that many Google users aren’t even aware of its existence.
If you don’t already have Google Drive, (for realz?!) you can get it set up in no time for free. But if you do, you can head to My Drive right now to check it out by clicking the big red New button in the left column. In the menu that appears, hover your mouse over the More option at the very bottom and you should see another menu with Google Forms listed there. Clicking it will open a new form edit page.
With Google Forms, you can:
- Create surveys, applications, registrations, questionnaires, polls, quizzes, and more
- Format your custom fields as text, paragraphs, multiple choice options, checkboxes, or choices from a list
- Collect email addresses for newsletter subscribers
- Drag and drop questions to easily rearrange them
- Add images and YouTube videos
- Select a visual theme design
- Collaborate with other Google Drive users on your forms
- Use page branching and question skip logic for more advanced forms
- Use add-ons for an even more powerful form
- Preview your live form
- Customize your Confirmation Page
- Manage the responses you receive
- And much more!
Sharing the link to a form is easy, but what if you want to put a form on a page of your WordPress site?
One very quick solution is to use the embed feature, which can be found by clicking File from the top menu of the page where you’re editing your Google form. Click Embed… and then copy and paste the HTML code into the text editor of a page or post on your site. You can customize the height and width of the form to ensure it fits the page properly.
The biggest problem with simply embedding the code Google gives you for your form is that it retains the default style of the Google form and doesn’t blend in with your site’s design. It doesn’t take advantage of any of your CSS and shows the Google logo along with several additional links to more Google information.
Lucky for you, a plugin exists to solve this problem.
Introducing the Google Forms Plugin for WordPress
The Google Forms WordPress plugin enables you to embed and manage your forms through the WordPress admin area. It also offers more options for better WordPress integration and customization compared to simply embedding the HTML code directly into a page or post.
Here’s how to get started with it.
Using Google Forms with the Google Forms WordPress Plugin
Once you’ve installed and activated the plugin, a new Google Forms option will be shown in the WordPress sidebar. When you hover your mouse over it, you’ll see three options to click: Google Forms, Add New Google Form, and Form Submission Log:
The Google Forms tab lets you see all of your forms at a glance – similar to how you can see all of your posts or pages. Likewise, you can do Bulk Actions to filter, edit and trash forms.
If you don’t have any forms just yet, you won’t see anything listed under the Google Forms tab. Click Add New Google Form on this tab (or click on it from the Add New Google Form option in the menu) to create a new one by giving it a new WordPress Google Form Title and filling in the fields.
You can’t use the Google Forms WordPress plugin to create your forms, so if you haven’t made one yet, go do that now. For this example, we’ll just be using a very simple event registration form:
You need a form created already, because as you’ll notice in the Add New Google Form tab of the plugin, one of the first fields you have to fill out is the Form URL. This is extremely easy to do.
Back in Google Drive on your form builder, click the blue Send Form button in the top right corner or at the bottom of the page. A box will pop up with some sharing options, including the public link to copy and share.
Once you’ve copied that link, paste it into the Form URL field within the Google Forms plugin.
Next, you can add the optional Confirm URL as well. Since the default Confirmation Page is very basic and can’t be integrated with your WordPress site, it’s strongly encouraged that you fill out this field to streamline the entire form submission process.
For the Custom Confirmation Page Style attribute, you can specify how it will be presented by selecting either Redirect or AJAX. Keep in mind that if you leave it set to None, the Confirmation Page will be presented by a page redirect.
Those are the three most basic fields you need to have filled out for your form to work properly. Next, let’s take a look at how else you can customize your form on your WordPress site.
Filling Out the Additional Fields in the Google Forms WordPress Plugin
There are many more fields you can fill out below Form URL and Confirm URL, but it’s unlikely you’ll need to fill out or configure all of them – particularly if you’re just setting up a really simple form. But in the interests of being thorough, let’s explore what they all mean and do anyway.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
Class: If you intend to further customize the CSS of your form, you can use the class attribute to add one or multiple CSS classes to the div that wraps around the form. Separate each class by adding a space between them.
Email: You can choose to have an email sent to the administrator’s email or any other email address specified whenever a new form is successfully submitted and received. The email will include the URL to the form as well as the time and date it was submitted.
Send To: If you chose to turn the previous Email option on, this is the field where you can specify which email address receives the email notifications of new form submissions. Keep in mind that the message will always be sent to the administrator via bcc.
Form CSS: This field can be used to enter any custom CSS you want to add to further customize the look of your form on your WordPress site.
Form Caching: You can turn this on if you would like to store the cached data from the forms temporarily. You can specify the Form Caching Timeout in minutes to reload the forms.
Google Form Field Validation: This feature is left off by default, but turning it on will add jQuery-based form validation support through the jQuery Validate Plugin. You can use this to check all required fields without the form being submitted to Google.
Google Form Hidden Fields: If you have any hidden fields on your form that you’d like to configure, you can do so via this optional box, which is also left off by default. You’ll need the name of the field from the Google Form, and only value, url, and timestamp are the Types that can be used with the optional Value field.
Google Form Field Placeholder: For those that would like to include placeholders, the plugin gives you the option to name the field and give it a value.
Google Form Default Text Overrides: This is the last of the more advanced options available. It enables you to customize your own text if you don’t like what the Google form gives you by default.
Configuring Your Google Form WordPress Plugin Options
We’re not done just yet. Although they are all optional, you can configure several more settings so that your Google form looks and functions just right by looking to the Google Form Options located in the column the right of all the fields that were just covered above.
CAPTCHA: To add an extra boost of security that keeps spambots out, you can enable a CAPTCHA field that users have to fill out to prove that they’re human.
Columns: Google forms are displayed in just one column by default. With the feature, however, you can split up the form fields into as many as ten columns. You can also specify the column order by choosing Left-to-Right or Right-to-Left.
Email End User: Turn this on if you want an email sent to the end user once the form is submitted.
Legal: Google Forms have a “Powered by Google Docs” label at the bottom, which you can hide by turning this option off.
Read Only: If you would like the form to only be read from, but not written to, you have the option to make the form read-only.
BR: By adding a line break, the label on the form and the text input field will be stacked on top of one another.
CSS Prefix: Adding a prefix to the beginning of each class name in a Google form can be used to style multiple forms differently.
CSS Suffix: If you didn’t include this in the CSS, a character string can be added to the end of each label.
Title: If you don’t want the title of your Google form displayed at all on your site, you can turn this off to hide it.
Map H1 to H2: If you would like to keep the title, but not as an H1 element (which is what it is wrapped in by default), you can use this option to map it to an H2 element.
Unite Theme Hack: Unless you’re using the Unite theme from Paralleus, you don’t need to turn this on. The theme needs this hack for the form to be submitted properly.
Publishing Your Google Form on Your WordPress Site
Now that you have a brand new Google form set up in WordPress (with the Form URL defined at the very least), you can save it as a draft, preview it, or go ahead and publish it. The permalink will be something like http://example.com/wpgforms/title/, but you can edit the title if needed before you go ahead and hit publish.
Once published, you can send users to the form’s page to fill out the form, or you can embed it on a different page or post of your site by using its short code. To find the short code for your form, navigate to Google Forms and you should see it beside the form name.
Copy the shortcode to paste it into any page or post that you want. Then you can view your page to see how your form looks and blends in with your site. Here’s what it looks like with the Twenty Fifteen theme:
Using the Form Submission Log
A log of all the submissions is available to you by navigating to the Form Submission Log. You’ll see the timestamp and URL of each submission, and you can bulk delete them when you don’t need them anymore.
Alternatively, you can head back over to your form in Google Drive and view the responses there. In the top menu, there’s a Responses option that lets you see a summary of your responses, plus another View responses option button just below that lets you see them all in spreadsheet format.
From personal experience, I can say that Google Forms is pretty damned sweet. Perhaps it’s not the most fully-featured software out there, but it comes at a price you can’t argue with!
With that in mind, if you want total control over the look of your Google forms on your WordPress site, then the Google Forms plugin is a must-have. When properly embedded and customized for your site, users will never even know that you’re using a free Google service.
Do you use Google Forms on your site? What do you use it for? Share your own tips in the comments below.