Friday, 13 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 (7)

(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 6.
Perhaps noticed that in the demoError page it requests to use browser back button to return to the half filled page; other wise, that page would be refreshed upon revisiting and loses edits of users. Hence, values of the contact form field should remain maintained as they already have been half filled and the visitor might become disappointed and frustrated filling them again. If this visitor be a potential customer you might lose them for good.

My goal is to reflect the "Thanks" message or any other error message including reCaptcha error in the same page, without leaving the page or without losing half filled forms.

I move everything to the single demoFinal.php

First, let's have a look at the final code (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
 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
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<!--
Created by Peter Jones 13 December, 2013
codesforus.blogspot.com
copyrights
-->
<html>
    <head>
        <title> Demo-Final: Dysprosium Contact Form</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script type= "text/javascript">
            var RecaptchaOptions = {
                theme: 'white'
            };
        </script>
        <style>
            
            #contact-wrapper {
                margin: 20px auto;
                border: 2px solid #ccc;
                border-radius: 5px;
                padding: 20px 50px 20px 50px;
                background: transparent;
                width: 600px;
            }

            #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-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;
            } 

            #recaptcha_widget_div {
                margin-top: 20px;
                margin-bottom: 10px;
                margin-left: 112px;
            }
            
            #recaptcha_fail_div {
                margin-top: 20px;
                margin-bottom: 10px;
                margin-left: 112px;
                border:medium groove #A00;
                border-radius: 5px;
                border:medium groove #A00;
                padding:3px;
                background-color:transparent;
                width:350px;
                color:#900;
                font-weight:bold;
                font-size:80%;
            }
      
        </style>
    </head>
    <body>
        <div id="contact-wrapper">
            <div id="contact-area">
                <form method="post" action="">
                    <label for="Name"><span style="color: red; font-size: 100%">*&nbsp;</span>Name:</label>
                    <input type="text" name="Name" id="Name" value="<?php echo isset($_POST['Name']) ? $_POST['Name'] : '' ?>" />
                    
                    <label for="City">City:</label>
                    <input type="text" name="City" id="City" value="<?php echo isset($_POST['City']) ? $_POST['City'] : '' ?>" />
                    
                    <label for="Email"><span style="color: red; font-size: 100%">*&nbsp;</span>Email:</label>
                    <input type="text" name="Email" id="Email" value="<?php echo isset($_POST['Email']) ? $_POST['Email'] : '' ?>" />
                    
                    <label for="Subject">Subject:</label>
                    <input type="text" name="Subject" id="Subject" value="<?php echo isset($_POST['Subject']) ? $_POST['Subject'] : '' ?>" />
                    
                    <label for="Message"><span style="color: red; font-size: 100%">*&nbsp;</span>Message:</label>
                    <textarea name="Message" rows="20" cols="20" id="Message"><?php echo isset($_POST['Message']) ? $_POST['Message'] : '' ?></textarea>
                    
                    <p style="margin:20px auto 10px 112px;">Fields shown by <span style="color: red; font-size: 100%">*&nbsp;</span> are required.</p>
                        <div id="recaptcha_widget_div">
                            <?php
                                require_once('recaptchalib.php');
                                $publickey = "xxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; // you got this from the signup page
                                echo recaptcha_get_html($publickey);
                            ?>
                        </div>
                    <input type="submit" name="submit" value="Submit" class="submit-button" />
                </form>
                <div style="clear: both;">
                </div>
                <?php
                    if( isset($_POST['submit']) ) { 
                        $error = null;
                        require_once('recaptchalib.php');
                        $privatekey = "xxxxx-xxxxxxxxxxxxx_xxxxxxxxxxxxxxxxxxxx";
                        $Name = Trim(stripslashes($_POST['Name'])); 
                        $City = Trim(stripslashes($_POST['City'])); 
                        $Email = Trim(stripslashes($_POST['Email'])); 
                        $Subject = Trim(stripslashes($_POST['Subject']));
                        $Message = Trim(stripslashes($_POST['Message']));
                        if( !empty($Email) ){ 
                            list($emailPart, $domainPart) = explode('@', $Email);
                            $one=filter_var($Email, FILTER_VALIDATE_EMAIL);
                            $two=MailIPAddress($domainPart);
                            if (!(($one) && ($two))) {
                                $error .= '<li>Email is invalid .</li>';
                                echo '<div id="recaptcha_fail_div"> <ul>'. $error .'</ul></div>';
                                exit();
                            } 
                        }
                        $error .= ( empty($Name) )  ? '<li>You must enter a name.</li>' : null;
                        $error .= ( empty($Email) ) ? '<li>Email is blank.</li>' : null;
                        $error .= ( empty($Message) ) ? '<li>You must enter some comments or questions.</li>' : null;
                        
                        $resp = recaptcha_check_answer ($privatekey, 
                                                        $_SERVER["REMOTE_ADDR"], 
                                                        $_POST["recaptcha_challenge_field"], 
                                                        $_POST["recaptcha_response_field"]);                        
                        $error .= ( !($resp->is_valid) ) ? '<li>The captcha code entered is incorrect .</li>' : null;
                        if (!empty($error)) {
                            // What happens when the CAPTCHA was entered incorrectly
                            echo '<div id="recaptcha_fail_div"> <ul>'. $error .'</ul></div>';
                            exit();
                        } 
                        //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>");
                        // dispatch thanks message using Boolean $posted
                        if ($posted){
                            echo '<div style=\'margin-top: 20px; margin-left:112px; border: 2px groove blue; border-radius:5px; padding-left: 10px; width:400px;\'>
                                     <p>Thanks By <a href="http://messiahpsychoanalyst.org">Dysprosium</a></p>
                                     <hr style=\'margin: 1px auto 1px auto; height: 1px; color: #fefefe; width: 82%;\'/> 
                                     <h1>Your message has been sent! Thanks for Your Message!</h1>
                                     <p><a href="Default.html">Click to go to Home page!</a></p>
                                  </div>';
                            //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>");
                        }                        
                    }
                ?>
            </div>
        </div>
        <?Php
            /**
             * http://www.electrictoolbox.com/php-get-mail-server-ip-address/
             * Get a mail server's IP address with PHP
             * Posted November 9th, 2012 in PHP by Chris Hope
             * Returns an IP address that mail can be delivered to for the passed in domain.
             *
             **/
            function MailIPAddress($domain) {
                $ip = false;
                $records = dns_get_record($domain, DNS_MX);
                $priority = null;
                foreach ($records as $record) {
                    if ($priority == null || $record['pri'] < $priority) {
                        $myip = gethostbyname($record['target']);
                        // if the value returned is the same, then the lookup failed
                        if ($myip != $record['target']) {
                            $ip = $myip;
                            $priority = $record['pri'];
                        }
                    }
                }
                if (!$ip) {
                    $ip = gethostbyname($domain);
                    // if the value returned is the same, then the lookup failed
                    if ($ip == $domain) {
                        $ip = false;
                    }
                }
                return $ip;
            }
        ?>
    </body>
</html>

As this is a long piece of codes, I explain its detail in the next post. Please click here.

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

No comments:

Post a Comment