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.

[divider][button color=”red” size=”medium” link=”” target=”blank” ]View Demo[/button]

[button color=”red” size=”medium” link=”” target=”blank” ]Download[/button]


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.

//email receiver and subject//
 $emailSubject = 'Contact Form Response';
 $sendemailto = '';//Change this to your email address//

This is pretty simple to edit, you just need to change the 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.



How to change the Google Map Area

<iframe width="96%" height="150" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=";source=s_q&amp;hl=en&amp;geocode=&amp;q=karachi&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=39.371738,86.572266&amp;ie=UTF8&amp;hq=&amp;hnear=Karachi,+Karachi+District,+Sindh,+Pakistan&amp;t=m&amp;ll=24.893911,67.027588&amp;spn=0.186854,0.714111&amp;z=10&amp;iwloc=A&amp;output=embed"></iframe>

Locate this code in the index.html file and open up 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.

Credits for Iphone Slide feature:

Written by Ali Zohaib

Currently studying Computer Science at LUMS. I am an avid designer, part-time blogger and technology enthusiast.

Leave a Reply

Your email address will not be published. Required fields are marked *

Top 9 Online Shopping Websites

5 of the Most Reliable Websites to Earn Money by tutoring Online