Template comes with ready to use:
- Contact Form
All needed files are in /form directory.
Remember to includeon page.
To configure form just edit form/config.php and change e-mails to your own :
|
1 2 |
$to = "mail@example.com"; $from = "mail@example.com"; |
That’s it!
Contact Form
{Theme} has three kinds of design for contact form:
Type 1
HTML markup
–> input-typeFirst
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<form action="assets/form/send.php" method="post" data-email-subject="Contact Form" data-show-errors="true" class="contactForm validateIt"> <div class="row ct-u-paddingTop25"> <div class="col-lg-4 col-md-4 col-sm-4"> <div class="form-group"> <label for="name" class="control-label ct-u-fontSize14 ct-u-fontTypeRegular">Name</label> <input type="text" id="name" placeholder="" required="" class="form-control input-sm input-typeFirst"> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4"> <div class="form-group"> <label for="email" class="control-label ct-u-fontSize14 ct-u-fontTypeRegular ">E-Mail</label> <input type="email" id="email" placeholder="" required="" class="form-control input-sm input-typeFirst"> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4"> <div class="form-group"> <label for="phone" class="control-label ct-u-fontSize14 ct-u-fontTypeRegular ">Phone</label> <input type="text" id="phone" placeholder="" required="" class="form-control input-sm input-typeFirst"> </div> </div> </div> <div class="row ct-u-mobileTextCenter"> <div class="col-lg-4 col-md-4 col-sm-6 ct-u-marginTopMinus5"> <div class="form-group"> <label for="guests" class="control-label ct-u-fontSize14 ct-u-fontTypeRegular">Guests (Amount)</label> <input type="text" id="guests" placeholder="" required="" class="form-control input-sm input-typeFirst"> </div> </div> <div class="col-lg-4 col-md-4 col-sm-6 ct-u-marginTopMinus5"> <div class="form-group"> <label for="date" class="control-label ct-u-fontSize14 ct-u-fontTypeRegular ">Date</label> <input type="email" id="date" placeholder="" required="" class="form-control input-sm input-typeFirst"> </div> </div> <div class="col-lg-4 col-md-4 col-sm-12 ct-u-marginTopMinus5"> <div class="form-group"> <label for="time" class="control-label ct-u-fontSize14 ct-u-fontTypeRegular ">Time</label> <select id="time" tabindex="-1" class="selectized" style="display: none;"><option value="9" selected="selected">09:00 AM</option></select><div class="selectize-control single"><div class="selectize-input items full has-options has-items"><div data-value="9" class="item">09:00 AM</div><input type="text" autocomplete="off" tabindex="" style="width: 4px;"></div><div class="selectize-dropdown single" style="display: none;"><div class="selectize-dropdown-content"></div></div></div> </div> </div> </div> <div class="row ct-u-paddingBottom20"> <div class="col-lg-12 col-md-12 col-sm-12 ct-u-marginTopMinus5"> <div class="form-group"> <label for="message" class="control-label ct-u-fontSize14 ct-u-fontTypeRegular ">Special Requests</label> <textarea rows="2" placeholder="" id="message" class="form-control input-typeFirst"></textarea> </div> </div> </div> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 ct-u-marginTopMinus5 text-center"> <button type="submit" class="btn btn-primary btn-iconType btn-xs">book a table<span data-bg="../assets/images/demo-content/delimondo/icon_book_small.png" class="ct-js-background" style="background-image: url(http://localhost:63342/delimondo/HTML/assets/images/demo-content/delimondo/icon_book_small.png); background-repeat: repeat;"></span></button> </div> </div> </form> |
Screen shot
Contact Form 1
Type 2
HTML markup
–> input-typeSecond
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<form action="assets/form/send.php" method="post" data-email-subject="Contact Form" data-show-errors="true" class="contactForm validateIt"> <div class="row ct-u-paddingBottom15"> <div class="col-md-12"> <div class="col-lg-6 col-md-6 col-sm-6"> <div class="form-group"> <label class="control-label ct-u-fontSize16 ct-u-fontTypeBold ct-u-colorWhite text-uppercase ct-u-paddingBottom10">first name</label> <input type="text" placeholder="put in your first name" required="" class="form-control input-lg input-typeSecond"> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6"> <div class="form-group"> <label class="control-label ct-u-fontSize16 ct-u-fontTypeBold ct-u-colorWhite text-uppercase ct-u-paddingBottom10">last name</label> <input type="text" placeholder="put in your last name" required="" class="form-control input-lg input-typeSecond"> </div> </div> </div> </div> <div class="row ct-u-paddingBottom15"> <div class="col-md-12"> <div class="col-lg-6 col-md-6 col-sm-6"> <div class="form-group"> <label class="control-label ct-u-fontSize16 ct-u-fontTypeBold ct-u-colorWhite text-uppercase ct-u-paddingBottom10">email</label> <input type="email" placeholder="put in your email address" required="" class="form-control input-lg input-typeSecond"> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6"> <div class="form-group"> <label class="control-label ct-u-fontSize16 ct-u-fontTypeBold ct-u-colorWhite text-uppercase ct-u-paddingBottom10">phone</label> <input type="text" placeholder="put in your phone number" required="" class="form-control input-lg input-typeSecond"> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="col-lg-4 col-md-4 col-sm-6"> <div class="form-group ct-u-paddingBottom20"> <label class="control-label ct-u-fontSize16 ct-u-fontTypeBold ct-u-colorWhite text-uppercase ct-u-paddingBottom10">how many guests</label> <input type="email" placeholder="put in your email address" required="" class="form-control input-lg input-typeSecond"> </div> <div class="form-group"> <button type="submit" class="btn btn-link btn-xs btn-block">place a booking</button> </div> </div> <div class="col-lg-8 col-md-8 col-sm-6"> <div class="form-group"> <label class="control-label ct-u-fontSize16 ct-u-fontTypeBold ct-u-colorWhite text-uppercase ct-u-paddingBottom10">special requests</label> <textarea rows="5" placeholder="put in your requests" class="form-control input-typeSecond"></textarea> </div> </div> </div> </div> </form> |
Screen shot
Contact Form 2
Type 3
HTML markup
–> input-typeThird
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<form action="assets/form/send.php" method="post" data-email-subject="Contact Form" data-show-errors="true" class="contactForm validateIt"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group ct-u-paddingBottom15"> <input type="text" placeholder="FIRST NAME" required="" class="form-control input-md input-typeThird"> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group ct-u-paddingBottom15"> <input type="text" placeholder="LAST NAME" required="" class="form-control input-md input-typeThird"> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group ct-u-paddingBottom15"> <textarea rows="6" placeholder="COMMENT" class="form-control input-typeThird"></textarea> </div> </div> </div> </form> |
Screen shot
Contact Form 3
Options (can be changed in HTML) :
Options (can be changed in HTML) :
- Mail Subject – just change value in :
- Success Message – change successMessage div content
- Error Message – change errorMessage div content