Preview

Name

Email

Check-in

Check-out

Nights

Adults

Childrens

Phone

Messagge

Congratulations. Your message has been sent successfully
Error, please retry. Your message has not been sent

Contact form - Inline

Congratulations. Your message has been sent successfully
Error, please retry. Your message has not been sent

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>Messagge</p>
    <textarea id="messagge" name="messagge" 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 messagge</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/php/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 messagge</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 --
  • Replace the form action URL action="themekit/scripts/php/contact-form.php" with your URL.
  • Set the attribute data-email="example@domain.com" and insert the recipent's email.
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-eingine="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
action="contact-form.php" Make sure this setting link to the contact-form.php file of your website.
data-email="example@domain.com" Set the recipeint's email. You can set it also by edit the file themekit/scripts/php/contact-form.php.
data-subject="" Set the recipeint's email subject.
Input types HTML
Text <input type="text" class="input-text" id="" name="" placeholder="">
Email <input type="email" class="input-text" id="" name="" placeholder="">
Select <select class="input-select" id="" name=""><option value="">Option</option></select>
Textarea <textarea class="input-textarea" id="" name="" placeholder=""></textarea>
Date picker <input type="text" data-toggle="datepicker" autocomplete="off" class="input-text" name="" id="">
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 --
  • Add the script <script src="https://www.google.com/recaptcha/api.js"></script>
  • Go to www.google.com/recaptcha/ and click the get reCaptcha button to get the key.
  • Add the code <div class="g-recaptcha" data-sitekey="YOUR_KEY"></div> into the form component, just above the send button.
Problems? --
  • Send the email to a professional email service like Gmail or Microsoft, don't use hosting emails @yourdomain.
  • Check that your hosting support the email service by download the file sendmail.php, open it and insert your email, upload it to your root site folder, then open it from the browser (ex. www.your-site.com/sendmail.php). When you open the page you must receive the message Success, message sent and receive the email, if not your hosting don't support the emails.
  • Use the SMTP feature.