So my mission right now is to see how far I can push my luck with hosting from Amazon's S3(Simple Storage Service).
For anyone from the ice age. Think of S3 like a HTTP wrapper around and FTP server. If you're wondering why anyone would want to use this over a normal server... then just google S3. Anyway back to business!
My ingredients for today *lick lips*
When you start to create a Form you will be presented with the following.. Pretty!!
<html>
<head>
<style>
body
{
background-image:url('/Wood_tile_wallpaper_by_neko_xexe.png');
}
</style>
</head>
<body>
<iframe frameborder="0" height="500" marginheight="0" marginwidth="0" src="https://docs.google.com/a/codemeasandwich.com/forms/d/1NktonTf4ss3xDagjb-656PV1SBbLanfSbeP2zfRj7ds/viewform?embedded=true" width="760">Loading...</iframe>
</body>
</html>
For anyone from the ice age. Think of S3 like a HTTP wrapper around and FTP server. If you're wondering why anyone would want to use this over a normal server... then just google S3. Anyway back to business!
My ingredients for today *lick lips*
- Host a static site (requirement of S3)
- Record input to google docs
- Consistent styling across the site
Now "google doc" supports a document type of Form that allows you to create a set of questions that people can fill out and have all the answers collected in a spreadsheet layout.
When you start to create a Form you will be presented with the following.. Pretty!!
For this to work you have to leave it on the default theme.
You will need to make the form public.
Add some Questions.. if you're into that sort of thing!
Add some Questions.. if you're into that sort of thing!
When Done you'll get the below form
but what you're really looking for is the embed URL
With the link copyed, back to your site.. *Zoom*
With the iframe tag in our page we get the following:
Not very nice :p
let's take a look at the code we have so far:
<head>
<style>
body
{
background-image:url('/Wood_tile_wallpaper_by_neko_xexe.png');
}
</style>
</head>
<body>
<iframe frameborder="0" height="500" marginheight="0" marginwidth="0" src="https://docs.google.com/a/codemeasandwich.com/forms/d/1NktonTf4ss3xDagjb-656PV1SBbLanfSbeP2zfRj7ds/viewform?embedded=true" width="760">Loading...</iframe>
</body>
</html>
To make this look more inline with our site we are going to need a bit more information about how google has put together this form.
Once the new page has loaded. Right click to view the source
In the source you need to find the form tag. Now copy the tag and all its content.
back on our site page, replace the iframe tag with the below
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"></iframe>
Now paste the form code under the iframe tag. You will need to change the target tag to "hidden_iframe"
That definitely looks a bit better and I didn't need any server side :D
P.s. I have some Ideas for a follow-up post on how to better style your form +using the new HTML5 input tags and some small javascript tips to really make your form rock.
So let me know if that's something you guys are interested in.
No comments:
Post a Comment