Create a jquery contact form

Click here to download all the files you will need. Then extract the zip.
Create the following pages in your index.html for your mobile website:
Contact Us
<!–CONTENT–>
<div data-role=”content”>
<h2>Cooroy Sales Office</h2>
<p>3 Myall Street, Cooroy, QLD 4563, Australia<br>
<em>Open 8am – 4.30pm
Monday – Friday</em></p>
<!–CLICK TO CALL BUTTON–>
<p><a href=”tel:+61754426413″ data-role=”button”><img src=”images/call-icon.png” alt=”Click to Call Now!” width=”40″ height=”40″> Click to Call Now!</a></p>
<p>Please fill out the form below with your enquiry and we will respond to you shortly.</p><form method=”post” action=”mail.php” data-ajax=”false”>
Name: <input type=”text” id=”name” name=”name” value=”” placeholder=”Name” required/><br>
E-mail: <input type=”email” id=”mail” name=”mail” value=”” placeholder=”E-mail” required/><br>
Phone Number: <input type=”tel” id=”telephone” name=”telephone” value=”” placeholder=”Phone”/><br>
Subject: <input type=”text” id=”subject” name=”subject” value=”” placeholder=”Subject” required/><br>
Message:<br>
<textarea style=”height:100px;” id=”comments” name=”comments” placeholder=”Enter your message here…” required></textarea> <br />
<input type=”submit” value=”Send” name=”submit”>
</form>
</div>
<!–END CONTENT–>
<!–FOOTER–>
<div data-role=”footer”>
<a href=”http://www.facebook.com/share.php?u=http://www.facebook.com/ausmar.homes” data-role=”button” data-icon=”star” data-theme=”a” data-rel=”dialog”>SHARE</a>
<a href=”http://www.ausmarhomes.com.au” data-role=”button” data-icon=”plus” data-theme=”a”>FULL SITE</a>
<a href=”” data-role=”button” data-icon=”arrow-u” data-theme=”a” style=”float:right;”>TOP</a>
</div>
<!–END FOOTER–>
</div>
<!–END CONTACT–>Contact Page
<!–CONTACT SUCCESS–>
<div data-role=”page” id=”succes” data-theme=”a” data-add-back-btn=”true”>
<!–HEADER–>
<div data-role=”header”>
<h1>Sent Successfully</h1>
<a href=”#contactform” data-icon=”arrow-l” data-direction=”reverse” data-ajax=”false” data-theme=”a”>Back</a>
<a href=”index.html” data-icon=”home” data-iconpos=”notext” data-direction=”reverse” data-ajax=”false” data-theme=”a”>Home</a>
<!–END HEADER–>
<!–CONTENT–>
<div data-role=”content” data-theme=”a”>
<h3>The contact form submission was sent succesfully!</h3>
</form>
</div>
<!–END CONTENT–>
<!–FOOTER–>
<div data-role=”footer”>
<a href=”http://www.facebook.com/share.php?u=http://www.facebook.com/ausmar.homes” data-role=”button” data-icon=”star” data-theme=”a” data-rel=”dialog”>SHARE</a>
<a href=”http://www.ausmarhomes.com.au” data-role=”button” data-icon=”plus” data-theme=”a”>FULL SITE</a>
<a href=”” data-role=”button” data-icon=”arrow-u” data-theme=”a” style=”float:right;”>TOP</a>
</div>
<!–END FOOTER–>
</div>
<!–END CONTACT SUCCESS–>

Error Page
<!–CONTACT ERROR–>
<div data-role=”page” id=”error” data-theme=”a” data-add-back-btn=”true”>
<!–HEADER–>
<div data-role=”header”>
<h1>Error</h1>
<a href=”#contactform” data-icon=”arrow-l” data-direction=”reverse” data-ajax=”false” data-theme=”a”>Back</a>
<a href=”index.html” data-icon=”home” data-iconpos=”notext” data-direction=”reverse” data-ajax=”false” data-theme=”a”>Home</a>
</div>
<!–END HEADER–>
<!–CONTENT–>
<div data-role=”content” data-theme=”a”>
<h3>Error. Please fill out all form areas.</h3>
</div>
<!–END CONTENT–>
<!–FOOTER–>
<div data-role=”footer”>
<a href=”http://www.facebook.com/share.php?u=http://www.facebook.com/ausmar.homes” data-role=”button” data-icon=”star” data-theme=”a” data-rel=”dialog”>SHARE</a>
<a href=”http://www.ausmarhomes.com.au” data-role=”button” data-icon=”plus” data-theme=”a”>FULL SITE</a>
<a href=”” data-role=”button” data-icon=”arrow-u” data-theme=”a” style=”float:right;”>TOP</a>
</div>
<!–END FOOTER–>
</div>
<!–END CONTACT ERROR–>
Copy the mail.php file into the same location as your index.html
Edit mail.php in Dreamweaver. Edit $email_to = “info@pietervanos.net”; and anything else you want to change.
Upload and test the files.

Categories

Create a jquery contact form

Leave a Reply Cancel reply