How to create an iPhone like Slide-to-Send PHP contact form

Contact forms have always played an important role for webmasters to collect data, feedback from their visitors. There are many tutorials present on the internet explaining how to make a PHP/HTML 5 driven contact forms. However, most of them (not all of them) are missing out on the element of design and user interface. So in this tutorial I am going to show you how to create a contact form which runs exactly in the same way as an iPhone’s slide-to-unlock home screen.

Features

This contact form has got on page javascript validation which means that the page will not reload if incorrect data is put in. There is also no need for Captcha as the slide to send feature takes it place. The form is elegantly styled in css 3 with perfect form input interface. Moreover, to make it look more attractive, I’ve also added Google maps on top of the form which can be easily changed to your desired location.

What you need to do

Simply, to get this form running, you need to upload the files to your web server and edit the file named process/mailfunction.php.

This is pretty simple to edit, you just need to change the domain@yourdomain.com email address to your own email address and if you want to, you can change the ‘subject’ of the email you’ll receive as soon as a visitor sends in the data. You can do this any text editor.

$headers = 'From: '.WebsiteName.'' . "\r\n" .

This code you’ll find on the 26th line of the file. You can edit the ‘website name’ and change it to your own domain.

Locate this code in the index.html file and open up https://maps.google.com/ now search for your desired location. Then click on the embed/link option and replace the the link ‘source’ with the one you’ve copied. And you’ll be done with it 🙂

If you have questions/queries, you can ask me in the comments. I’ll be glad to hear back from you guys.