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.
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.
Visit the form (use the View Google Form button next to the permalink on the image above).
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).
In most cases, the links and text in the default confirmation isn’t desired. Fortunately it is pretty easy to hide it with CSS.
Using your favorite HTML inspection tool (I am partial to Firebug) examine the elements which comprise the confirmation content.
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.
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.
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.
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.
Hopefully this step by step sequence will eliminate some of the confusion around having Google Forms within WordPress.