Manual for Vanilla Form v. 2.1.0

Vanilla Form - User Manual

Introduction

Thank you for using Vanilla Form. This manual shows you how easy it is to integrate Vanilla Form with your website. Vanilla Form uses JavaScript instructions to send filled data to PHP file, which works on server's end. PHP file parses data and calls PHP native function mail(). Thanks to JavaScript Asynchronous Requests your website doesn't need to reload, which improves your User Experience. Vanilla Form doesn't use annoying captcha, but it has built-in anti bot protection.

Form is an independent software which makes it fast, lightweight and scalable. You don't need to use 3rd party libraries like jQuery. But if you want to, you can easily integrate it with any library you want.

Installation - quick start

Step 1

Update PHP File and specify recipients e-mail address by filling emailRecipients and emailSender options. These email addresses will receive all form inquires/messages.

/**
 * Recipient's e-mail. To this e-mail email will be sent.
 * E.g. Single recipient
 * 'emailRecipients' => 'john@domain.com',
 *
 * E.g. Multiple recipients
 * 'emailRecipients' => 'john@domain.com, andy@domain.com',
 */
'emailRecipients' => 'your-email@domain.com',

/**
 * If is not empty it sets a header From in e-mail message (sets sender e-mail).
 * Note: some hosting servers can block sending e-mails with custom From field in header.
 * If so, leave this field as empty.
 * E.g. Single recipient
 * 'emailSender' => 'john@domain.com',
 */
'emailSender' => 'your-email@domain.com'

After that upload this file on to your web page server. Remember to save URL for this file (it will be used in next step). To double check whether URL is valid open it in your web browser. You should see the word OK on your screen. This means that URL to PHP file is correct and PHP configuration has been done properly.

Step 2

Import Vanilla Form JavaScript file and CSS file into head section of your html document. Double check the path to these files is set correctly.

Tip: Importing minified files will increase speed of loading your web page, due the size of this files is lower.
<head>
    <!-- ...some head section content... -->
    <link rel="stylesheet" href="path/to/css/vanilla-form.min.css">
    <script src="path/to/css/vanilla-form.min.js"></script>
</head>

Insert HTML Form markup into your website. Make sure that the action attribute in form tag has correct path to PHP file and the method attribute is set to post.

<!-- Vanilla Form markup starts here -->
<form action="standard-contact-form.php" method="post" class="vanilla-form" novalidate="novalidate">
    <!-- Left column -->
    <div class="column-50">
        <input type="text" name="name" placeholder="Your name" required="required">
        <input type="email" name="email" placeholder="Your e-mail" required="required">
    </div><!--
        Right column
    --><div class="column-50">
    <input type="tel" name="tel" placeholder="Phone">
    <label class="custom-select">
        <select name="department">
            <option disabled selected>Select department</option>
            <option>Sales</option>
            <option>Marketing</option>
            <option>Customer Support</option>
            <option>Other</option>
        </select><span><!-- fake select handler --></span>
    </label>
    </div>
    <div class="column-100">
        <textarea name="message" placeholder="Type your message here..."></textarea>
        <label>
            <input type="checkbox" name="terms" value="true" required="required"><span><!-- fake checkbox --></span>
            <span class="wrapped-label">I agree to the <a href="#">Terms & Conditions</a>.</span>
        </label>
    </div>
    <div class="column-100 center">
        <input type="submit" value="Send" data-error="Fix errors" data-processing="Sending..." data-success="Thank you!">
    </div>
    <footer class="notification-box"></footer>
</form>
<!-- Vanilla Form markup ends here -->

Step 3

Finally we need to initialize Vanilla Form. Initialization needs to be done after the form markup is loaded. To do this, you need to set an event listener for DOMContentLoaded event. You can paste following code snippet into your JS file.

document.addEventListener("DOMContentLoaded", function () {
    var myForm;
    myForm = new VanillaForm(document.querySelector("form.vanilla-form"));
});

You prefer jQuery? No problem! Those who use jQuery should initialize form on document ready.

$(document).ready(function() {
    var myForm;
    myForm = new VanillaForm($("form.vanilla-form"));
});

That's all! Looking for more? Check the advanced customization options.

If you like this product and want to encourage me to provide constant improvements please rate it on Envato. Sky's the limit!