Create and Customize Forms in iWeb

By Dan Hinckley

50 responses. »

Although Apple recently introduced a number of enhancements to their iWeb application included in iLife 09, it did not include form creation capabilities that allows users to supply data or communicate with website owners.

To help us with this problem we can use tools provided by other parties to include forms and store the data that is entered into our iWeb sites. In one of our previous articles we explained how to add forms to iWeb pages using Google Docs and Sprout. Unfortunately, Sprout has moved from a Free service and now requires users to pay for their services. But we can still get the results by tweaking Google Forms on their own.

Create a Form in Google Docs

As described in our previous article, we’ll first need to create the form in Google Docs. After we’ve created the form, we’ll want to publish it so that we can get the import details and include them in our iWeb site.

After the Form is published, visit the live form.

New test.png

Once the live form loads we’ll need to get the main html code behind its structure so that we can include it on our iWeb Site. Right click (control+click) the white area and select View Source.

Preview.png

In the Window that opens we’ll need to copy the portion of the html code that starts with form tag and ends with the closed form tag.

Source of http___spreadsheets.google.com_viewform?key=p-T6JWBWlKSc6hWY9KhBhGg&hl=en.png

Now that we’ve copied the html code that we want to work with, open iWeb to include it on your site.

Add to iWeb and Customize

iWeb.png To add the form to your iWeb site, select the page you’d like to include the form on and then select HTML snippet. Position the snippet on the page and paste into the area the code from the Google Form. Click Apply to save the code to the snippet and you’ll see the form now included on your iWeb Page.

Now that we’ve included the form code our your site you may want to customize it more so that it fits with the theme you’ve selected. To do this you’ll need to take advantage of CSS. CSS is the coding language that websites use to apply color and design to their html code. To learn more about it and how to use it to customize your forms please visit w3schools for free guides and tutorials.

As an example of some of the things you can do with CSS to customize your form, the details below show how to add CSS code to your HTML snippet that will change the look of your form.

First you’ll need to include the Internal Style Sheet CSS code to the html snippet. Add opening and closing style tags before the form html code.

iWebScreenSnapz001.png.png

For this example we’ll change the field label text to red. The form we created has marked the Name and Comment fields on our form as labels of the class ss-q-title. To modify the look of this class we need to call it in-between the style tags and identify how we want it to look.

Enter .ss-q-title {color:red} between the open and close style tags.

iWebScreenSnapz002.png.png

Press Apply and the field labels color will change to red on your form. This is just a quick example of modifications you can make with CSS to the Google Form you’ve embedded on your iWeb site.

iWeb-1.png

Once you’re comfortable with how your form looks save and publish the page to your site. Your users will be able to enter details into the form and save it to your Google Docs spreadsheet where you can access the data for your own review.

Conclusion

With HTML Snippets iWeb allows you to do a lot more with your website. It does take knowing a bit of html and css code but there are plenty of free resources to help you with the basics. Please share with us here at Maciverse the interesting ways you’ve been able to modify forms for your iWeb site.

About Dan Hinckley
Dan Hinckley is an experienced Mac user who converted to Apple products when they introduced them on Intel Processors. He loves helping others get more out of their devices! Subscribe to Maciverse.com to get the latest from Dan and the Maciverse Team!! Find out more about Dan:

50 Responses so far.

  1. Add Forms to iWeb Pages

    February 21, 2009 at 7:39 am

    [...] Create and Customize Forms in iWeb [...]

  2. Shari

    February 24, 2009 at 6:07 am

    I went through the process described above; however, I am wanting the form to (after the information is sent) redirect to my own created confirmation page. Specifically, people will come the the form page, fill in their information, and then be sent to a confirmation page where they can download the information they want. Is this possible using the Google docs method? If so, how do you make those changes so that the default Google confirmation does not pop-up? Thank you for your help!

    • emasso

      December 20, 2010 at 2:24 pm

      Same thing…!

  3. Dan

    February 24, 2009 at 6:53 am

    Shari – The only way I know to bypass their own custom confirmation page is through using a javascript onclick redirect that is timed to allow for the form contents to get sent to google but then redirect to the page you specify. Its not a direct science but if you play with it you can get it to work.

    Try this site out for more details: http://www.morningcopy.com.au/news/how-to-style-g

    • james

      February 17, 2011 at 9:50 am

      that was a BEAR ! but finally figured it out !
      the thank you page – lands into the same area of the html form… e viva

      one question –
      if i press submit – by mistake – or with out filling out anything – it triggers
      and goes to thankyou page – not directing anything to my spread sheet?
      is there a way this can be controled?

      thanks for the big help already

      • Dan

        February 20, 2011 at 9:32 am

        You can use javascript to set fields as required. Jquery does this pretty easily if you're comfortable with a bit of coding.

  4. Anne Maltes

    March 5, 2009 at 9:50 am

    Thanks for the info! I had a question, is there an html code to add or fix so that when they hit submit it goes to particular e-mail address?

  5. Dan

    March 5, 2009 at 11:19 am

    sending the contents as an email by just pushing submit requires a server that has the ability to send emails. If you're using mobileme this isn't currently an option. If you host it on another site you can probably use a javascript or php function to help you send forms as emails… http://www.javascript-coder.com/html-form/html-fo

  6. Pete

    March 13, 2009 at 7:12 pm

    Thanks for the tips. I have my form laid out and uploaded to my domain using iWeb09. The problem is that the form stops immediately after the last and abandons the submit/resubmit buttons.

    Have you seen this before?

    Thanks,

    Pete

  7. Dan

    March 13, 2009 at 11:27 pm

    Pete – Are you sure the "html snippet" window is large enough to display the entire frame. If the snippet is too small it will only display part of the form.

  8. Pete

    March 14, 2009 at 2:59 am

    Hi Dan,

    That's exactly what it was. If you click the Apply button after writing the code, the bounding box tightens right up against the bottom of the form. I had to select the form afterwards and manually drag the bottom edge down – and NOT hit apply again. Small bug…

    Things are working perfectly now, thanks!

    Pete

  9. Tracey

    March 16, 2009 at 6:20 am

    Has anyone tried to use Jotform.com to create the form and then add to the HTML widget?

    • Collin

      July 3, 2011 at 8:59 pm

      I just tried it and it's WAYYY easier than using GDocs…

      • The X Press

        October 11, 2011 at 10:08 am

        we love jot form

  10. Add Games to your iWeb Site

    March 21, 2009 at 5:21 am

    [...] Create and Customize Forms in iWeb [...]

  11. Dillon

    March 30, 2009 at 10:57 am

    Great tutorial. Thanks for the link!

    If anyone wants to add form validation and email verification to their Google or iWeb forms please check out my new tutorial: http://www.morningcopy.com.au/news/google-forms-a

  12. Michael E

    May 10, 2009 at 10:29 pm

    I am looking to add an 'availability' or 'Bookings' calendar to my site where a visitor can hover over a button for a booking period and see whether that particular booking has been confirmed. So the default is that one colour button denotes 'available' a second colour denotes 'booked and not confirmed' or 'booked and confirmed'. It could be simplified so that there are three colours. One for 'available', one for 'booked and confirmed' and a third for 'booked but not yet confirmed'. Obviously I would need to have to keep the calendar up-to date on a regular basis, as part of my business housekeeping. I am using 'Numbers'. 'Pages' and 'Iweb' to generate my site as I want it.

    Does anyone know how to do this, or where I can find something I can perhaps make in Numbers and/or Pages, and drop into Iweb?

    Many thanks for your help.

    Michael

  13. Tiffany

    July 4, 2009 at 5:01 am

    Thank you!

  14. Dan

    July 24, 2009 at 8:29 am

    Michael – Have you looked at embedding a version of Google Docs that is linked or synced with your iCAL?

  15. iWeb Templates

    August 1, 2009 at 6:42 pm

    [...] ways to add functionality and features to iWeb. Although adding features and capabilities (forms on iWeb) can be very beneficial to you as you develop your iWeb based site, sometimes you may just be [...]

  16. Jeff

    August 25, 2009 at 9:24 am

    Does anyone know how to enable an iweb site to be searchable in a search engine such as google? I'm under the impression that search engines search based on meta words, etc. Please advise!! Thanks!

    • Dan

      August 25, 2009 at 11:48 am

      Jeff, there are a number of things you can do such as creating and submitting a sitemap with google, gaining backlinks from other sites, etc. I suggest you contact a Search Engine Optimization company for assistance.

  17. Ryan

    August 31, 2009 at 1:38 pm

    Try SneakySheep… found it on google funnily enough.. it redirects ur google docs forms to any page or site u want :)

  18. Christa

    October 28, 2009 at 11:51 pm

    I've embedded my google form on my webpage, the form works when I click on submit with the confirmation notification coming up, but the only place to go from the confirmation page is to google forms. What do I need to do to have people completing the form get back to my website?

  19. Roxanne

    November 15, 2009 at 8:13 am

    Great Tutorial!

    the only thing is i would like to use a complicated form that has decisions. i can create this with google docs all fine and the first page works and fits the theme of my webpage, but as soon as you move onto the next page in the form it reverts to the google template. any suggestions on how to ensure the whole form fits the iweb theme?

  20. Jerome

    December 13, 2009 at 11:02 pm

    Hi,

    I created a google form with multiple pages which I later add to iWeb pages.

    The problem is that when you submit the form the information in the previous pages gets lost.

    Is there a way to link the pages together so that the information they contain doesn't get lost?

    Thanks for you help.

  21. Dan

    December 13, 2009 at 11:42 pm

    Can you provide a Link so that I can see the problem or what's going on?

  22. Jerome

    December 15, 2009 at 7:58 pm

    @Dan

    Unfortunately I can't since the content of the website is confidential.

    To sum up I integrated every google form page into different iWeb pages but I have trouble linking them together so that all the information they contain appear in the spreadsheet. Basically i customised every google page, so i cant use the embedding link provided by Google, otherwise I would have all the google pages on one page in my website. Is there a way to link them together through some sort of coding?

    Thank you.

  23. David

    January 20, 2010 at 1:03 pm

    Hey Dan,

    Thanks SO MUCH for this great tutorial! Was wondering if you could quickly share the CSS code that allows us to reformat our from so that the field label (e.g. 'Name' 'Comment') appear to the LEFT of the field, as in your example above, instead of above the field. I took a quick look at w3schools but didn't even know where to begin looking (what topic would this be under?). Thanks again!

  24. XXX

    January 20, 2010 at 3:54 pm

    i can’t find how to change the font color…… i do everything but i don’t know if you are supposed to enter the HTML code that you provide before the HTML code from the form…… or is it between? because i can’t find it. maybe because google changed it.

  25. Dan

    January 20, 2010 at 3:58 pm

    You’ll need to find the class for label and change its color. For the example the label class was – ss-q-title. It maybe different, but it will be the class in the label tag. For example, it would look like The class is “title” and to set its font you’d enter in the style area the following: .title {color:red;}

  26. Kevin

    January 29, 2010 at 9:54 pm

    Hi, Good tips above but how can I make mandatory for people to enter their email address to my email form on the home page before it will allow them to proceed. In other words they will have to enter their email address to see the rest of the website, how can I do that?

  27. Dan

    January 31, 2010 at 11:12 am

    Kevin – that type of functionality is a bit out of iWeb's league. You'll need to get a more advanced cms like wordpress to achieve that type of functionality.

  28. Jacqueline Biggs

    March 23, 2010 at 5:23 pm

    Hi, I realise this thread is months old but I am desperate for some help. I am using Iweb 09 and want to install Javascript tags so that I can run a website optimiser test on Google.

    https://www.google.com/analytics/siteopt/ab_check

    They need to be placed before the tag on my page's source code and before the tag. Can anyone help?

    Also – for those wanting to build forms, a free service is offered at wufoo.com.

  29. Dan

    March 23, 2010 at 10:26 pm

    Jacqueline Biggs – That link is to your own personal google account, we can't see it to help.

    Also, wordpress strips out tags in comments so just tell us the name. You probably won't easily be able to do this without editing the source code of the published pages before you push them to your hosting environment.

    Do you know your way around HTML?

  30. Parlan

    May 20, 2010 at 3:55 pm

    I've successfully added a form to my website, to get visitors' e-mail addresses. It works in that the info goes to my googledocs spreadsheet. The problem is: after people fill it out, they're taken away from my site to a googledocs site that says, "Thanks. Your response will now appear in my spreadsheet." How do I get it to stay on my site with my own message?

    Thanks

  31. Ed

    June 21, 2010 at 9:29 pm

    Yes, Tracey. I use JotForm on iWeb. It works perfectly fine.

  32. David P.

    September 28, 2010 at 1:40 am

    Hey Guys,

    I just wanted to take the time to tell you how much I appreciate all the help you are giving to us newbies & wannabies.

    You have helped a lot, with great workarounds, and clear cut answers.

    I have made 5 websites (for self & friends) since doing my first one about 4 weeks ago. I've even been paid for one of them.

    Iwas also chasing the ability for visitors to enter details on forms then submit to me via email, but noticed below you have said not possible with MobileMe.

    Also, what is the code for changing the font please, when editing the html in a widget ie

    "

    .ss-q-help {font:arial}

    Thanks heaps guys.

  33. paul

    December 12, 2010 at 6:55 am

    why is nobody answering this?

    "I've successfully added a form to my website, to get visitors' e-mail addresses. It works in that the info goes to my googledocs spreadsheet. The problem is: after people fill it out, they're taken away from my site to a googledocs site that says, "Thanks. Your response will now appear in my spreadsheet." How do I get it to stay on my site with my own message?

    Thanks "

    As I too want to know how to remain or get back to website

  34. Paulette101

    December 16, 2010 at 4:50 pm

    Help, I got the Contact Us form from Google Docs, to appear on my web page. However, Now after someone clicks the submit button, at the top of the page is a link to "Go back to Form" and "Create your own Form" from Google. How do I get rid of this?

  35. Abhis

    January 1, 2011 at 7:40 am

    Hey,
    I am facing the same problem how can i get all those data directly into my email.. plz help..

  36. Adam Littlechild

    January 10, 2011 at 10:01 am

    Hi Dan (or maybe Dan is not around anymore?)…

    Firstly, Maciverse is a brilliant concept and very helpful, thank you.

    I'm wondering if there is a way to link a "List" field in the Google form to a collection of data. For example, my list "Question Title" is country and I want all the countries in the world to automatically populate, is this possible?

    Look forward to your response.

    • Dan

      January 10, 2011 at 10:12 am

      Google Forms don't support lists. You could try and create a custom form that has a list element and then use javascript to populate the selected value into the form field that is passed on to Google Docs. A bit more complicated but something doable with Javascript.

  37. Kevin

    February 25, 2011 at 11:19 am

    wow – this site is awesome. I would like to post a form with check boxes and have the results mailed to me. Google Docs is good at creating the form and collating the data. However, a lot of my users are corporate and BLOCKED from Google Docs, so when they hit submit, they're prevented from doing so. Any work-arounds?

  38. Jason

    March 15, 2011 at 2:00 pm

    JOTFORM is so easy and will do everything that everyone wants to do, so go use it….I'm not affiliated by the way.

  39. James

    January 8, 2012 at 6:23 am

    I am searching for Installing Mac OSx on My INTEL PC can I do it??

    Orya Jan Maqbool

  40. Jeanine

    April 1, 2012 at 4:53 pm

    Hi there. I want to know if there is any way to embed a google doc form on your website without actually showing the form? Instead i want to have just the link that sends the customer to the google doc on the web. This way i don't have to fool around with the formating of the form to match my website? Is there any way to do this? I currently have it on my page but it shows up as the whole copied code…

    Thanks.

  41. http://tinyurl.com/houstree34562

    January 9, 2013 at 6:59 pm

    This specific blog post, “Create and Customize Forms in iWeb | Maciverse” was amazing.
    I’m generating out a reproduce to present to my buddys.
    Many thanks,Jacqueline

  42. Cheapest Cigarettes

    March 23, 2013 at 7:18 pm

    Ridiculous story there. What happened after? Take care!

Leave a Reply

Site powered by Go Fish Digital