Google Forms Custom Confirmation Page

One of the more frequent questions I receive is how to setup a custom confirmation page for my Google Forms WordPress plugin.  By default, Google will display content allowing the user to follow a link to the original form within Google Docs and some other content that is most cases, is not desired within the WordPress context.

This article will walk the through the process of adding a custom confirmation page using one of my Sample Forms as a demonstration vehicle.

Step 1

Define the Google Form – in this case all I have done is given my form a name and entered the public Google Drive URL for my form.

GForm_SS_82Step 2

Visit the form (use the View Google Form button next to the permalink on the image above).

GForm_SS_81

 

Step 3

Fill out the form and submit it.  The default Google Confirmation content will be presented upon form submission (the content may be slightly different if you have added anything when building the form within Google Drive).

GForm_SS_74

In most cases, the links and text in the default confirmation isn’t desired.  Fortunately it is pretty easy to hide it with CSS.

Step 4

Using your favorite HTML inspection tool (I am partial to Firebug) examine the elements which comprise the confirmation content.

GForm_SS_75

You may have to play around with it a bit but what you are looking for is a block element which encapsulates the confirmation content.  In this case, the DIV element with the class ss-resp-card contains all of the content I don’t want visible.

Step 5

Most HTML inspectors allow you to dynamically change the HTML and/or CSS – Firebug certainly does.  Adding new CSS using Firebug to test with is pretty simple and is exactly how I figure out CSS problems for people who submit Help and Support requests.

In the image below I have added a CSS display property for the ss-resp-card class and set it to none which renders the content invisible.

GForm_SS_77

GForm_SS_76

Step 6

Now that I have figured out what my CSS needs to be, I add it to the form definition within WordPress. Make sure Custom CSS is enabled within the plugin settings – Dashboard > Settings > Google Forms) or you CSS will not be output when the page is rendered.

GForm_SS_78Now when you submit your form the default Google response content will be hidden.  This is better however most people want some sort of confirmation or other affirmation that their form was submitted.

Step 7

Define the custom confirmation page.  This can be any valid URL however in most cases it is the permalink to a page within the WordPress site thanking the user or providing other additional information.

GForm_SS_80Step 8

Set up the Google Form to redirect to the confirmation page.  Enter the URL and choose the style (AJAX or Redirect).  I recommend using Redirect initially because AJAX doesn’t always work, usually due to some sort of Javascript problem with a WordPress theme.  Without setting the Style to either Redirect or AJAX, the confirmation page will not be viewed.

GForm_SS_79Step 9

Test the whole process.  If you are not seeing the redirection after a couple of seconds (you will continue to see the empty page which was hidden with CSS in Step 5 briefly) check your console for Javascript errors.  Javascript errors, which are not uncommon, will prevent the redirection from executing.  If you are seeing Javascript errors they must be resolved before the redirection will work.

Conclusion

Hopefully this step by step sequence will eliminate some of the confusion around having Google Forms within WordPress.

 

 

 

 

One thought on “Google Forms Custom Confirmation Page

  1. Pingback: www.MichaelWalsh.org | Google Forms Custom Confirmation

Leave a Reply