Preview
Contact form - Inline
Usage
<form action="themekit/scripts/contact-form/contact-form.php" class="form-box form-ajax" method="post" data-email="example@domain.com">
<div class="row">
<div class="col-lg-6">
<p>Name</p>
<input id="name" name="name" placeholder="Name" type="text" class="input-text" required>
</div>
<div class="col-lg-6">
<p>Email</p>
<input id="email" name="email" placeholder="Email" type="email" class="input-text" required>
</div>
<div class="col-lg-6">
<p>Check-in</p>
<input name="checkin" id="checkin" type="text" data-toggle="datepicker" autocomplete="off" class="input-text">
</div>
<div class="col-lg-6">
<p>Check-out</p>
<input name="checkout" id="checkout" type="text" data-toggle="datepicker" autocomplete="off" class="input-text">
</div>
<div class="col-lg-4">
<p>Nights</p>
<select name="nights" id="nights" class="input-select">
<option value="0">0</option>
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-lg-4">
<p>Adults</p>
<select name="adults" id="adults" class="input-select" required>
<option value="0">0</option>
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-lg-4">
<p>Childrens</p>
<select name="childrens" id="childrens" class="input-select">
<option value="0">0</option>
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<p>Phone</p>
<input id="phone" name="phone" placeholder="Phone" type="text" class="input-text">
<p>Message</p>
<textarea id="message" name="message" class="input-textarea" placeholder="Write something ..." required></textarea>
<div class="form-checkbox">
<input type="checkbox" id="check" name="check" value="check" required>
<label for="check">You accept the terms of service and the privacy policy</label>
</div>
<button class="btn btn-sm" type="submit">Send message</button>
<div class="success-box">
<div class="alert alert-success">Congratulations. Your message has been sent successfully</div>
</div>
<div class="error-box">
<div class="alert alert-warning">Error, please retry. Your message has not been sent</div>
</div>
</form>
<form action="themekit/scripts/contact-form/contact-form.php" class="form-box form-ajax form-inline" method="post" data-email="example@domain.com">
<div class="row">
<div class="col-lg-3">
<input id="name" name="name" placeholder="Name" type="text" class="input-text" required>
</div>
<div class="col-lg-3">
<input id="email" name="email" placeholder="Email" type="email" class="input-text" required>
</div>
<div class="col-lg-3">
<input id="phone" name="email" placeholder="Phone" type="email" class="input-text" required>
</div>
<div class="col-lg-3">
<button class="btn btn-sm" type="submit">Send message</button>
</div>
</div>
<div class="success-box">
<div class="alert alert-success">Congratulations. Your message has been sent successfully</div>
</div>
<div class="error-box">
<div class="alert alert-warning">Error, please retry. Your message has not been sent</div>
</div>
</form>
Installation
<script src="themekit/scripts/contact-form/contact-form.js"></script> <script src="themekit/scripts/contact-form/datepicker.min.js"></script> <link rel="stylesheet" href="themekit/css/contact-form.css">
Settings
| Name | Type | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Initialization | -- |
|
||||||||||
| SMTP | -- |
To use your SMTP server for sending the emails open the file themekit\scripts\contact-form\phpmailer\config.php and edit the server informations with your ones.
After the config.php file has been configured you need to add the attribute data-engine="smtp" to the component.
Ex: <form action="" data-engine="smtp"> ... </form>. The SMTP method allow you to send also HTML emails. If email sengin fails check the browser's console for errors.
This feature is provided by PHPMailer.
|
||||||||||
| Form options | Attribute |
|
||||||||||
| Input types | HTML |
|
||||||||||
| Required field | Attribute |
To set a field as required add the attribute required to the input item.
|
||||||||||
| Inline form | CSS |
Add the class form-inline to the form component to set the horizontal layout.
|
||||||||||
| Checkbox validation | HTML |
To add a checkbox validation that force the user to check it before submitting the message add the following code just above the send button.
<div class="form-checkbox">
<input type="checkbox" id="check" name="check" value="check" required>
<label for="check">Text</label>
</div>
|
||||||||||
| Captcha | -- |
|
||||||||||
| Problems? | -- |
|