Custom multi-step Google forms

Question

I've done a couple of custom Google forms, where you plunk the <form>...</form> into your own file. They submit just fine.

I cant figure out how to apply this to a multi-step or multi-page form. The only solution I can think of is to build it as a giant single form, and .show() and .hide() the necessary bits to make it appear as a multi-step. This is obviously far from ideal.

Does anyone have a real solution to this?

Here's the expanded explanation of the <form>...</form> that I mentioned before:

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='thanks.html';}"></iframe>
<form action="YOUR-GOOGLE-FORM-ACTION-URL" method="post" target="hidden_iframe" onsubmit="submitted=true;" class="custom eight columns" id="ss-form">
    <label>
    <input>...
    <input type="submit" ....>
</form>

Answer 1

Why not use a Google Form for this? http://support.google.com/drive/bin/answer.py?hl=en&answer=87809

Google Forms lets you create, share and embed forms on other pages, and the responses feed into a Google Spreadsheet that you can access via Google Drive.

This will also allow you to create custom Form paths that will take users to different places based on form feedback:

Split questions into multiple pages

If you've created a long form, for example, and would like to make it easier for your respondents to fill it out, you can add page breaks. From the Add item drop-down menu, select Page break.

Once you create the page break you will need to make a form question/answer take an action to "jump" to that particular page break.

This page will be helpful in providing targets for your page breaks: http://support.google.com/drive/bin/answer.py?hl=en&answer=141062&topic=1360904&ctx=topic

Page navigation and how to embed a form

If you've added page breaks to a form, you can add different sets of questions based on a previous answer within the form, and allow people to skip irrelevant sections.

Multiple choice questions with the 'Go to page based on answer' option enabled direct form respondents to particular pages based on their answer, whereas page navigation automatically routes form respondents to a specific page based on your selection. For example, you can create a form asking your respondents to select their language and then direct them to questions written in their language. Then, they can all be automatically routed back to the same page using page navigation in page breaks.

Answer 2

I have also been looking around to solve this issue.

The most comprehensive tutorial I found here: http://morning.am/tutorials/how-to-style-google-forms-redux/ from Dillon. Yet it contains heavy manual customization every time you change your form. Something more convenient would be a javascript that does exactly that for you, I think there is someone selling just a script like that somewhere on the web.

Another promising possibility would have been by Google itself via their google app script platform: http://www.jellybend.com/2013/01/15/create-custom-forms-with-gui-builder-and-google-apps-script/ With this option one is at least sure to comply with google's allowed usage guidelines. Yet it has been DEPRECATED. Bummer.