Google Forms Custom HTML Styling with two sections, is it possible?

I have created a Google Forms form with tons of questions by following this video. I painstakingly managed to bind all the questions to radio buttons, checkboxes and textareas with their respective “entry.xxxxxxx” values. I managed to run all that on a custom HTML page.

It all goes swimmingly, I manage to receive the correct answers after clicking my custom page’s submit button. However, this only works for the first section of the form. The problem is that the last question of my first section in the original Google Forms determines whether clicking the submit button will lead to the second section of the survey, which has additional questions, or send the answers as they are.

This is where I run into huge problems. No matter what I do, I only receive answers from the first section.

Even if I get myself a pre-filled link with all the answers from the two sections at once, and replace “viewform?usp=pp_url” with “formResponse?”, it still sends answers only from the first section. The only possible way to send answers from both sections is doing the form through Google Forms’ website, which is not the behavior I am looking for.

Here are some potential solutions and troubleshooting steps:

1. Check Form Structure and Logic:

  • Conditional Logic: Ensure that the conditional logic in your Google Forms form is set up correctly to display the second section based on the answer to the first section’s last question. If the logic is incorrect, the second section might not be visible or its data might not be captured.
  • Question Types: Verify that all questions in the second section are of compatible types (e.g., radio buttons, checkboxes, textareas) that can be bound to your custom HTML page.
  • Question IDs: Double-check that the question IDs used in your custom HTML page match the actual IDs of the questions in your Google Forms form.

2. Inspect Network Requests:

  • Use your browser’s developer tools to inspect the network requests made when submitting the form. Look for any errors or warnings that might indicate a problem with the data submission process.
  • Pay attention to the request body and headers to ensure that the correct data is being sent to the Google Forms API.

3. Verify API Endpoint and Parameters:

  • Make sure you’re using the correct API endpoint for submitting form responses (e.g., https://docs.google.com/forms/d/<form_id>/formResponse ).
  • Verify that the parameters in your request are accurate, including the question IDs, answer values, and any required authentication tokens.

4. Consider Alternative Approaches:

  • If you’re unable to resolve the issue using the above methods, explore alternative approaches:
    • Embed the Form: You could embed the entire Google Forms form directly into your custom HTML page using an iframe. This would allow you to capture data from both sections without needing to manually bind questions.
    • Custom Scripting: If you have advanced scripting skills, you might be able to create a custom script that interacts with the Google Forms API to capture data from both sections.

Additional Tips:

  • Test Thoroughly: Test your custom HTML page with different input combinations to ensure that it captures data correctly from both sections.
  • Seek Assistance: If you’re still having trouble, consider reaching out to the Google Forms community or seeking help from a developer.

By following these steps and carefully reviewing your form structure, network requests, and API interactions, you should be able to successfully capture data from both sections of your Google Forms form using your custom HTML page.