Cara Mengilangkan iframe style google form
STEP 1.
Sign up for a Google Docs account if you haven’t already done so.
STEP 2.
Log into your new Google Docs account.
STEP 3.
Click New and choose Form from the drop down menu.
STEP 4.
Create your form using Google’s straight forward tools.
STEP 5.
When you have finished compiling your form, click the link at the bottom of the page titled: ‘You can view the published form here’
Here’s an example of what it should look like:
STEP 6.
Right click anywhere on the page and click View Source to look at the code behind the form.
STEP 7.
Copy all the code between <form> and </form> tags and paste it into the new form page on your web site.
STEP 8.
Now you’re ready to style your form!
Insert your own stylesheet between the <head> tags. I’ve prepared a version which takes Morning Copy website as it’s starting point.
STEP 9.
Now you have a beautifully styled form but it still sends users to an ugly Google confirmation page.
Add a bit of javascript* to redirect the completed page to a confirmation page** of your choosing:
REPLACE:
<form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="POST">
WITH:<script type="text/javascript">var submitted=false;</script> <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='http://YOUR-THANK-YOU-PAGE-URL';}"></iframe> <form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="post" target="hidden_iframe" onsubmit="submitted=true;">
* I found this last bit of code a few months back. I can’t for the life of me find the site so I can attribute it. If this is your code pleasecontact me so I can give you the credit!
** The re-direct script will not work if you have required fields in your form.
TUTORIAL UPDATES
We’ve published 3 updates to this tutorial.
- Learn how to add form validation and email verification to your styled Google Forms with our Google Forms and jQuery Validation tutorial.
- Has your Google Form stopped working because of updates to the Google Forms source code? Check out our Google Forms Update post and find out how to fix this issue in seconds.
- Third and final update. Our How to style Google Forms Redux post updates the original tutorials and adds a multi page Google Form.
STILL STUCK?
If you’re having trouble getting your styled Google Form to work we recommend you try out an easy web form maker like Form Experts.
Comments