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.
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.
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.
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
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.
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.
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.
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.
