Include CSS

Add required css file simple-forms.css to your page before closing tag </head>.

<!-- Simple Forms Styles -->
<link rel="stylesheet" href="simple-forms/css/simple-forms.css">

IMPORTANT: Please do not edit/change simple-forms.css file, use a custom css file instead.

Include JS

Add required simple-forms-translations.js and simple-forms.min.js files to your page before closing </body> tag, see example bellow.

<!-- Simple Forms Scripts -->
<script src="simple-forms/js/simple-forms-translations.js"></script>
<script src="simple-forms/js/simple-forms.min.js"></script>

Copy & paste form html markup into your page to get started.
If you get any errors please check connected assets path or open browser console (F12 Key) for errors description.

Form HTML Markup:

<!-- Required Form Wrapper -->
<div class="sf-wrapper">

    <!-- Form -->
    <form id="contact-form" class="simple-form" action="simple-forms/sendmail.php" method="post">

        <!-- Form Header -->
        <div class="form-heading">
            <h4>Contact US</h4>
            <p>
                We are here to help.
            </p>
        </div>
        <!-- Form Header -->

        <div class="grid">
            <div class="grid-col-md-6">
                <label>
                    <input type="text" name="name" value="" class="validate-name" min="2" placeholder="Name*" required>
                </label>
            </div>
            <div class="grid-col-md-6">
                <label>
                    <input type="text" name="phone" class="validate-phone" placeholder="Phone*" required>
                </label>
            </div>
        </div>

        <label>
            <input type="text" name="email" class="validate-email" value="" placeholder="E-mail address*">
        </label>

        <label>
            <input type="text" name="url" class="validate-email" value="" placeholder="Social Profile">
        </label>

        <label>
            <input type="date" name="date" class="validate-email" value="" placeholder="Pick a date">
        </label>

        <label>
            <select name="subject" title="demo" required>
                <option value="">Choose subject</option>
                <option value="Support">Support</option>
                <option value="Offer">Special offer</option>
                <option value="Offer">Other</option>
            </select>
        </label>

        <label>
            <textarea name="message" placeholder="Write your message here ..." required></textarea>
        </label>

        <!-- Drag & Drop Files Uploading -->
        <div class="simple-files">
            <label class="simple-file-label">
                <input type="file" name="files[]" multiple>
                <span class="simple-files-trigger"><strong>Select</strong> or drop files here.</span>
            </label>
        </div>

        <div class="form-submit text-center">
            <button type="submit">Send now</button>
        </div>

        <!-- Consent Checkbox -->
        <div class="consent">
            <label class="custom-checkbox-label">
                <input type="checkbox" class="simple-consent-checkbox" name="consent" value="agree" required="" checked>
                <span class="custom-checkbox-button"></span>

                By clicking the “Send now” button you agree to our <a href="#">Terms and Conditions</a>.
            </label>
        </div>

        <!-- Error & Info messages will show here -->
        <div class="server-response"></div>
    </form>
</div>

Basic configuration example

Paste the code bellow into your web page to configure your form.
Please follow the comments for available options.

<script>
    var simple_forms = new SimpleForms("#contact-form", {
    lang: "en",         // language for error/info strings
    theme: "white",     // form color theme, options: white | dark | purple | red | green | blue | faded-light | faded-dark
    style: "underline", // form fields style, options: none | underline | classic | classic-rounded | modern | modern-rounded
    files: {
        enabled: true,
        extensions: "gif jpg jpeg png pdf doc docx",
        min: 0,
        max: 10,
        maxFileSize: 24,                                                // Max allowed file size in MB, recommended size: 24
        filesUploadHandler: "simple-forms/files-upload-handler.php", // path to files upload handler, default: simple-forms/files-upload-handler.php
    },
});
</script>

NOTE: Replace #contact-form in first line with your form ID.
To bind multiple forms use class selector instead of ID.

A more complex initialization of your form could look like this:

<script>
    var simple_forms = new SimpleForms("#contact-form", {
    action: "simple-forms/sendmail.php", // set form action attribute, default value: simple-forms/sendmail.php
    lang: "en",                          // language for error/info strings
    theme: "white",                      // form color theme, options: white | dark | purple | red | green | blue | faded-light | faded-dark
    style: "underline",                  // form fields style, options: none | underline | classic | classic-rounded | modern | modern-rounded
    ajaxSubmit: true,                    // send form using AJAX (no page reload)
    validate: true,                      // enable form fields validation
    validateOnKeyup: true,               // validate form fields On KeyUp Event
    browserValidation: false,            // use browser validation
    tooltips: true,                      // show validation errors as tooltips, if false will show errors as strings bellow the field
    showErrors: true,                    // show validation errors
    responseOverlay: false,              // show errors in overlay (cover the form)
    focusErrorFields: true,              // focus error fields on form submit
    debug: true,                         // enable debugging mode (will show errors in browser console)
    hideFormAfterSubmit: false,          // hide the form after submit
    customSuccessMessage: "",            // overwrite server response with a custom message
    formCSS: "",                         // add css styles to the form, example: box-shadow: none;
    files: {
        enabled: true,                                               // enable files uploading
        extensions: "jpg jpeg svg png",                              // allowed extensions
        min: 0,                                                      // min required files count
        max: 10,                                                     // max allowed files count
        maxFileSize: 24,                                             // max file item size in MB
        filesUploadHandler: "simple-forms/files-upload-handler.php", // files upload handler, default: simple-forms/files-upload-handler.php
    },
    redirect: {
        enabled: true,                   // enable redirect after form submit
        url: "success.html",             // url to redirect to
        timeout: 3                       // redirect timeout (seconds), leave 0 for instant redirect
    },
    captcha: {
        enabled: true,                   // enable captcha
        type: "math",                    // set captcha type, options: math | recaptcha-v2
        siteKey: "",                     // recaptcha V2 SITE KEY, generate here: https://www.google.com/recaptcha/admin/create
        theme: ""                        // recaptcha theme color, options: light | dark
    },
    accessibility: {
        escapeReset: true,               // press ESC key to reset/clear all form fields and files
        tabHighlight: true               // press tab to highlight form fields
    },
    consent: true,                       // enable submit button after consent checkbox is checked
    validator: {
        rules: {                        // add custom validation rules
            ".validate-name": {         // select form field with class .validate-name
                required: true,         // add required attribute to form field
                min: 2,                 // set field min attribute
                max: 30,                // set field max attribute
                name: true              // attach NAME validation
            },
            ".validate-phone": {
                required: true,
                min: 8,
                max: 14,
                phone: true              // attach PHONE validation
            },
            ".validate-email": {
                required: true,
                min: 8,
                email: true              // attach EMAIL validation
            },
            ".validate-url": {
                required: true,
                min: 5,
                url: true                // attach URL validation
            },
            ".validate-date": {
                required: true,
                min: 6,
                date: true               // attach DATE validation
            }
        }
    },
});
</script>

Simple Forms Parameters Description

Parameters above are described in the table bellow. Everything you need to do with your form is probably described here.

var simple_forms = new SimpleForms("#contact-form", {
    files: {
        enabled: true,                                               // enable files uploading
        extensions: "jpg jpeg svg png",                              // allowed extensions
        min: 0,                                                      // min required files count
        max: 10,                                                     // max allowed files count
        maxFileSize: 24,                                             // max file item size in MB
        filesUploadHandler: "simple-forms/files-upload-handler.php", // files upload handler, default: simple-forms/files-upload-handler.php
    },
});

var simple_forms = new SimpleForms("#contact-form", {
    redirect: {
        enabled: true,       // enable redirect after form submit
        url: "success.html", // url to redirect to
        timeout: 3           // redirect timeout (seconds), leave 0 for instant redirect
    },
});

var simple_forms = new SimpleForms("#contact-form", {
    captcha: {
        enabled: true,          // enable captcha
        type: "recaptcha-v2",   // set captcha type, options: math | recaptcha-v2
        siteKey: "SITE_KEY",    // recaptcha SITE KEY, generate here: https://www.google.com/recaptcha/admin/create
        theme: "light"          // recaptcha theme color, options: light | dark
    },
});

var simple_forms = new SimpleForms("#contact-form", {
    accessibility: {
        escapeReset: true,  // press ESC key to reset/clear all form fields and files
        tabHighlight: true  // press tab to highlight form fields
    },
});

var simple_forms = new SimpleForms("#contact-form", {
    validator: {
        rules: {                   // add custom validation rules
            ".validate-name": {    // select form field with class .validate-name
                required: true,    // add required attribute to form field
                min: 2,            // set field min attribute
                max: 30,           // set field max attribute
                name: true         // attach NAME validation
            },
            ".validate-phone": {
                required: true,
                min: 8,
                max: 14,
                phone: true       // attach PHONE validation
            },
            ".validate-email": {
                required: true,
                min: 8,
                email: true       // attach EMAIL validation
            },
            ".validate-url": {
                required: true,
                min: 5,
                url: true         // attach URL validation
            },
            ".validate-date": {
                required: true,
                min: 6,
                date: true        // attach DATE validation
            },
        }
    },
});

Here is how you can add styles to the form quick and easy.
For example, let's add a custom 2px red border and remove form shadow using formCSS option.

var custom_css_demo_form = new SimpleForms("#custom_css_demo_form", {
    theme: "white",
    style: "modern-rounded",
    formCSS: "border: 2px solid red; box-shadow: none",
});

Validation is necessary to ensure that the user enter valid data. Simple Forms is very flexible when it comes to fields validation.

You can choose to:

• enable/disable fields validation
• validate form fields on Keyup Event
• enable/disable browser built in fields validation
• show/hide validation errors
• show errors as tooltips or strings
• focus error fields on form submit
• show server response/validation status in overlay (cover the form)
• apply custom validation rules

var frontend_validation_demo_form = new SimpleForms("#frontend_validation_demo_form", {
    theme: "white",
    style: "modern-rounded",
    validate: true,
    validateOnKeyup: true,
    browserValidation: false,
    showErrors: true,
    tooltips: true,
    responseOverlay: false,
    focusErrorFields: true,
    validator: {
        rules: {
            ".validate-name": {
                required: true,
                min: 2,
                max: 30,
                name: true
            },
            ".validate-phone": {
                required: true,
                min: 8,
                max: 14,
                phone: true
            },
            ".validate-email": {
                required: true,
                min: 8,
                email: true
            },
            ".validate-url": {
                required: true,
                min: 5,
                url: true
            },
            ".validate-date": {
                required: true,
                min: 6,
                date: true
            }
        }
    }
});

Try to enter invalid data into the form and check the result.
All the form fields excepting the captcha will be validated by the server.

var backend_validation_demo_form = new SimpleForms("#backend_validation_demo_form", {
    theme: "white",
    style: "modern-rounded",
    captcha: {
        enabled: true,
        type: "math"
    },
    validate: false, // validation will be handled by the server
});

While filling out the form fields there may be some errors and you'll get an human readable description where exactly is the issue.
Set debug: true to get errors description and recommendations in your browser console.

Check your browser console while testing the demo form bellow. Try (F12 Key) to open the browser console.

var debug_demo_form = new SimpleForms("#debug_demo_form", {
    debug: true, // will show errors and warnings in browser console if any
    theme: "white",
    style: "underline",
    validate: true,
    files: {
        enabled: true,
        extensions: "gif jpg jpeg png",
        min: 1,
        max: 5,
        maxFileSize: 1, // MB
        filesUploadHandler: "simple-forms/files-upload-handler.php",
    },
    validator: {
        rules: {
            ".validate-name": {
                required: true,
                min: 2,
                max: 30,
                name: true
            },
            ".validate-phone": {
                required: true,
                min: 8,
                max: 14,
                phone: true
            },
            ".validate-email": {
                required: true,
                min: 8,
                email: true
            },
            ".validate-url": {
                required: true,
                min: 5,
                url: true
            },
            ".validate-date": {
                required: true,
                min: 6,
                date: true
            }
        }
    },
});

Front-end translations are stored in simple-forms/js/simple-forms-translations.js file.
There you can add translations strings for your language, but first you need to set your language.

Simple Forms provide two main ways to set your language

1. Using settings (in javascript with lang option, see advanced configuration section for more info).
2. Using GET parameter lang=en (example: mydomain.com?lang=en).
   GET parameter will overwrite lang option in javascript.

NOTE: After setting up your desired language the form will show error/info messages in respective language if translations provided in simple-forms-translations.js file.

IMPORTANT! Please do not remove any existing translation line to avoid critical errors.

Front-end Translations Preview

var translations = {
    en:{
        invalidForm:             "Invalid form! Please check for errors...",
        unknownServerError:      "Unknown Server Error... Please try again" ,
        badRequest:              "Bad request.. Form submission failed. Please try again",
        submissionFailed:        "Form submission failed. Please try again",
        minRequiredFiles:        "Min required files: ",
        maxAllowedFiles:         "Max allowed files: ",
        fileAlreadyExist:        "already exist.",
        filesNotAllowed:         "files not allowed!",
        maxAllowedFileSize:      "Max allowed file size: ",
        uploadFailed:            "Upload failed... Please try again. ",
        requiredField:           "This field is required",
        invalidNameField:        "Invalid name",
        invalidPhoneField:       "Invalid phone",
        invalidEmailField:       "Invalid email",
        invalidUrlField:         "Invalid link",
        invalidDateField:        "Invalid date format",
        maxAllowedCharacters:    "Max allowed characters: ",
        minRequiredCharacters:   "Min required characters: ",
        chooseOption:            "Please choose an option ",
        textareaRequiredMessage: "Drop us a line... ",
    },
    ro:{
        invalidForm:             "Forma nevalida! Te rog verifica campurile",
        unknownServerError:      "Eroare necunoscuta. Te rog incearca din nou ..." ,
        badRequest:              "Cerere gresita. Trimiterea formularului a esuat. Te rog incearca din nou ...",
        submissionFailed:        "Trimiterea formularului a esuat. Te rog incearca din nou ...",
        minRequiredFiles:        "Fisiere minim obligatorii: ",
        maxAllowedFiles:         "Max allowed files: ",
        fileAlreadyExist:        "deja exista.",
        filesNotAllowed:         "fisiere nu sunt acceptate!",
        maxAllowedFileSize:      "Maxim fisiere permise: ",
        uploadFailed:            "Incarcarea a esuat. Te rog incearca din nou ...",
        requiredField:           "Camp obligatoriu",
        invalidNameField:        "Nume nevalid",
        invalidPhoneField:       "Telefoon nevalid",
        invalidEmailField:       "Email nevalid",
        invalidUrlField:         "Link nevalid ",
        invalidDateField:        "Data gresita",
        maxAllowedCharacters:    "Maxim caractere permise: ",
        minRequiredCharacters:   "Caractere minim obligatorii: ",
        chooseOption:            "Alege o optiune ",
        textareaRequiredMessage: "Lasa un mesaj... ",
    },

    // add here your translations
};

Back-end translations are stored in /simple-forms/translations.php file.

Back-end Translations Preview

$info_strings = [];

// English   --\/--
$info_strings['en'] = [
    'message_success'   => ' Thanks for submitting the form.',
    'email_send_error'  => ' Mail failed... Please try again. ',
    'required'          => ' - field is required. ',
    'phone_error'       => ' Please enter a valid phone number. ',
    'email_error'       => ' Please enter a valid e-mail address. ',
    'name_error'        => ' Please enter a valid name (letters and whitespace only). ',
    'date_error'        => ' Please enter valid date. ',
    'url_error'         => ' Please provide a valid url. ',
];

// Romana    --\/--
$info_strings['ro'] = [
    'message_success'   => ' Multumim! Formularul a fost trimis.',
    'email_send_error'  => ' Eroare trimitere email. Incearca din nou. ',
    'required'          => ' - este camp obligatoriu. ',
    'phone_error'       => ' Numar de telefon nevalid! ',
    'email_error'       => ' Adresa de email nevalida! ',
    'name_error'        => ' Nume nevalid (doar litere si spatii). ',
    'date_error'        => ' Data nenvalida! ',
    'url_error'         => ' URL nevalid. ',
];

// add here your translations (copy the array example above)

Here is an example of Drag & Drop files Uploading setup. Only valid files by extension and size will be accepted.

var files_uploading_demo_form = new SimpleForms("#files_uploading_demo_form", {
    theme: "white",
    style: "modern-rounded",
    validate: true,
    files: {
        enabled: true,                                               // enable files uploading for this form
        extensions: "gif jpg jpeg png svg",                          // allowed extensions
        min: 1,                                                      // min required files
        max: 10,                                                     // max allowed files
        maxFileSize: 2,                                              // max allowed file size in MB
        filesUploadHandler: "simple-forms/files-upload-handler.php", // backend files uploading handler
    },
});

Please migrate to slider captcha for better spam protection, Mathematical captcha and Google reCaptcha v2 will be dropped in the next major release.

const slider_captcha_demo_form = new SimpleForms("#slider_captcha_demo_form", {
    theme: "white",
    style: "modern-rounded",
    validate: true,
    captcha: {
        enabled: true,
        type: "slider", // Use slider captcha
    },
});

NOTE: Please do not share your Google reCAPTCHA secret key!

IMPORTANT Please consider configuring Google reCaptcha v2 on your domain (not on your local/test serve) to avoid unexpected errors and scripts conflict.

var captcha_demo_form = new SimpleForms("#captcha_demo_form", {
    theme: "white",
    style: "modern-rounded",
    validate: true,
    captcha: {
        enabled: true,
        type: "math", // mathematical captcha
    },
});

var recaptcha_v2_demo_form = new SimpleForms("#recaptcha_v2_demo_form", {
    theme: "white",
    style: "modern-rounded",
    validate: true,
    captcha: {
        enabled: true,
        type: "recaptcha-v2", // Google reCaptcha v2
        siteKey: "SITE_KEY",  // replace SITE_KEY with your site key, generate here: https://www.google.com/recaptcha/admin/create
        theme: "light"
    },
});

If your users must agree with site terms & conditions in order to submit the form you can set up consent checkbox in 2 steps:

1. Add consent checkbox to your form, copy the code bellow:

You can customize the text and add a custom link to Terms and Conditions page.

IMPORTANT: Please do not change the css classes in the example bellow.

<div class="consent">
    <label class="custom-checkbox-label">
        <input type="checkbox" class="simple-consent-checkbox" name="consent" value="agree" required="" checked="" title="">
        <span class="custom-checkbox-button"></span>

        By clicking the “Send now” button you agree to our <a href="#">Terms and Conditions</a>.
    </label>
</div>

2. Set the consent option

Set consent: true to enable the consent check. Now the users have to agree before submitting the form.

var consent_demo_form = new SimpleForms("#consent_demo_form", {
    theme: "white",
    style: "modern-rounded",
    validate: true,
    consent: true,
});

Redirect the user after submitting the form to a custom success page.
You can set target success page and redirect timeout.

var redirect_demo_form = new SimpleForms("#redirect_demo_form", {
    theme: "white",
    style: "modern-rounded",
    validate: true,
    redirect: {
        enabled: true,       // enable the redirect
        url: "success.html", // set page url
        timeout: 2           // redirect after 2 seconds (0 for instant redirect)
    },
});

While completing the form Press ESC to reset the form or Press TAB to highlight form fields.

var accessibility_demo_form = new SimpleForms("#accessibility_demo_form", {
    theme: "white",
    style: "modern-rounded",
    validate: true,
    accessibility: {
        escapeReset: true, // pres ESC to reset the form
        tabHighlight: true // press TAB to highlight form fields
    },
});

The form bellow will reload the page after submission.
This is an old and not recommended method, until you need the form to work this way.

var ajax_submit_demo_form = new SimpleForms("#ajax_submit_demo_form", {
    theme: "white",
    style: "modern-rounded",
    validate: false,   // disable form validation
    ajaxSubmit: false, // disable ajx submit
});

The form bellow is removed and replaced with a custom success message after submission.

var hide_after_submit_demo_form = new SimpleForms("#hide_after_submit_demo_form", {
    theme: "white",
    style: "modern-rounded",
    hideFormAfterSubmit: true,
    customSuccessMessage: "[Custom Message] - Thanks for submitting the form.",
});

Final note:

Thanks for your interest in using Simple Forms.
If you like this product please leave a review or recommend it to your friends! great products are for sharing!

If you have a suggestion or found a bug please let me know. Thanks in advance.

Best regards. Lucas