Add An HTML Contact Form to iWeb

The most important part of having a functional website is by providing your viewers a way to contact you. Having this direct line of communication can be the difference in landing a new client or missing an opportunity. However, most websites utilize contact forms using PHP and a database and we all know, iWeb doesn’t mix well with these out of the box. Of course you can mix php and iWeb together but that requires alot of extra work beyond publishing your iWeb site. There are a number of HTML services available but I’m going to talk about JotForm.

About JotForm

JotForm is an amazing online service that allows users to create a complete form using a WYSIWYG editor right from their web browser. You can customize it to your complete happiness with text fields, dropdowns, radio and check buttons, payment gateways, HTML formatted text, print/clear/send buttons and more. Perhaps the best part is that JotForm is completely FREE for your basic use giving you a free risk to try the service. If you find you need more submissions, payments or data space then, you can upgrade to a higher (paid) plan. You view their plan options below.

The basic free plan provides you with a 100 submissions that resets each month. One of the greatest features is that you can create an unlimited number of forms to spread over all of your websites. Another great feature is the ability to provide a way for your viewers to upload files to you. JotForm allows you to include upload buttons on your form allowing the viewer to send one or multiple files to your JotForm account and/or Dropbox.

Finally, you can customize the form to your complete style preference by including the entire source code with style sheets onto your server. Or you can use the predefined themes provided by JotForm.

Quick video tour

Here is a quick video tour of JotForm from their website which explain most of the features.

How to include your new form into iWeb

Image text
1. After customizing your form to your hearts desire, head over to the Editor Menu and select either “Source/Script Code” or “Embed Form“.

2(a). Both of these codes will work. I have found that if you are using a custom “Thank You” text then you should use the Script Code. This will allow the message to appear inside the HTML snippet instead of a new page or directing you elsewhere. However, you can’t fully customize every aspect of the form.

2(b). Using the Embed will give you more options of placing it into your website and other platforms like Facebook, WordPress, Tumblr, Blogger, etc.

3. After you decide which to use, copy and paste the code into your HTML snippet and press apply. You will instantly see your form appear on your iWeb page.

Observations

Updating:

If you use the script to place into your HTML snippet, the entire form is hosted on the JotForm server with no customizations being made within iWeb. This will allow you an easy way of updating the form without updating iWeb because the form options are being handled by JotForm. By using the embedded code you will need to adjust the contents of the HTML snippet from iWeb and republish your site (or use a text editor and edit the widget(#).html file on the server bypassing iWeb).

Firefox:

Firefox adds a slight difference on how it handles the locations of each field of your form. If you only apply the HTML snippet, alot of times Firefox will end up cutting off the bottom of the form. This will also be aparent if you place required marks for certain fields. If the viewer doesn’t fill out that field, the form displays a “required message” that pushes everything else down, again causing the bottom of the form to disappear. This happens because the HTML snippet is a fixed height. Therefore, I always provide enough extra height to compensate firefox.

Backgrounds:

Each form allows you to change the background to color or image. I always use a #transparent setting so that my website background is used making the form look like it is part of the website and not an add-on widget.

Additional Help

JotForm has a great getting started section and forum on their website but if you need any advice or help integrating your HTML form into iWeb, please ask below in the comments.

,
  1. Kerry,
    Looks like exactly what I need to get a good looking professional form onto my website…for free! Thanks for the tips to upload it, however I was wondering about secuirty and spam. How secure is information provided on that form and can spammers hit it? Can one of those type what you see boxes be used in conjunction with this form to prevent spamming and if so, are there free ones on the net?

    • Hi Scott,
      You can set up the form to use https to give it security and encryption. To help prevent spam, you can either set some or all the entry fields to “required” and/or add verification to them. For example, you can make one text field where the answer has to be 5 and if it is not then the form will not send or you can place a captcha.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Current ye@r *