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.
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.
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. If you need help, with embeding the map location, check out how to Embed a map.
Your Turn to Talk
What’s your opinion about this tutorial? If you have anything to say, please share your opinion in the comments section. Your opinion matters, unless it is a Spam.
You can view the Slide to Send Contact Form DEMO in the section below.
View Demo – Slide to Send Contact Form like the iPhone Slider
View the DEMO – Slide to Send Contact Form. This is the index.html file I am talking about, you can view the source to see the code.