Components

Components

CONTACT FORM


Examples

Name

Email


Phone


Messagge


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

SEND A MESSAGGE

Name

Email


Phone


Messagge


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

Name

Email


Phone


Messagge


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

Installation

<script src='../scripts/php/contact-form.js'></script>
<link rel="stylesheet" href="../scripts/php/contact-form.css">

Usage

<form action="http://www.framework-y.com/scripts/php/contact-form.php" class="form-box form-ajax" method="post" data-email="federico@pixor.it">
    <div class="row">
        <div class="col-md-6">
            <p>Name</p>
            <input id="name" name="name" placeholder="name" type="text" class="form-control form-value" required>
        </div>
        <div class="col-md-6">
            <p>Email</p>
            <input id="email" name="email" placeholder="email" type="email" class="form-control form-value" required>
        </div>
    </div>
    <hr class="space xs" />
    <div class="row">
        <div class="col-md-12">
            <p>Phone</p>
            <input id="phone" name="phone" placeholder="phone" type="text" class="form-control form-value">
            <hr class="space xs" />
            <p>Messagge</p>
            <textarea id="messagge" name="messagge" class="form-control form-value" required></textarea>
            <hr class="space s" />
            <button class="anima-button circle-button btn-sm btn" type="submit"><i class="fa fa-envelope-o"></i>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>
<form action="http://www.framework-y.com/scripts/php/contact-form.php" class="form-box form-ajax" method="post">
    <div class="row">
        <div class="col-md-6">
            <p>Name</p>
            <input id="name" name="name" placeholder="name" type="text" class="form-control form-value" required>
        </div>
        <div class="col-md-6">
            <p>Email</p>
            <input id="email" name="email" placeholder="email" type="email" class="form-control form-value" required>
        </div>
    </div>
    <hr class="space xs" />
    <div class="row">
        <div class="col-md-6">
            <p>Extra 1</p>
            <input id="extra" name="extra" type="text" class="form-control form-value">
        </div>
        <div class="col-md-6">
            <p>Extra 2</p>
            <input id="extra-2" name="extra-2" data-name="Extra label" placeholder="Type a text" type="text" class="form-control form-value">
        </div>
    </div>
    <hr class="space xs" />
    <div class="row">
        <div class="col-md-12">
            <p>Messagge</p>
            <textarea id="messagge" name="messagge" class="form-control form-value" required></textarea>
            <hr class="space s" />
            <button class="anima-button circle-button btn-sm btn" type="submit"><i class="fa fa-envelope-o"></i>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>
<script src="https://www.google.com/recaptcha/api.js"></script>
<form action="http://www.framework-y.com/scripts/php/contact-form.php" class="form-box form-ajax" method="post" data-email="federico@pixor.it">
    <div class="row">
        <div class="col-md-6">
            <p>Name</p>
            <input id="name" name="name" placeholder="name" type="text" class="form-control form-value" required>
        </div>
        <div class="col-md-6">
            <p>Email</p>
            <input id="email" name="email" placeholder="email" type="email" class="form-control form-value" required>
        </div>
    </div>
    <hr class="space xs" />
    <div class="row">
        <div class="col-md-12">
            <p>Phone</p>
            <input id="phone" name="phone" placeholder="phone" type="text" class="form-control form-value">
            <hr class="space xs" />
            <p>Messagge</p>
            <textarea id="messagge" name="messagge" class="form-control form-value" required></textarea>
            <hr class="space xs" />
            <div class="g-recaptcha" data-sitekey="YOUR_KEY"> </div>
            <button class="anima-button circle-button btn-sm btn" type="submit"><i class="fa fa-envelope-o"></i>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>

Main settings

Name Type Description
Initialization Mixed To make the form work you must first perform the following step:

1 ) Replace form action URL http://www.framework-y.com/scripts/php/contact-form.php with your domain url.
2 ) This step is required only if you not set the attribute data-email on the form. Open file scripts/php/contact-form.php and replace first row $emailTo = '<fede@pixor.it>'; with your recipient's email, the email where you want receive the messagges.

The form must use class form-ajax.
Set recipient's email HTML Add attribute data-email="your-email@domain.com" to form object. Ex. <form action="http://www.your-domain.com/scripts/php/contact-form.php" class="form-box form-ajax" role="form" method="post" data-email="federico@pixor.it"> .. </form>
Set email subject HTML Add attribute data-subject="your subject text" to form object. Ex. <form action="http://www.your-domain.com/scripts/php/contact-form.php" class="form-box form-ajax" role="form" method="post" data-subject="New message"> .. </form>.
Attention that the subject may stop the email to work. If email not work try to edit the file contact-form.php by replace the code if (mail($emailTo, $subjectPrefix, $body, $headers)) with if (mail($emailTo, "TEST", $body, $headers)).
Add new field HTML To add a new field add the HTML of the new field into the form and edit attributes id,name. The input field must use class form-value. The final email will contain this field automatically, the markup will be mycustom: text. You can set the email label also with attribute data-name="mycustom". Ex. <input id="mycustom" name="mycustom" placeholder="..." type="text" class="form-control form-value">.
Required field HTML To set a field as required add attribute required to input field like showed on above examples.
Validation and input types HTML Currently only validation available is the HTML5 validation. You can validate the following inputs:
Name Description Attribute Example
Empty Check if the field is empty. required <input type="text" required>
Email Check if the field contain a valid email. email <input type="email">
URL Check if the field contain a valid URL/link. url <input type="url">
Number Check if the field contain a valid number. number <input type="number">
Documentation:
Input types HTML Currently only validation available is the HTML5 validation. You can validate the following inputs:
Name Code
Input text <input type="text id="" name="" placeholder="" class="form-control form-value"">
Textarea <textarea id="" name="" placeholder="" class="form-control form-value"></textarea>
Checkbox <input type="checkbox" id="" name="" value="" class="form-control form-value"> Text
Radio <input type="radio" id="" name="" value="" class="form-control form-value"> Text
Select <select id="" name="" class="form-control form-value"><option value="">Text</option><option value="">Text</option></select>
Horizontal form CSS To change the layout of the form from vertical to horizontal, inline, add the class form-inline to the form object.
Captcha HTML To add the Google Captcha add the script <script src="https://www.google.com/recaptcha/api.js"></script>, then go to www.google.com/recaptcha/ and click the get reCaptcha button to get the key, replace the example [YOUR_KEY] of above snippets with your key.
Problems? Mixed If the email is not received try the following:
1 ) Send the email to a email @gmail.com, @live.com or to other professional email services, not use emails @yourdomain.
2 ) Edit the file scripts/php/contact-form.php and replace $subjectPrefix with a string like "abcde".
3 ) Check that your hosting support the email service by download the below file sendmail.php and upload it to your root site folder, then open it by go to his url, 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 not support the emails.

DATE PICKER


Examples

Check-in

Check-out


Nights

Adults

Childrens

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

Installation

<script src='../scripts/php/datepicker.min.js'></script>
<link rel="stylesheet" href="../scripts/php/contact-form.css">

Usage

<form action="http://www.framework-y.com/scripts/php/contact-form.php" class="form-box form-ajax" method="post">
    <div class="row">
        <div class="col-md-6">
            <p>Check-in</p>
            <input name="checkin" id="checkin" type="text" data-toggle="datepicker" class="form-control form-value" placeholder="Check-in" required>
        </div>
        <div class="col-md-6">
            <p>Check-out</p>
            <input name="checkout" id="checkout" type="text" data-toggle="datepicker" class="form-control form-value" placeholder="Check-out" required>
        </div>
        <hr class="space s" />
        <div class="col-md-4">
            <p>Nights</p>
            <select name="nights" id="nights" class="form-control form-value">
                <option value="0">0</option>
                <option value="1" selected="">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
            </select>
        </div>
        <div class="col-md-4">
            <p>Adults</p>
            <select name="adults" id="adults" class="form-control form-value" required>
                <option value="0">0</option>
                <option value="1" selected="">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
            </select>
        </div>
        <div class="col-md-4">
            <p>Childrens</p>
            <select name="childrens" id="childrens" class="form-control form-value">
                <option value="0">0</option>
                <option value="1" selected="">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
            </select>
        </div>
        <div class="col-md-12 text-center">
            <button class="anima-button circle-button btn-sm btn" type="submit"><i class="fa fa-check"></i>Check Availability</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>

Main settings

Name Type Description
Initialization HTML attribute To set a date picker add attribute data-toggle="datepicker" to input object. Ex. <input type="text" data-toggle="datepicker" class="form-control form-value" placeholder="Check-in" required>

Complete documentation and external resources