iWeb Tip #5 – Forms in iWeb

24
1146

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 comments

  1. Lee 15 February, 2010 at 16:27 Reply

    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. Rick 3 March, 2010 at 14:47 Reply

    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?

  3. Joan Lamensdorf 27 April, 2010 at 10:03 Reply

    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 29 April, 2010 at 09:58 Reply

      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.

  4. jon 17 May, 2010 at 22:20 Reply

    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?

  5. Henry 29 June, 2010 at 05:47 Reply

    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?

  6. Chad 25 July, 2010 at 19:37 Reply

    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?

  7. Todd 12 September, 2010 at 15:56 Reply

    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.

  8. Zahid 27 November, 2010 at 06:42 Reply

    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”

  9. formacomunicacion 14 December, 2010 at 18:54 Reply

    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

  10. Arnold 4 January, 2011 at 18:15 Reply

    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?

  11. Todd Phillips 8 February, 2011 at 19:26 Reply

    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.

  12. Beth 23 June, 2011 at 23:02 Reply

    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!

  13. oscarov 27 June, 2011 at 22:11 Reply

    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

  14. Clint 14 February, 2012 at 20:44 Reply

    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

  15. Ray 1 December, 2012 at 12:42 Reply

    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.

  16. Terri 4 November, 2013 at 04:02 Reply

    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 to Kevin Cancel reply

Facebook
Twitter
YouTube