Friday 6 December 2013

How to Create a Contact Form for Your Website in an Easy Way : A Set of Step by Step Tutorials Using HTML5, CSS3 and PHP (4)


(For the latest PDF files Merger Software please have a look at the top of the left margin, inside the red box.) 
Continues From Part 3.
I have these tasks to finish my contact form.
  • Send a copy of visitor's message back to them, in case he likes to archive it for themselves
  • Prevent empty fields.
  • Prevent fake emails.
  • Prevent flooding by software robots.
  • Perhaps preventing nasty words.
  • Keeping filled forms as is to prevent disappointment of visitors when they cannot enter reCaptch correctly.
  • Put "error" messages in the same page as the contact form.
  • Put "thanks" message in the same page as the contact form.
  • As a result, delete demoThanks.php and demoPoster.php files.
First thing's first; to send a copy back to visitors. Just add the following lines after line (33) of your demoPoster.php file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
        //After thank you send an email containing his message to the visitor
        // prepare email body text
        $Body = " Madam/Sir,\n Thank you for your message.\n Dysprosium.\n";
        $Body .= " ======================================================\n\n";
        $Body .= "Name: ";
        $Body .= $Name;
        $Body .= ", Esq.";
        $Body .= "\n";
        $Body .= "From: ";
        $Body .= $City;
        $Body .= "\n";
        $Body .= "Email: ";
        $Body .= $Email;
        $Body .= "\n";
        $Body .= "Subject: ";
        $Body .= $Subject;
        $Body .= "\n";
        $Body .= "Message: ";
        $Body .= "\n";
        $Body .= $Message;
        $Body .= "\n";
        // send email 
        mail($Email, $Subject, $Body, "From: <$EmailToAdmin>");

As a result, at this stage, my demoPoster.php is like this

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<?php
    $Name = Trim(stripslashes($_POST['Name'])); 
    $City = Trim(stripslashes($_POST['City'])); 
    //$Email = Trim(stripslashes($_POST['Email'])); 
    $Email = "this.visitor@googlemail.com";
    $Subject = Trim(stripslashes($_POST['Subject']));
    $Message = Trim(stripslashes($_POST['Message']));
    //Next send contact to website admin.
    $EmailToAdmin = "carlo.dj@messiahpsychoanalyst.org"; //Put your website admin email here. Don't forget quotes. 
    // body of the email your own admin receives
    $Body = "RE: Contact from visitors";
    $Body .= "\n";
    $Body .= "Name: ";
    $Body .= $Name;
    $Body .= "\n";
    $Body .= "City: ";
    $Body .= $City;
    $Body .= "\n";
    $Body .= "Subject: ";
    $Body .= $Subject;
    $Body .= "\n";
    $Body .= "Email: ";
    $Body .= $Email;
    $Body .= "\n";
    $Body .= "Message: ";
    $Body .= "\n";
    $Body .= $Message;
    $Body .= "\n";
    // send email to admin
    $posted = mail($EmailToAdmin, $Subject, $Body, "From: <$Email>");
    // redirect to thanks page 
    if ($posted){
        print "<meta http-equiv=\"refresh\" content=\"0;URL=demoThanks.php\">";
        //After thank you send an email containing his message to the visitor
        // prepare email body text
        $Body = " Madam/Sir,\n Thank you for your message.\n Dysprosium.\n";
        $Body .= " ======================================================\n\n";
        $Body .= "Name: ";
        $Body .= $Name;
        $Body .= ", Esq.";
        $Body .= "\n";
        $Body .= "From: ";
        $Body .= $City;
        $Body .= "\n";
        $Body .= "Email: ";
        $Body .= $Email;
        $Body .= "\n";
        $Body .= "Subject: ";
        $Body .= $Subject;
        $Body .= "\n";
        $Body .= "Message: ";
        $Body .= "\n";
        $Body .= $Message;
        $Body .= "\n";
        // send email 
        mail($Email, $Subject, $Body, "From: <$EmailToAdmin>");
    }
    else{
      //do nothing for now
    }
?>

You have swapped email of admin with the email of the visitor. Please compare line (30) with line (56). Put at line (5)  email of your friend and at line (9) an email of yours and then test your form by filling other parts, leaving email field empty.
Download PHP code in Zip format here or open the code in text format here.
Result email that receives to the visitor is like this. You might like to use ideas similar to lines (36) and (37) to improve the format of the email sent back to the potential customer visitor. (via yourhostingaccount.com is related to my webhosting email administration. Yours could be different.)

 
Next, preventing empty fields to be submitted. It depends to you that which fields you like to be filled by the visitor and which could be optional. You can explicitly indicate them to the user by putting a red star or dagger in front of the relevant fields and add a paragraph at the bottom to attract attention of users to your requirement. Body of your demoMain.php could be something like this.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
    <body>
        <div id="contact-wrapper">
            <div id="contact-area">
                <form method="post" action="demoPoster1.php">
                    <label for="Name"><span style="color: red; font-size: 100%">*&nbsp;</span>Name:</label>
                    <input type="text" name="Name" id="Name" value="" />
                    <label for="City">City:</label>
                    <input type="text" name="City" id="City" value="" />
                    <label for="Email"><span style="color: red; font-size: 100%">*&nbsp;</span>Email:</label>
                    <input type="text" name="Email" id="Email" value="" />
                    <label for="Subject">Subject:</label>
                    <input type="text" name="Subject" id="Subject" value="" />
                    <label for="Message"><span style="color: red; font-size: 100%">*&nbsp;</span>Message:</label>
                    <textarea name="Message" rows="20" cols="20" id="Message"></textarea>
                    <p style="margin:20px auto 10px 112px;">Fields shown by <span style="color: red; font-size: 100%">*&nbsp;</span> are required.</p>
                    <input type="submit" name="submit" value="Submit" class="submit-button" />
                </form>
            </div>
        </div>
    </body>

Now your contact page is like this.



You can view it by clicking here, please. I called this demoMain2.php to differentiate with previous version, demoMain.php.
Download PHP code in Zip format here or open the code in text format here.
To prevent empty fields or in another word to be able to validate the form there is a facility frequently used inside PHP users . It is

$validationOK = 

Other side of declaration is a Boolean, a test of fields being emptyor desireable.If you put it equal to true then it accepts any form filled or empty and process your submissions. We like to test if any of the three required field is being empty the validation fails. At the beginning of each refresh of the page the value of that variable should be initialised to a desired false or true.
This is rather tedious and one can use any Boolean to check,

1
2
3
4
5
    if((empty($Name))||(empty($Email ))||(empty($Message)))
    {
        // Its empty so throw a validation error
        echo 'Input is empty!'; 
    }

Command "echo" is an important PHP command that prints something somewhere. It actual puts a string of your choice anywhere you decide. Later we use it to modify our HTML. Now, it is better to redirect error to an error HTML file. Hence,

1
2
3
4
5
6
    if((empty($Name))||(empty($Email ))||(empty($Message)))
    {
        // Its empty so throw a validation error        
        print "<meta http-equiv=\"refresh\" content=\"0;URL=demoError.html\">";
        exit(); 
    }

This takes care for any empty field. Make a demoError.html page, and upload it to your website (download PHP code in Zip format here or open the code in text format here). Now put the remaining part of the demoPoster.php file after else of this if.  We are going to have the next file (download PHP code in Zip format here or open the code in text format here).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<?php
    $Name = Trim(stripslashes($_POST['Name'])); 
    $City = Trim(stripslashes($_POST['City'])); 
    //$Email = Trim(stripslashes($_POST['Email'])); 
    $Email = "this.visitor@googlemail.com";
    $Subject = Trim(stripslashes($_POST['Subject']));
    $Message = Trim(stripslashes($_POST['Message']));
    if ((empty($Name))||(empty($Email ))||(empty($Message))) {
        print "<meta http-equiv=\"refresh\" content=\"0;URL=demoError.html\">";
        exit();
    }
    else{
        //Next send contact to website admin.
        $EmailToAdmin = "carlo.dj@messiahpsychoanalyst.org"; //Put your website admin email here. Don't forget quotes. 
        // body of the email your own admin receives
        $Body = "RE: Contact from visitors";
        $Body .= "\n";
        $Body .= "Name: ";
        $Body .= $Name;
        $Body .= "\n";
        $Body .= "City: ";
        $Body .= $City;
        $Body .= "\n";
        $Body .= "Subject: ";
        $Body .= $Subject;
        $Body .= "\n";
        $Body .= "Email: ";
        $Body .= $Email;
        $Body .= "\n";
        $Body .= "Message: ";
        $Body .= "\n";
        $Body .= $Message;
        $Body .= "\n";
        // send email to admin
        $posted = mail($EmailToAdmin, $Subject, $Body, "From: <$Email>");
        // redirect to thanks page 
        if ($posted){
            print "<meta http-equiv=\"refresh\" content=\"0;URL=demoThanks.php\">";
            //After thank you send an email containing his message to the visitor
            // prepare email body text
            $Body = " Madam/Sir,\n Thank you for your message.\n Dysprosium.\n";
            $Body .= " ======================================================\n\n";
            $Body .= "Name: ";
            $Body .= $Name;
            $Body .= ", Esq.";
            $Body .= "\n";
            $Body .= "From: ";
            $Body .= $City;
            $Body .= "\n";
            $Body .= "Email: ";
            $Body .= $Email;
            $Body .= "\n";
            $Body .= "Subject: ";
            $Body .= $Subject;
            $Body .= "\n";
            $Body .= "Message: ";
            $Body .= "\n";
            $Body .= $Message;
            $Body .= "\n";
            // send email 
            mail($Email, $Subject, $Body, "From: <$EmailToAdmin>");
        }
        else{
          //do nothing for now
        }
    }
?>

and demoError.html is something like the following file (download PHP code in Zip format here or open the code in text format here).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>This is a Demo Error Page</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width"> 
 <style>            
            #phonix-wrapper {
                margin: 20px auto;
                border: 2px solid #ccc;
                border-radius: 10px; 
                padding: 20px 50px 20px 50px;
                background: transparent;
                width: 600px;
                min-height: 500px;
                height: auto !important;
                height: 500px;
            }
        </style>
    </head>
    <body>
 <div id="phonix-wrapper">
            <p>By Dysprosium</p>
            <hr style='margin: 1px auto 1px auto; height: 1px; color: #fefefe; width: 82%;'/> 
            <h1>Sorry! You left a required field empty. Please try again.</h1>
            <p><a href="demoMain2.php">Refresh Contact Form</a></p>
            <p>Or use your browser back button to amend your message.</p>
 </div>
</html>

Please click here to watch it. I put a snapshot here for your attention.


This post became too long. I'll continue in next posts; please click here. Thanks.

Download this tutorial as PDF format here
Download part 1 to part 4 as PDF format here

No comments:

Post a Comment