Adding a Contact Form to iWeb

Max (from Guimkie) — Wed, 16 Apr 2008 17:25:05 +0000

Have you ever wanted one of those fascinating contact forms right in your site? It isn’t that hard if you code your sites yourself – but with iWeb, getting and adding one becomes a bit more difficult. With this tutorial, I will aim to show you in a very simple way how to easily and rapidly add a cool PHP contact form right to your iWebsite.

For this tutorial, we will be using a free application called iTweak. You can go ahead and download it right here.

Please note that this tutorial will require the use of a PHP capable server. Otherwise, the tutorial and the form will not work. .Mac, sadly, is not capable of PHP. All those who don’t have PHP support, can take a look at a simple HTML snippet ready code from Wufoo.

The finished form will have a name, email, website field and a textarea for people to type their message. The style will apply to the theme you are using in iWeb. Simply try it out and you’ll see how it looks.

See the demo page for the result.

So now that you have downloaded iTweak, we can get started. Open iWeb.
Add two new pages. The first page will represent the page where you will have the actual form for visitors to fill in.
The second page will be the page where people will be redirected to if they have successfully submitted their page. Also known as the “Thanks for your mail” page. The thanks-page should not be included in the navigation bar or no links should directly link to this page.
You can give the two pages any names you like – but remember them and be sure to know which one is which!
In the first page, so the form-page, add a new text-box. The text-box should have the dimensions of around 400px wide and 270px high. In this text-box, you will later find the form.
In the text-box, without changing any of its style (ie.: borders, colors, fonts), type in the following keyword:
%%CONTACT_FORM_MAIN%%
See this image:
Now let’s move on to the second page, the thanks page, again, create a text-box. This time the dimensions do not really matter as we will just have a short line thanking the visitor for the message. Then, without changing any of the text-box’s style, write the following right into it:
%%CONTACT_FORM_SUB%%
See this image:
Now publish your site and open iTweak. After the publish, iWeb is no longer needed.

In iTweak, navigate to the “Discussion” tab and at the bottom you will have the ability to type in your email. Jam it right in the box.
Now, choose your site. You now have the ability, to use the two drop-downs to select your thanks and form page. Do that!
Now, make sure you have ticked the option to add the contact form and hit the publish button! Upload the files to your server and try the form! The form will not work if you view your site on your Mac (remember, it’s not a server).
Lastly, if you have any errors, please contact me via email and do NOT use the comments form below!!!

Looking for iWeb Templates? Check out my huge collection right here.

If you have enjoyed this article and you wish to make a small donation, then feel free to do so by clicking here.

Guimkie » Form

Adding a Contact Form to iWeb