How to create custom theme for Google Form?

Question

I wanted an embed Google Form in my website so i grabbed embed code and pasted it in my page.

<iframe src="https://docs.google.com/forms/d/1u1NO8u4vu6Q9XuUNigo4qy22hjvRmL-HFIRVsgiaL9c/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>    

(that's what Google gave me)

Everything is working fine BUT it's an iframe so I can't edit it's appearance using CSS. Google Docs' deafult themes don't match my site so I want to this page's CSS. I tried downloading https://docs.google.com/forms/d/1u1NO8u4vu6Q9XuUNigo4qy22hjvRmL-HFIRVsgiaL9c/viewform as html but this way I didn't get the css file. Do I have to create it by myself or there's another solution to my problem?

Answer 1

You can simply copy the form section of the html and copy paste to your page. It will post to google, and you still have full control over it.

You can't style it while it's an iframe.

see here for more tips about this: http://morning.am/tutorials/how-to-style-google-forms/

Answer 2

You should use a <form> tag instead of embedding Google form. This is because the style from embedded form may not match your website scheme. Here is how you can do it.

1. Create a Google Form.
2. Get the link and open the form in a new tab.
3. Create a barebone form having same items as the Google form.
4. Inspect Google form for action attribute.
   4. a. Copy the same action to your form.
5. Inspect and find values for attributes name in the Google form.
   5. a. Give the same name values for your form items as well. The values look like entry.742532386.
6. Check if your form gets the responses.

Read more here