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=”http://designpotato.com/slide-to-send-php-contact-form” target=”blank” ]View Demo[/button]
[button color=”red” size=”medium” link=”http://designpotato.com/slide-to-send-php-contact-form.zip” target=”blank” ]Download[/button]
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 = 'email@example.com';//Change this to your email address//
This is pretty simple to edit, you just need to change the firstname.lastname@example.org 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="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=karachi&aq=&sll=37.0625,-95.677068&sspn=39.371738,86.572266&ie=UTF8&hq=&hnear=Karachi,+Karachi+District,+Sindh,+Pakistan&t=m&ll=24.893911,67.027588&spn=0.186854,0.714111&z=10&iwloc=A&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