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>
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.

DATE PICKER


Examples

Check-in

Check-out


Nights

Adults

Childrens

Availability

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">
            <p style="visibility:hidden">Availability</p>
            <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