Tutorial #3
A contact form for a web-page
A script is required for the contact form: click on the link then save to disc when prompted: script.zip
The purpose of your website, as a photographer, is to show your images and expertise to the world so that people can either buy the images, employ you or at least flatter you with praise. In each case there needs to be an easy way for potential customers to e-mail you directly from the site.
The easy, and most commonly used, way is to just use the ‘mailto:’ link, either directly from a text line or from a ‘send’ button on a form. But there are a few inherent problems with this approach:1) The ‘mailto:’ link relies on the senders computer having an e-mail program with which to send the mail. Some people only use browser-based e-mail services, in which case the link cannot work. Others may be making personal contact but from a works computer and don’t want the mail sent from there. Either way, a potential customer may be lost.
2) Often, when using the ‘mailto:’ link on a form button, the web-browser will use pop-up boxes to warn that another program is being opened or to ask which e-mail profile should be used to send the mail. For non-experienced PC users these pop-up warnings can be daunting leading to them to just shutdown the boxes and therefore not send the form. Another potential customer lost.
3) More importantly, spammers use robot browsers to trawl the ‘net looking for e-mail addresses to add to their database. A ‘mailto:’ link is an easy way of allowing your e-mail address to be added to that database and so soon the spam messages will come rolling in, cluttering up your inbox and making the genuine messages harder to locate.
A way of getting around the above problems is to use PHP script – which then runs the mail actions from your web-server rather than from your web-page. There is then no need to have an e-mail program on the senders computer and no direct link to your e-mail address from your website.
The method below uses a form to capture the information from the sender and a small PHP script file to execute the mail. The sender will be presented with a web-page confirming that the mail has been sent which contains a link to return to your site.
Note:
This approach requires you to download the script file that can be found at the top of this page. It is a small file that needs to be unzipped and extracted to the root folder of your web-site (the same place as your index page). It looks exactly like a normal html file except it has a ‘php’ suffix. It is, of course, virus free but for your own peace of mind please use your virus-checker to test the file before unzipping it.
There are some small code modifications required to make the script it work with your e-mail address which cannot be done in design or wyswyg view. They are very easy to do but you must be prepared to follow the instructions exactly.
The php script requires that your web host supports PHP. Most do but check to make sure. If you cannot find out try using it anyway – the worst that can happen is that it doesn’t send the mail and you can go back to your old way (or change your web host).
Instructions for the PHP file:
Download the script from the top of this page by clicking the ‘script.zip’ link.
Save it to disc. Virus check the zip file.Open the zip file and extract the file ‘FormToEmail.php’ to the root folder of your web-site (in exactly the same folder as your ‘index’ page).
Open the ‘FormTo Email.php’ file in your web-authoring program (e.g. Frontpage, Dreamweaver, etc) and choose the code view rather than the wyswyg design view. Otherwise use a text editor (e.g. Notepad).
At the top of the page you will see a section of text: “george@john-hallett.co.uk”
Change the e-mail address to the one where you want your mail sent to – BUT KEEP IT WITHIN THE QUOTATION MARKS.
Beneath the instructions there is another section of text: “/”
This denotes the page that the sender will be directed to after the acknowledgement page. Leave it as it is if you are happy for them to be sent back to your Home page, otherwise enter a new URL instead of the / sign - BUT KEEP IT WITHIN THE QUOTATION MARKS.
Save the file (but DO NOT rename it) and upload it to your web server in the usual way.
Instructions for the contact page:
The exact method depends on the web-authoring program that you are using but in summary you need to insert a form and then insert fields within that form. Check your program documentation to find out exactly how to do this.
Create a new web page (or edit your existing ‘contact’ page) in a matching style, creating links from your existing site, as applicable.
Within that page insert a form.
In ‘form properties’ enter the following:
Form name: ContactForm
Action: FormToEmail.php (browse for the ‘FormTo Email.php’ file if possible to eliminate typing
errors)
Method: POST
All we have done here is to tell the form to use the PHP file that we amended earlier to post the e-mail. Then insert the form fields that you want the sender to complete. At the very least you need fields for:
Name
e-mail address
Comments
But of course you can add as many as you like. Make sure that the comments box is big enough - it obviously needs to be much bigger than the ‘name’ and ‘e-mail’ box.Add a button and assign its action as: ‘submit form’ (or similar, depending on the program you are using).
Give the button a label such as ‘Send’ or ‘Submit’.
Save the page and upload it to your web server.
Test:
Open your web-browser, go to your new ‘contact’ page and complete the form.
Send the form.
Check your e-mail.
Fingers crossed – it should work first time.
Problems:
Ahhh…… it didn’t.
Here are some common problems and their solutions:
Problem 1:
· After sending you get a Error Code 404 – Document not found message.
Possible causes
· You have not uploaded the PHP file to the web server or have put the file in the wrong place. It should be in the same place as your ‘index’ page.
· You have mis-spelt the ‘FormTo Email.php’ file name in the ‘form properties’ box. It has 3 capital letters in it – has yours?. Browse for the file if possible rather than typing it in to prevent such errors.
Problem 2:
· You do not receive an e-mail after sending the form
Possible causes
· You have mis-spelt or made an error when inputting your e-mail address into the PHP file. Check and amend.
· When incorporating the PHP script into your existing contact page (see advanced section below) you have missed out the top section of script above the <HEAD> tag. Replace all of the script from the original into the top of your page.
· Your web-host does not support PHP script. Abandon everything or change web-host.
Advanced
If you are a little more confident with dealing with code and you have a specific page style that you want to retain for your site, you can edit the PHP file in exactly the same way as a normal web page.
The only proviso is that the initial 96 lines of code from the original PHP file must be retained (or copied and pasted) in the top of the page above the <HEAD> tag - because this is the bit that actually handles the mail.
Save the page as normal but keep the file name ‘FormToEmail’ and the ‘.php’ suffix.
To see an example, send me a mail from my contact page. When you have sent the message you will get a page saying ’Thank-you - Your message has been sent’.
That entire page, including the links and image, is all part of my modified PHP file – and it looks exactly like the rest of my site.Try it.
In the next tutorial we will look at incorporating a Lightroom web gallery into an existing website.
If this tutorial was useful to you, please let me know by signing the guestbook. Thanks.
Print this tutorial out as a PDF document
All material on this web-site is copyright
© John Hallett 2008-2010
