A Comprehensive Guide to Creating PHP Contact Form of the Nature of the iPhone Slider
To run a successful website, you need a concoction of several methodologies which combined pour in the best results for you. Now, among all those significant methodologies, collecting data pertaining to your website’s users – new and existing – is right up there among the most effective methods. And when you talk of collecting data and fetching the feedback from your users, contact form is the go-to source.
Due to the irreplaceable role played by contact forms that webmasters unfailingly rely on them for getting a good enough idea of whom they are interacting with and whether the service they are providing echoes with the requirements of their visitors. And that’s where creating highly interactive and sleek contact forms comes into play, since it remains a fact that humdrum forms hardly capture the attention of users and end up being totally ignored.
Now, from the last few years, owing to the rising importance of creating great contact forms, PHP has played a pivotal role since the PHP-built contact forms give the webmasters a whole array of options at their behest. That said, even though they are functionally very rich and accomplished, the overall visual appeal lacks in certain respects that eventually leads to not so great numbers being achieved. For many websites, the contact form is a direct way to the conversion rates or the lack of it, so with each user not deciding to fill the contact form, they lose a potential customer. Thus, with PHP already being well equipped to build fully functional forms, let’s see how we can add an attractive visual interface to the form. And what’s better than having something that looks like the iPhone slider – abundantly sleek and user friendly.
Features of the iPhone Slider Contact Form
As an example, let’s take the contact form shown in the picture at the beginning of this post. The form looks suave and tailored for user friendliness, and the “Slide to Send” button further adds to both the facets.
What this contact form essentially has is a Javascript validation. This validation ensures that the loading of the page fails when you are putting in data that does not follow certain patterns or is required. One of the features that makes this form even more significantly important is the fact that you do not need Captcha with it, since the Slide to Send feature works as a perfect replacement. So if you are already wondering how to prevent spam from pouring in without Captcha, rest assured that this slide button will do the job in a highly efficient manner. You won’t need Captcha or any other anti comment spammer tool.
As far as the styling of the form is concerned, it gets its styling from the rich CSS3 language. It is not a concealed fact anymore that CSS3 can help you build awesome designs of which are not possible with other languages or with the previous CSS versions.
Now, what we have done with the form to make it even more dynamic, usable and attractive, we have gone on to adding Google Map feature to it, that takes its functional abilities to a new level. You can make the necessary changes to the google Map, depending on your location.
All you got to do is to is to upload the files (DEMO IS AT THE END OF THIS POST) to your web server and make some tweaks to the mailfunction.php file located in the process folder.
Since you are not able to view the source code of the “mailfunction.php” file, I am including the code below. There are 2 lines of code that you need to change: Line 4 with your email address and Line 25, replace ‘WEBSITENAME’ with your domain name.
<?php
//email receiver and subject//
$emailSubject = 'Slide to Send Contact Form Response';
$sendemailto = 'name@domain.com'; /*** Change this to your email address ***/
//declare our assets//
$nameField = $_POST['name'];
$emailField = $_POST['email'];
$phoneField = $_POST['phone'];
$companyField = $_POST['company'];
$addressField = $_POST['address'];
$messageField = $_POST['message'];
$body = <<<EOD
<br><br>
Name: $nameField <br>
Email: $emailField <br>
Phone: $phoneField <br>
Company: $companyField <br>
Address: $addressField <br>
Message: $messageField <br>
EOD;
/*** Change 'WEBSITENAME' to your DOMAIN name ***/
$headers = 'From: '.WEBSITENAME.'' . "\r\n" .
'Reply-To: '.$emailField.'' . "\r\n" .
'Content-type: text/html; charset=utf-8' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
$success = mail($sendemailto, $emailSubject, $body, $headers);
if($success){
echo 'OK';
}
else{
echo 'NOT OK';
}
?>Changing the Google Map
Below is the google Map code that I am using in the index.html file. I am using Boston, MA as a reference point. You can choose your preferable location in Google Maps. On the embed link option, simply replace the link source of your choice.
<!--Google Map Iframe.-->
<iframe width="96%" height="150" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed?pb=!1m19!1m12!1m3!1d94411.73947848775!2d-71.05715705!3d42.31337345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m4!1i0!3e1!4m0!4m0!5e0!3m2!1sen!2sus!4v1422794887869" style="border:0"></iframe><br />