Multi step forms

John Mercer

unread,

Jul 7, 2021, 8:49:00 PM7/7/21

to Google Apps Script Community

One of the great things about Google Forms is the ability to break a series of questions into separate 'pages' or sections/steps. I am trying to do something similar with Google Apps Script. Can someone point me to an online tutorial or source of information on how to do this, please?

So far I have understood that I have to prevent the first form from actually submitting, and instead I have to build a script runner to process the form Object and then use .withSuccesshandler() to pull in the next step of the form, or possibly redirect to it but I am not meeting with much success, not least because I am actually trying to load the form(s) onto a Squarespace page through an iframe, so the document head and associated scripts and styles have already loaded, and as I understand, the iframe is handled separately

Any pointers?

Alan Wells

unread,

Jul 7, 2021, 8:57:50 PM7/7/21

to Google Apps Script Community

I think you'd need to use a Web App instead of a Google Form. You can't prevent a Google Form from submitting after the user has clicked the Submit button. Or are you actually already using a Web App? I'm not familiar with what Squarespace is capable of. Can you manipulate the DOM however you want?

John Mercer

unread,

Jul 8, 2021, 9:19:41 AM7/8/21

to google-apps-sc...@googlegroups.com

Thank you for your reply.

I am not actually using a Google Form. I referred to that to highlight the feature of a multi-step forms which I would like to replicate using html form templates in GAS.

Squarespace is a website builder which enables one to import external html, css and js via an iframe. As it happens, one can import a Google form in this way as well as a html form template in GAS.

I am writing the form in a GAS html file, creating a template in Code.gs, using Html service to create from file and then deploying as a web app and copying the resulting link into an iframe.

As it is part of (Squarespace) page, I am using an extra bit of code appended to the Html Service call and the first form displays OK.

the html file includes a js script that adds an event listener that prevents the form''s default behaviour when it is submitted, ie the form''s data is NOT posted to the Web app url. Instead a script runner calls a server function which takes the form object and sends the data to a Google sheet. This works ok too.

Where I am having difficulty, is getting the .withSuccessHandler () in the script runner to replace the first form in the iframe with the next one.

I cannot be the first person to attempt this - even if we leave the specific context of Squarespace out of the equation.

I am looking for a tutorial on how to build a multi-step form in GAS that is deployed as a Web app and displayed on a page as an iframe.

A slight refinement is that in a multi-step Google Form, the user''s data is held and only posted for processing once the whole form is submitted. I want to use GAS instead so that each form actually submits the responses so that I can interact with/process them and then, depending upon what the values are, display form2 or skip to form3 etc.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Apps Script Community" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-apps-script-community/XuP7aHp--gc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/8b856128-dfa0-4869-b867-b14b6f2fc913n%40googlegroups.com.

Alan Wells

unread,

Jul 8, 2021, 10:08:49 AM7/8/21

to Google Apps Script Community

You html has a body tag, and then in your body tag if you have a tag that is holding all the html, you can give that tag an id name, and then replace all the content in that tag.

<body>

</div>

google.script.run

.withSuccessHandler(updateEntireContent )

.myFunctionCall();

window.updateEntireContent = function(newHTML) {

document.getElementById("entireContent").innerHTML = newHTML;

}

</script>

</body>

See:

https://www.w3schools.com/jsref/prop_html_innerhtml.asp

Reply all

Reply to author

Forward