iWeb Tip #5 – Forms in iWeb

Forms in iWeb

This has been a big one for many people who ask “How do I get a form in iWeb?”

iWeb doesn’t have this feature built into the app yet, but through the HTML Snippets we can achieve this and we can achieve this very easily.  You might want a form for a contact form, a sign up for our newsletter or email list, request an appointment form, get a quote form, email us form, etc.  Most all sites have a form on them now and so can you with iWeb, here’s how:

See Demo

Step 1:
Sign up for a free account with one of these free form builder sites: JotForm.com,  Wufoo.com, Google Docs, FormSpring.com, Icebrrg.com, or Formsite.com

Obviously there are many services that offer this functionality, so you can decide which one you like the best, but they all have the same basic idea to create the form then get the code and paste in an HTML Snippet.  I personally like JotForm the best, it’s (like others) totally free for most peoples needs and they have a paid account if you need a bit more monthly submission (like other sites). I’ll be using JotForm to demonstrate this tutorial, but remember the other sites I listed have a similar functionality so if you find you like the others better, have at it.  Here’s how to do it with JotForm:

First you need to sign up by clicking the “Sign Up” button

Step 2:
Start a new form by clicking the “My Forms” button at the top of the window and then you can hit the “New” button to start a new form.

Step 3:
Add form fields. You’ll see there are a plethora of types of form fields that you can use. Like a text filed, a drop down menu, radio buttons, check boxes, file upload button, and many more. They are all on the right hand side of the window and you just drag and drop them in whatever order you’d like. The then customize the text name and the appropriate properties (also on right side, toward the bottom). Once the form is complete. Click on the properties button toward the top toolbar, and be sure that you have the form setup to go to your email address. You can also change the font and background color here as well as other things (if you want the background transparent, simply type “transparent” in the color box instead of a color).

Step 4:
Simply click the “Source” button up top on that same toolbar.

It will give you 2 option for putting the form onto your site. We want option 1. Copy the code that is on the top and you will be pasting that into your iWeb HTML Snippet.

Step 5:
Paste the code into an iWeb HTML Snippet and you are set. Just resize your HTML Snippet accordingly, publish and your golden.

Hope that helps and you can start to become more familiar with JotForm.com and make spectacular forms.