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>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPTUJKOmeEpCL7dXGUp2a6yCJLcXU6z1L3MLT-hhemqGJvlPaLd4rhe74l-ll6uLKSaJ-EKFkxlsIDWpV2sR0OLL1q5G2QCwhC84Cr30rstAfw3QrA5qcIIX6BBYewZzmmX2w5AggUv-yV/s640/Untitled-15.jpg)
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!!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3wRrQtpuODcDcpGHEDC6-1e73FHVATJK4NVz13vGsHN5d-X9VxZtrQ3uffP-v57-loHGlXelArZtuzz4SZ9YccC5lT5aFueou8RlXXZz_-VW3XMUHjEqkBMb4gWCaqI7O8XIyJPf2LBGk/s400/Untitled-1.jpg)
For this to work you have to leave it on the default theme.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMwrFQ2HSJxH4qMc5UdjVvcmgfTOdAhsVso3s6wO2GpmQ5Wj5l2Z-Mf-BTmuyxHN7Brr17eMg2mdz4L47ZkZd3I4R_58ElkC8lzv4D2B6hJ_1H-eK9KXaqZYIgB-8sw_wD2Ran2wxP6DW_/s640/Untitled-2.jpg)
You will need to make the form public.
Add some Questions.. if you're into that sort of thing!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTMOHW2jhKEMxGN5WVpXV0_xXnIVEng86sfGP3UmcUSJV3ypgySvHFPDVSkgUUp5vLSljE2ch9TtBhN0hyphenhyphenuI9cPxttHfeBvFQtLgDDNNO4DlkrGH1MOgyzGtZpUY4L4dIy02Gm0iy2DKaU/s640/Untitled-6.jpg)
Add some Questions.. if you're into that sort of thing!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio6WF8gPDxvhAMhEBiEiFQ9NlRz94TWVl3rTZr4M5wgLwJTEtFfjzjBQY3NFTNcB-kuXvhoDiAGZ1AmPnRZM8Hu-nDg3b9h0TdVHKte8uVLCILVUD6I2Yty5XDUGpjnk8r_dAJRoyQ9Sjb/s640/Untitled-7.jpg)
When Done you'll get the below form
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji96_drN40CK-uBIwB5BZ8z6CGAckPqwyJUa6a7rFeAtVgYwUy9fbFcUOPx8C8o0XZ5h6hSvDbuH1hVNAKU0fTEkLe-3O6alPJXhE0-R2VTVqTg_484Mg5KKgebiF5jdc_qx6WwetUbIVe/s400/Untitled-4.jpg)
but what you're really looking for is the embed URL
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjz2mnsGgo6aBotsru-KGDFHGo1mqnTDyz5FjjC6robYO-Tjpz37mhIux_2SNw8IXKSgxMSyyMnGfWaVQ-NFqcxd13SovhR8zUDQksSVnXAw5NySNvjIjAD9vA8JrIFeObAAPhv-53Iulp/s400/Untitled-5.jpg)
With the link copyed, back to your site.. *Zoom*
With the iframe tag in our page we get the following:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3a-4x3zaERNWFrIbRWXbDbVWJhNVzV7bA-dRQXdCkU5bxaPVB5gUoSnBpE6Vf5PATpRnx2BUz4aUKboi-WJdssh-VHvVYmNkenekeBSwfBY0_1dZg6Xb4Hr1YLZFVJnzGZcP2nt6obzYr/s640/Untitled-19.jpg)
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.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihEzal0beOPu6c9P2bOhJHTRqSgFsoi00kcPLDDp1cVFtf0CuBHMWhGb_v5imbSJUTp3slPzSOLSEJYVp9dF8F4WR5gwJgviRMYfsUrOg5l0872wUuG1Ed2LwEFhU9dssDX96_Uo9IBFo3/s320/Untitled-10.jpg)
Once the new page has loaded. Right click to view the source
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM1qISQSEqkKfC1Ob-Ym1ZgbovFz6-fv48qVHPmO7mysiFj_d_xc6aZRW8rJhteiDg6EpiRSijH1zRcGE9ivIZxNuoW2zyu96gN_5fSJ9XBNKsyfC1W9mzSpVnrFnAn0RwoxCZkhy9BuyC/s640/Untitled-13.png)
In the source you need to find the form tag. Now copy the tag and all its content.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPTUJKOmeEpCL7dXGUp2a6yCJLcXU6z1L3MLT-hhemqGJvlPaLd4rhe74l-ll6uLKSaJ-EKFkxlsIDWpV2sR0OLL1q5G2QCwhC84Cr30rstAfw3QrA5qcIIX6BBYewZzmmX2w5AggUv-yV/s640/Untitled-15.jpg)
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"
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxYOBLSnzDIUEUMjXhMUbGHPTDnnSFdhTb5dQ7WHWs6S4L-HhYWOyGS31RsAIVPrBzgFUELY6vFezvaSdk-vUjH_imrjIs3VJz2HrO-AK98dI25GIXza-tJRbhhyphenhyphenOaZ5cjUOLfPBVJ_ITy/s640/Untitled-16.jpg)
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.