Adding a Contact Form to iWeb
16 Apr '08 Filed under Tutorials, iTweak -
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.
17 Apr 08 at 6:54 am
I did the contact form and all I see is the codes I put in the text boxes nothing is working yet . it processed the site without a problem , and I uploaded afer that and not working for me, I have godaddy so I have php.. do you knwo what it could be?
17 Apr 08 at 7:07 am
now I have this error when I hit contact
Parse error: parse error, unexpected T_STRING in /home/content/C/n/y/Cny1969/html/sites/markarcarophotography/Mark_Arcaro_Photography/Mark_Arcaro_PhotographyContact.php on line 1
17 Apr 08 at 8:25 am
could you give me your site URL?
max
17 Apr 08 at 3:07 pm
Sure here you go..I took the contact off the navbar so it didnt look funny not working. but the page is still there:
http://www.markarcarophotography.com/Mark_Arcaro_Photography/Contact.html
http://www.markarcarophotography.com/Mark_Arcaro_Photography/Mark_Arcaro_PhotographyContact.php
http://www.markarcarophotography.com/Mark_Arcaro_Photography/Mark_Arcaro_PhotographyThanks.php
17 Apr 08 at 3:35 pm
apparently i cant read the contents of the files, so i cant say what there is that sux at line 1. drop me a mail with the the files attached. thanks
max
17 Apr 08 at 3:54 pm
the wierd thing is there is nothing in the file .php like it wasnt even written yet
17 Apr 08 at 4:31 pm
there both just blank
18 Apr 08 at 7:48 am
try republishing your site and see if it works then….
18 Apr 08 at 3:45 pm
Hi max…
i ran into the same problem i think. The %%CONTACT_FORM_MAIN%% text box is a separate one… i made no changes to it’s style, and it does not work. The server is php capable. any suggestions?
btw… great job so far man.
18 Apr 08 at 5:02 pm
did you select your pages correctly? the server is php capable cause obviously it shows me the contents. as it seems, itweak only turned it into a php file - but didnt add the php stuff to the file. id suggest you try again.
max
18 Apr 08 at 5:41 pm
Hi max,
This seems to be a bit of any issue. I’ve tired following your tutorial to the letter over and over and over again, but I still have no joy. =(
18 Apr 08 at 6:43 pm
guys - i tried it myself and there seems to be an issue with itweak. somehow it worked with me while i tested it with the debug version - but the release b aint workin.
expect an update later today
max
18 Apr 08 at 11:50 pm
Excellent news! Thanks Max! =)
19 Apr 08 at 12:03 am
Hi Max,
I can confirm that the Contact form works with iTweak 1.4. However, the Thankyou page still just shows %%CONTACT_FORM_SUB%%
Also, is there a way to limit the size of the message box as if the user expands the message box to a size larger than the allocated 400×270, then it becomes impossible to click ‘Send’, even though it is still visible.
Kind Regards,
Neil.
19 Apr 08 at 11:05 am
Neil,
Yes, the sub aint working. I have just released iTweak 1.4.2 which should make the adding of contact forms work for 100%!
For your resize problem, I guess that just making the text-box larger is the best way to go. iWebs content is not made to work if something is resized, all the elements are fixed (unlike my site here).
Max
19 Apr 08 at 12:40 pm
Awesome job Max. Thank you so much.
19 Apr 08 at 1:57 pm
Thanks Max! Good work! =)
19 Apr 08 at 2:43 pm
Works like a charm! Thanks for this tutorial.
19 Apr 08 at 9:53 pm
This is absolutely a beautiful tool… and exactly what I wanted to integrate it into my site! Works even better than other types of email forms, which require the .cgi ….
Many thanks!
27 Apr 08 at 4:48 am
so i’ve tried to do this- but it doesn’t seem to work- all i get is the text I’ve typed in… any help would be great
28 Apr 08 at 2:34 am
I’m really excited about this and it works so easily. I have an off-white background on my page. Is there a way to change the font color?
28 Apr 08 at 4:40 pm
iTweak takes the style for the defaults theme text. I will look and see how I can modify that to take the syle of the textbox. let me see ;.D
27 May 08 at 5:12 am
Is there any way to change the fields of information for the contact information? For example the wording “your email and the overall size of the information boxes to collect data?
Great job otherwise, works like a charm, just want to change a few things to work for my site.
28 May 08 at 6:33 pm
Morrelle,
No, there is no way to (well there is no easy way) to change the number of fields. What you can change is the labels in front the fields. Ie the “Name” or “E-Mail” labels.
You can change them by editing the HTML of the published files. Open the contact files (ending in .php) up in a texteditor such as Coda/Textmate and search for the keywords “Name” and “E-Mail.” Then replace them with what you want.
max
03 Jun 08 at 3:58 am
Hi Max - I have looked all over the internet for something like this. Thanks for making it available.
could you please help me with this error?
thank you
ramesy
Parse error: syntax error, unexpected T_STRING in /home/content/s/p/i/spiritmanram23/html/Prayer_Request.php on line 1
14 Jun 08 at 1:43 am
same problem as above and i’m using v.1.4.5. thanks.
16 Jun 08 at 8:20 pm
@Gideon and Ramsey: Drop me an email about it.
Max
06 Jul 08 at 3:57 pm
I added two pages to my iWeb one called Add_Contact and the other Thanks and followed all the instructions. But now the website does not load. When I give the full url c-connection.biswas.ch/Add_Contact to check I get the follwoing message
Parse error: syntax error, unexpected T_STRING in /home/biswas/www/c-connection/Add_Contact.php on line 1
11 Jul 08 at 6:39 pm
Any luck with modifying iTweak so it takes the style from the text box?
Apart from this, absolutely brilliant!!
16 Jul 08 at 5:27 pm
I tried this and did everything it said and nothing shows up on my website. Also, I tried using iTweak to add google analytics to my page, but it is not working either. I have followed both tutorials and nothing is working. When I look at the page info on my computer it is in the html files, but when checked on the website itself nothing shows.
21 Jul 08 at 5:22 pm
It worked fine very first time I tried.
Thanks a lot.
22 Jul 08 at 7:14 pm
@ Jordan, Ben, Gautam - please send me emails about your problems! Thanks
@Hemant - Thanks for your comment.
28 Jul 08 at 12:04 pm
Amazing program. Thank you so much… I can’t believe how well it works….
I even got to edit the files as I pleased… just one question… how do I change the code so that it will send to multiple e-mails??
05 Aug 08 at 8:03 pm
In ITweak, try typing your emails separated with a comma or semicolon. For example:
mail@mail.com;mail@mail.com or mail@mail.com,mail@mail.com
or maybe you need to add space.
mail@mail.com; mail@mail.com or mail@mail.com, mail@mail.com
I have no idea … you need to experiment a bit.
Max
12 Aug 08 at 4:40 pm
Well done - thx
You app crashes if I try to use it again afetr I use it once, btw. I need to quit and restart each time. That’s OK…
Can I change fonts? I know enough PHP, but is that the best option? Then every time I make a change I need to:
a) use iweb
b) use itweak
c) again add php changes
seems that there must be a simpler way?
michael
13 Aug 08 at 10:08 am
Michael,
Um when the app crashes is not fine.
Where does it crash?
Change fonts is a difficult one. iTweak sets the style of the form to the css class “body.” You can change that in PHP to modify the look of the form.
Max