7

Google forms are presented for the user to embed in his/her website as an iframe, which means they can't be styled by the website's own CSS.

How can a Google Form be inserted into a website with a custom style using "new" Google Forms?

A similar question exists for which there is an answer for the old style Google Forms, which involves copying the source HTML form generated, however this does not work for new (post 2015) forms.

If there's no way to do this, please suggest some alternative, such as using Google Apps Script to host a page that can be styled, then embedded to a website - or some other solution.

Improve this question
4
  • At the bottom of the referred link the answer to the referred question from Stack Overflow it's said that there are three updates. Did you read those updates ?
    – Rubén ♦
    Apr 20, 2016 at 22:04
  • I checked those three links. Second & third are relevant, only the third link works. I followed closely the steps in the "redux" article, but many of the steps refer to HTML tags that don't exist in the Forms source. When I finally finished and tested, the form submit and landing page worked, but nothing was inserted into the Google Sheet.
    – hazymat
    Apr 21, 2016 at 8:16
  • Also to add, that site has a suspicious lack of dates on the article or the comments below. Lastly the "updated" demo they post appears to be based on old (pre-Freebird) forms, not the new style forms.
    – hazymat
    Apr 21, 2016 at 9:28
  • I also found weird that the comments doesn't have dates but the main ideas and broad steps still apply, I think: Google Forms requires external resources to work like javascript files and libraries.
    – Rubén ♦
    Apr 21, 2016 at 15:42

1 Answer 1

Reset to default
3

At this time Google Forms doesn't include an easy way to customize the form style1. While it's possible to figured out how this could be done with "the new Google Forms", the "form owner" should analyze the form source code to find out which resources are required for the form features to work , like the buttons, validation, multipage navigation, confirmation page, etc., but since this isn't documented by Google "the solution" could stop working at anytime without Google notice.

An alternative is to use Google Apps Script and the HTML Service to create a web form from scratch that matchs the look and feel of the site where it will embedded.

Notes:

1: This also applies to:

  1. Add client-side script
  2. Add JavaScript based response validation prior submission
  3. Custom form navigation, like combining two responses values to choose the next section.
Improve this answer
3
  • An alternative is to use Google Apps Script and the HTML Service to create a web form from scratch that matchs the look and feel of the site where it will embedded. How do you do this? I don't feel like that page gives me enough information. I realize I could create an HTML page, but what do I make the submit button do? What should its action attribute URL be? Are there any examples of doing this?
    – Clueless Investor
    Sep 5, 2020 at 2:41
  • @CluelessInvestor Please post a new question.
    – Rubén ♦
    Sep 5, 2020 at 2:43
  • Done. webapps.stackexchange.com/questions/146074/…
    – Clueless Investor
    Sep 5, 2020 at 2:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.