Contact form

Php contact form documentation

  1. Home
  2. Components
  3. Contact form

Contact form

Examples

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
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='../../HTWF/scripts/php/contact-form.js'></script>
<link rel="stylesheet" href="../../HTWF/scripts/php/contact-form.css">

Usage

<form action="http://www.framework-y.com/HTWF/scripts/php/contact-form.php" class="form-box form-ajax" method="post" data-email="">
    <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 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/HTWF/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 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/HTWF/scripts/php/contact-form.php" class="form-box form-ajax form-inline" method="post" data-subject="Framework Y Email" data-email="">
    <div class="row">
        <div class="col-md-3">
            <input id="name" name="name" placeholder="Name" type="text" class="form-control form-value" required>
        </div>
        <div class="col-md-3">
            <input id="email" name="email" placeholder="Email" type="email" class="form-control form-value" required>
        </div>
        <div class="col-md-3">
            <input id="phone" name="email" placeholder="Phone" type="email" class="form-control form-value" required>
        </div>
        <div class="col-md-3">
            <button class="btn-sm btn" 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> 

<form action="http://www.framework-y.com/HTWF/scripts/php/contact-form.php" class="form-box form-ajax" method="post" data-email="">
    <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" />
            <button class="anima-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/HTWF/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 HTWF/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.
SMTP & HTML Mixed To use your SMTP server for sending the emails open the file HTWF\scripts\php\phpmailer\config.php and edit the server informations with yours. After the config.php file has been setted you need to add the attribute data-engine="smtp" to the form object. Example: <form action="" data-eingine="smtp"> ... </form>

The SMTP method allow you to send also HTML emails. If you have problems you can check the browser's console for errors. This feature is provided by PHPMailer.

PHPMailer
Set recipient's email HTML Add attribute data-email="your-email@domain.com" to form object. Ex. <form action="http://www.your-domain.com/HTWF/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/HTWF/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 Validation and attributes
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>
Inline form CSS To change the layout of the form from vertical to horizontal, inline, add the class form-inline to the form object.
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 HTWF/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='../../HTWF/scripts/php/datepicker.min.js'></script>
<link rel="stylesheet" href="../../HTWF/scripts/php/contact-form.css">

Usage

<form action="http://www.framework-y.com/HTWF/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 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

Documentation Plugin website