It’s been over a year since we posted our original How to style Google Forms post – how time flies!
Our solution for embedding and styling Google’s Form app has garnered interest from all over the world and we are continually bowled over by how many questions, queries and messages of gratitude we get about this post on a weekly basis!
In this Redux edition of the How to style Google Forms post we:
Our original post laid out step by step instructions for embedding a Google Form in your website, re-styling the form’s elements and redirecting the user to a confirmation page of your choosing.
Check out the original post and our new, improved version below!
Our original form had one major flaw. It didn’t support Google’s in-built form validation. We solved that problem by throwing jQuery form validation into the mix.
Last year Google added a page break option to their forms and ever since we’ve been asked by visitors when we will update our solution to incorporate this new functionality. Well, the time has finally come!
Unfortunately for numerous head-scratchingly boring technical reasons our solution won’t work with Google’s page breaks, BUT we have come up with a way to build multi-page forms by taking a single page form and putting it into a jQuery wizard.
Go to our How to style Google Forms post for full instructions on how to setup, embed and style your Google Form.
Go to our Google Forms and jQuery Validation post and find out to add required classes to your required fields.
Add these jQuery scripts between your <head> tags. You’ll find all the scripts in our downloadable Demo Pack.
In our demo we have made each question a separate step but you can have as many or as little questions per page as you like. Each page needs to be wrapped in a span with a unique id. In the example below the span is in bold.
<span class="step" id="first"> <span>Step 1 of 4</span><br> <div class="errorbox-good"><div class="ss-form-entry"> <label for="entry_1" minlength class="ss-q-title">How blue is the Sky?</label> <input type="text" name="entry.1.single" value="" class="required" title="This field is required." id="entry_1"> </div></div> </span>
The last step is an easy one.
Simply replace the original Submit button…
<input type="submit" name="submit" value="Submit">
With the new jQuery Wizard navigation.
<div id="navigation"> <input class="navigation_button" value="Back" type="reset"> <input class="navigation_button" value="Next" type="submit"> </div>
That’s it, we hope you enjoyed this tutorial!
As always if you have any questions or want to say Hi, please leave a comment or email via our Contact Form.
PO BOX 80
Alstonville NSW 2477