Jun 01

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.

24 Responses to “iWeb Tip #5 – Forms in iWeb”

  1. Lee says:

    Your instructions for JotForm say, ” We want option 1. Copy the code that is on the top and you will be pasting that into your iweb html snippet.”

    The problem is…
    When you create the DEFAULT form, you are given 3 options when you attempt to GET the source code. Which one do I select??
    Am I supposed to use the first one with the iFrame tags??

    Here are the 3 choices:

    Option 1: Embed Form into Your Site
    It’s recommended to paste this code in a table or width defined area in your site.
    ******************* OR *********
    Option 2 (Experimental): Javascript Embed
    Copy and paste this code into your web page or blog post.
    ************** OR **************
    Option 3: Copy Full Source Code of your Form
    It’s recommended to paste this code in a table or width defined area in your site.

  2. iWebUnlimited says:

    Lee use the option 1, which is using an iFrame method.

  3. Rick says:

    I’m doing a website for a trucking company. They want prospective employees to be able to fill out online applications. What are my options?

  4. Your demo and info are great. I created a form in jot form and it worked great in Safari and Firefox but does not appear correctly in Internet Explorer. Have you had this issue before? Is there something I can do? Thanks. Joan

    • iWebUnlimited says:

      Haven’t had that issue. JotForm recently did a major overhaul on their site (it looks and works much better). Try grabbing the code again from their new site and see if that fixes the issue your having. If your still having it they do have some other options besides the javascript version of the code, such as iFrames that you could use.

  5. Cristian says:

    Very nice

  6. jon says:

    I am trying to make an internal database search for my IWeb site that uses my data and brings back search results. is that possible with forms or do I need to use something else?

  7. Henry says:

    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

    What do you mean by having the form set up to go to your emal address. Which particular criteria should I be looking at?

  8. Chad says:

    Could I make a form in FrontPage and then save the page in html? Once i have that I could just add it to my sight right?

  9. can i copy this entry? i will link back to this post.. please let me know, thanks

  10. Todd says:

    Hi. When someone types in their email address and hits SUBMIT, is there a way to make a pop up window appear that says: “You’re Subscribe, tell 3 friends.” Beneath this line are three boxes where they can type in friend’s emails and hit SUBMIT again.

    I saw this on another website and would like to do the same.

  11. Zahid says:

    Thanks for this tip, I went with jotform for my site. My preference would have been to use the all free googledocs form, which would be most convenient too (automatically updating date in spreadsheet in googledocs) but sadly they do not have a great selection of templates, and it seems like the form size cannot really be customised for me to fit the area where my jotform is at the moment. You can see my use of jotform here at “www.zizimages.com/Contact+Info”

  12. formacomunicacion says:

    Thanks a lot for all of this tip´s. Im doing a web for a travel agenci and this tip help me realy. I will sohw you soon.
    Tanks agian

  13. Arnold says:

    Hi, i just made a form using JotForm and im facing the same problem as someone did earlier with explorer, but my issue affects Mozilla Firefox. When i get to the page with the form using firefox the form shows for a split second and then dissappears, have i done something wrong?

  14. Kevin says:

    Thx Jason

    Really simple to do with JotForm – I haven’t checked it across all browsers yet but if your reading this and would like to test it out then please do!

    I look forward to hearing from you.

    http://www.kevinharris.tv > contact

  15. Todd Phillips says:

    This tip was great.. it helped alot.. but the only issue i seem to have is when i test the form in firefox the “submit & Clear Field” buttons are cut off near the top.. so u don’t know what the buttons are… When i test in Safari they appear with no issues. Any help would be appreciated.

  16. Beth says:

    HI! Can anyone tell me how to get a “Register Here” tab/button on my iweb page that will then direct my clients to the online enrollment form? I have created a googledoc form and also one at JotForm. I did exactly what they both said to do in getting it on my webpage – copy the URL into the HTML snippet onto the page I want, but every time I do that the whole form appears on my page.

    I have several classes that I will be listing/offering and I need separate enrollment forms for each one. Any suggestions/thoughts? Help!!!

    Thanks so much!

  17. oscarov says:

    How do I direct the user back to my site after pressing the form submission bottom. In the sample I only see the thank you note. I’m trying to get the user back to my site.

    Thanks

  18. Paolo says:

    Thank you so much it work at my web page, and was very easy!!

  19. Eli says:

    Any tips for using an old version of iweb that doesn’t have widget support? I have ilife ’08.

    Thanks!

    Eli

  20. Clint says:

    What do you suggest doing when sites like jot form don’t work?… It currently isn’t, which means my forms won’t load while the site is down

  21. Ray says:

    It works! I have a new secure form published and tested. I did forget to add a submit button (!) but added it and republished. I use a MacBook Pro running OS 10.8.2 (Mountain Lion) and iWeb 3.0.4.

  22. Terri says:

    Ive used Google Docs and embedded the form into the Register page. Occasionally users cant load the form at all or only half loads. Their browsers vary, the last two hadn’t updated their browser to the current version. Do you think this is more likely an iweb problem or Google docs? or browsers, cookies, javascript etc…?

Leave a Reply