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

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.

View Demo Download

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.

slide-to-send-iphone-like-php-contact-form

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 = 'domain@yourdomain.com';//Change this to your email address//

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.

Advertisement

How to change the Google Map Area

<iframe width="96%" height="150" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;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 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.

Credits for Iphone Slide feature: www.aboone.com

About Ali Zohaib

O-level student at St. Patrick’s High School, Karachi. I am an avid designer, part-time blogger and technology enthusiast. Recently I became a Microsoft Certified Technology Specialist.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Scroll To Top