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.

  • 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 '16 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 '16 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 '16 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 '16 at 15:42
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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