Creating A Secure Form For Your Website

One of the main purposes of your website is to allow your visitors a way to contact your company. Most likely you will want to provide your E-mail address, but this can be risky. There are spyware programs out there that search the Internet for unprotected E-mail addresses that they can store in a database and before you know it, SPAM E-mails are arriving in your Inbox daily.

The solution: create a secure online contact form that protects your E-mail address and has a check to make sure the one E-mailing you is human. To see an example, see our contact us page. Once they become your customer or buy from you, then you can send them your actual E-mail address. Form Scripts

To create a contact us form on your website you need a script. A script is basically a set of commands that perform a specific task (like sending E-mail). Many can be found on the Internet for free. eVentureBiz uses a PHP form script provided by Dagon Design.

To set up a secure form like ours on your website using this script, follow the steps below.

Note: There are two versions of this script. One for your WordPress Blog/Site and the other for your standard website. This tutorial is for your standard website and is the PHP version of the script. Click here to view our tutorial on how to set up this script for your WordPress Blog.

Step 1

Download the script from Dagon Design and uncompress dd-formmailer.zip into a folder.

1a) Download the file dd-formmailer.zip

 1b) Uncompress it
Step 2

Open the newly created folder dd-formmailer. You should now see another folder named dd-formmailer all by itself. Upload that entire dd-formmailer folder into a directory on your web hosting account. You may not wish to have a folder named "dd-formmailer" on your website so before you upload it you may want to change the name of the folder. We changed ours to "contact." This way our contact us page is www.eventurebiz.com/contact and not www.eventurebiz.com/dd-formmailer.

From here on out, this tutorial will assume you renamed the dd-formmailer folder to contact.

2a) Rename your dd-formmailer folder
to contact

 2b) Upload the contact folder to your website.
Step 3

Configure your form.

3a) Click your contact folder to open it. You should see the following 3 files and 1 folder:

3b) Again you probably don't want a file named dd-formmailer to be part of your web address. We named ours to mailer. So, rename dd-formmailer.php to mailer.php (or whatever you want to rename it to).

3c) Edit the mailer.php. This is where you will type in your E-mail address, add form fields, and more. To see the full list, go to Dagon Design's website for this script. To edit the file, click where you see the arrow below in your file manager.

3d) Search for the line that says:

$path_to_css = 'dd-formmailer.css';

and clear this path so it looks as follows

$path_to_css = '';

3e) Search for the line that says:

$script_path = 'http://www.dagondesign.com/1/dd-formmailer.php';

and replace it with the path of YOUR mailer.php file. For example our is:

$script_path = 'http://www.eventurebiz.com/contact/mailer.php';

3f) Be sure to leave the following line as is in this file:

$path_contact_page = '';

3g) Search for the line that says:

$recipients = 'user@domain.com';

and replace user@domain.com with the E-mail address you want your form to E-mail to.

3h) The next part looks something this:

$form_struct = ' type=text|class=fmtext|label=Name|fieldname=fm_name|max=100|req=true type=text|class=fmtext|label=Email|fieldname=fm_email|max=100|req=true|ver=email type=text|class=fmtext|label=Subject|fieldname=fm_subject|max=100|req=true type=verify|class=fmverify|label=Verify type=textarea|class=fmtextarea|label=Message|fieldname=fm_message | max=1000|rows=6|req=true ';

This is where you can add, remove, or rename your fields for your form. The standard comes with "Name, Email, Subject, and Message" and they are all required. If you're fine with that, leave this area alone. We added a "Website" field so users can tell us what their web address is, but it is not a required field.

Below is our version of the code above for our form.

$form_struct = ' type=text|class=fmtext|label=Name|fieldname=fm_name|max=100|req=true type=text|class=fmtext|label=Email|fieldname=fm_email|max=100|req=true|ver=email type=text|class=fmtext|label=Website|fieldname=fm_website|max=100 type=text|class=fmtext|label=Subject|fieldname=fm_subject|max=100|req=true type=verify|class=fmverify|label=Verify type=widetextarea|class=fmtextwide|label=Message|fieldname=fm_message| max=1000|rows=10|req=true ';

***It is important to note that the last line of the above code should not be broken like it is displayed above. Make sure the widetextarea line is all one line all the way to req=true.

3i) If you want to change the message displayed after your customer's form has been sent successfully then you would look for this line:

$sent_message = 'Thank you - your message has been sent.';

and replace the message to say whatever you want it to.

3j) Next you need to get and enter in a reCaptcha key for your image verification. To do this, go to reCaptcha's website and get yourself a private and public key. Once you create an account and give them your website's address, take note of both your public and private keys (they will be long and it's easier to cut and paste). If you have already obtained a key for your website then you don't have to do this again, just enter your previous key. Once you got them, look for these 2 lines in your mailer.php file:

$re_public_key = ''; $re_private_key = '';

and paste in your related keys.

3k) At this point you are pretty much done editing this file; all you need to do is save it unless you plan to edit it a little more (maybe add checkboxes or other fields to your form). Next we will create your actual contact webpage and plug this all in.


Designing Your Custom Form Page

The above tutorial created a standalone form with nothing but form fields. For example, the eVentureBiz form created from the tutorial above looks like this: www.eventurebiz.com/contact/mailer.php. You can see that this page does not convey any information to our guests. Therefore, it is wise to plug this form into your own custom webpage. Ours is plugged into our Contact Us page: www.eventurebiz.com/contact.

There are various ways to do this (inline frames, for example) but here's the standard way most people who know a little html and not php might best understand.

Step 1

Choose or create a folder to put your contact form in (for example, "contact").

Step 2

Choose and create a file name (index.htm, contact.htm, etc.) inside your newly created folder from step 1. As stated earlier, if you name the file index.htm then users will not have to type that into the web address. NOTE: do not create a new index.htm file in your root directory (the directory where your homepage exists), otherwise you will overwrite your homepage file.

For example, www.eventurebiz.com/contact/index.htm = www.eventurebiz.com/contact

Step 3

Edit your new index.htm file inside your contact folder. Tell your guest whatever you wish to tell them before (and after) where your form will be inserted. We have created a template for you. Simply copy and paste the code into your new index.htm file (or whatever name it is) and edit the sections shown in RED. Click Contact Code to view the code now.

Step 4

That's it. The form page we just created is a generic form and is ready to be plugged into your website. If you have any problems, go to Dagon Design's webpage for this script for more information.

We hope you found this tutorial useful,
eVentureBiz Team

<< Back To Tutorials List