Wednesday 4 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 (1)


(For the latest PDF files Merger Software please have a look at the top of the left margin, inside the red box.)

How to make the contact form?

After a long time that I had not a contact form page on my website I decided to create one. I started from easy traditional HTML. Then I succeeded to make it more elaborate with a reCaptcha captcha to prevent spammers and bots to invade to and flood my site. Let me tell my steps in an easy to follow manner. First create HTML 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
    <div id="contact-area">
         <form method="post" action="">
            <label for="Name">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">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">Message:</label>
            <textarea name="Message" rows="20" cols="20" id="Message"></textarea>
            <input type="submit" name="submit" value="Submit" class="submit-button" />
        </form>
    </div>

Now I create style for each HTML tag. 

 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
        <style>
            
            #contact-area {
                width: 600px;
                margin-top: 25px;
            }
            
            #contact-area label {
                float: left;
                margin-right: 15px;
                padding-top: 5px;
                width: 100px;
                text-align: right;
                font-size: 100%;
            }

            #contact-area input, #contact-area textarea {
                margin: 0px 0px 10px 0px;
                border: 2px solid #ccc;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                padding: 5px;
                width: 471px;
                font-family: Helvetica, sans-serif;
                font-size: 110%;
            }

            #contact-area textarea {
                height: 90px;
            }

            #contact-area textarea:focus, #contact-area input:focus {
                border: 2px solid #900;
            }

            #contact-area input.submit-button {
                float: left;
                cursor: pointer; 
                margin-top:10px;
                margin-left:112px;
                background: transparent;
                width: 100px;
                font-size: 100%;
                color: #024d8e
            }

            #contact-area input[type="submit"]:hover{
                border: 2px solid #900;
            } 
      
        </style>

I put this style in the head part of the HTML. There are three way to apply CSS style fow HTML.
  • in-line.
  • in the head part.
  • and as a separate style sheet which is saved as a css file.
in a later post i'll describe them. Most of people are familiar with those concepts. Let me focus on my "Contact Page" now.
I have an overall design for my website and I insert the above HTML inside that architecture. Simply, I do not leave the above HTML in a page. I wrap it inside a wrapper to position it correctly, as if you position an image inside a known and well defined place in your web-pages. Computer people use the jargon wrapper for that bounding. It is just an HTML div tag. I give an example for such a wrapper.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
            #contact-wrapper {
                margin: 20px auto;
                border: 2px solid #ccc;
                padding: 20px 50px 20px 50px;
                background: transparent;
                width: 600px;
                min-height: 500px;
                height: auto !important;
                height: 500px;
            }

My wrapper is not this one but you can test and modify the above and if you liked use it, by all means. Put all of these in an HTML and then you have your contact form. I put a border for it to be recognised from other things in the page. Here is assembly of things.

 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!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> Dysprosium Contact Form</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style>
            
            #contact-wrapper {
                margin: 20px auto;
                border: 2px solid #ccc;
                border-radius: 7px;
                padding: 20px 50px 20px 50px;
                background: transparent;
                width: 600px;
                min-height: 500px;
                height: auto !important;
                height: 500px;
            }

            #contact-area {
                width: 600px;
                margin-top: 25px;
            }
            
            #contact-area label {
                float: left;
                margin-right: 15px;
                padding-top: 5px;
                width: 100px;
                text-align: right;
                font-size: 100%;
            }

            #contact-area input, #contact-area textarea {
                margin: 0px 0px 10px 0px;
                border: 2px solid #ccc;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                padding: 5px;
                width: 471px;
                font-family: Helvetica, sans-serif;
                font-size: 110%;
            }

            #contact-area textarea {
                height: 90px;
            }

            #contact-area textarea:focus, #contact-area input:focus {
                border: 2px solid #900;
            }

            #contact-area input.submit-button {
                float: left;
                cursor: pointer; 
                margin-top:10px;
                margin-left:112px;
                background: transparent;
                width: 100px;
                font-size: 100%;
                color: #024d8e
            }

            #contact-area input[type="submit"]:hover{
                border: 2px solid #900;
            } 
      
        </style>
    </head>
    <body>
        <div id="contact-wrapper">
            <div id="contact-area">
                <form method="post" action="">
                    <label for="Name">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">Email:</label>
                    <input type="text" name="Email" id="City" value="" />
                    <label for="Subject">Subject:</label>
                    <input type="text" name="Subject" id="Subject" value="" />
                    <label for="Message">Message:</label>
                    <textarea name="Message" rows="20" cols="20" id="Message"></textarea>
                    <input type="submit" name="submit" value="Submit" class="submit-button" />
                </form>
            </div>
        </div>
    </body>
</html>

Here is the image of resulting page. If you like you can see it by clicking here, please.


This is a well designed form and has the advantages of
  • a knit wrapping boundary,
  • when you click on any field its boundary changes to red,
  • when mouse enters the bounds of the "Submit" button its boundary changes its colour,
  • having a pointer (small hand) when you move the mouse over the "Submit" button to show it clickable,
  • all corners are rounded to give a smoother impression.
It shows how you can design a button.
But this still does not post messages back to you. It is not functioning, yet. I'll show how to do it in the next blog post. Snippets have made this one very long. Next post is here; please click.
Download PHP code in Zip format here or open the code in text format here.

Download this tutorial as PDF format here
Posted by Peter Jones at 22:29
Labels: , , , , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)