#### Modal Form

Request a call.

## Build awesome forms with
Simple Forms

Best Rated Contact Form Script!

### Why Simple Forms ?

- Dependency Free! (Powered by Pure Javascript)
- Fresh Design (40 Variations)
- Drag & Drop Files Uploading
- Secure and User Friendly
- Mobile First (Looks Perfect on Mobile)
- Easy to Use / Extended Documentation

Watch Tutorial
Config Generator

Scroll down for more info and demos.

#### Contact US

We are here to help!

Select or drop images here
By clicking the “Send now” button you agree to our Terms and Conditions.

## Simple Forms

More than just a contact form script!
The most flexible, responsive and secure forms you could find!

#### Incredible easy to use!

To start using Simple Forms you have to connect required CSS and Javascript to your web page then generate the confing file online to get you started quick and easy! Yo’ll get a fully working contact form with infinite possibilities in no time. For more info check the installation guide.

#### Get engaging feedback from your clients

Encourage your customers to leave feedback at any moment using prompt and responsive contact forms. Your customers will love engaging with Simple Forms! You are free to choose your email template to get pretty form submissions.

#### No plugins, just Javascript!

Vanilla JS Powered Features

#### 40 Variations

8 Themes and 5 Form Styles

#### Extremely Customizable!

Change colors, styles and inputs

#### Drag & Drop Files

Multiple folders supported

#### No Robots Allowed!

Mathematical captcha added

#### Quick Setup!

Simple Forms care about your time!

## Installation Guide

A quick guide on how to start using Simple Forms.

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

## Create a Form

Let's create a full featured form.

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 Form Configuration

To get started with Simple Forms a minimum configuration is required.
See bellow a basic form configuration example.

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

## Advanced Configuration

For more flexibility and customization please see all available options.

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.

Name | Type | Default | Description
--- | --- | --- | ---
action | string | simple-forms/sendmail.php | Set form action attribute <form action="...">
lang | string | en | Set language for error/info strings
theme | string | white | Set form color theme, options: white | dark | purple | red | green | blue | faded-light | faded-dark
style | string | underline | Set form fields style, options: underline | classic | classic-rounded | modern | modern-rounded | none | custom
customSuccessMessage | string | empty string | I provided will overwrite server response with a custom message
formCSS | string | empty string | Add css styles to the form, example: box-shadow: none;
ajaxSubmit | boolean | true | Send form using AJAX (no page reload)
validate | boolean | true | Enable form fields validation
validateOnKeyup | boolean | true | Validate form fields On KeyUp Event
browserValidation | boolean | false | Use browser validation
tooltips | boolean | true | Show validation errors as tooltips, if false will show errors as strings bellow the field
showErrors | boolean | true | Show validation errors
responseOverlay | boolean | false | show errors in a overlay with additional status icon
focusErrorFields | boolean | true | focus error fields on form submit
debug | boolean | true | Enable debugging mode (will show errors in browser console)
hideFormAfterSubmit | boolean | false | Hide the form after submit
consent | boolean | false | Enable submit button after consent checkbox is checked
files | object | true | Enable files uploading
    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
        },
    });
redirect | object | false | Enable redirect after form submit
    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
        },
    });
captcha | object | false | Enable captcha
    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
        },
    });
accessibility | object | false | Set accessibility options
    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
        },
    });
validator | object | object | Add custom validation rules
    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
                },
            }
        },
    });

## Simple Forms Examples

Great examples of what you can build with Simple Forms

See live examples!

### Contact Form

Power up your website with simple and user friendly contact forms. Automate workflows and save time.

#### Contact US

We are here to help!

### Modal Form

Create modal forms with ease.

Open modal form

### Call Request Form

Create call request forms to get in touch with your customers.

#### Call Request

We'll call you back at your convenience!

### Registration Form

Create registration forms for your website to provide a membership solution for your clients.

#### Sign UP

Create an account

By clicking the “Register” button you agree to our Terms and Conditions.

### Booking Form

Create booking forms for your website and start receiving submissions.

#### Booking

Register your booking.

Personal info
Booking info
By clicking the “Send now” button you agree to our Terms and Conditions.

### Survey Form

Collect accurate data from your customers by creating survey forms.

#### Survey

Please take a minute to
complete this form.

Personal info
Evaluate form design Kind of old school design High quality design Amazing design style!
Evaluate flexibility Kind of not flexible Flexible enough Extreme flexibility!

### Form Custom CSS

With formCSS option you are able to add inline styles to your form.
Se example bellow.

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.

#### Custom CSS

Add custom styles

I love Simple Forms!

#### formCSS configuration

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

## Front-end Validation

Power up your form with strong validation rules.
See example bellow.

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

#### Validation

Front-end validation.

I love Simple Forms!

    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
                }
            }
        }
    });

## Back-end Validation

Simple Forms has also back-end validation to ensure that the user provide valid information.
See example bellow.

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.

#### Validation

Back-end validation.

I love Simple Forms!

    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
    });

## Enable Debugging

Simple Forms is descriptive when you get some errors. Enable debugging to get errors description in your browser console.

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.

#### Debugging

Enable debugging mode.

Select or drop files here
(gif jpg png) files allowed.
I love Simple Forms!
By clicking the “Send now” button you agree to our Terms and Conditions.

    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
                }
            }
        },
    });

## Translations

Simple Forms provide an easy way to translate errors/info strings for your language.
See example bellow.

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)

## Drag & Drop Files Uploading

Simple Forms allow your users to Drag & Drop files for quick uploading and validation.
Only allowed files will be uploaded and sent.

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

#### Drop Files

Drag & Drop some files.

Select or drop files here
(gif jpg jpeg png svg) files allowed.
I love Simple Forms!

    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
        },
    });

## Captcha

Simple Forms care about your inbox and has now new powerful anti-spam options,
Mathematical captcha and Google reCaptcha v2.

Choose between Mathematical captcha and Google reCaptcha v2 to ensure that you get no SPAM.

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.

#### Math Captcha

We hate SPAM too ...

I love Simple Forms!

#### Mathematical captcha

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

#### reCaptcha V2

We hate SPAM too ...

I love Simple Forms!

#### Google reCaptcha v2

    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"
        },
    });

## Consent

Add consent checkbox to your form to ask users to agree with Terms and Conditions.

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.

#### Consent

Agree before submit.

I love Simple Forms!
By clicking the “Send now” button you agree to our Terms and Conditions.

#### Consent setup

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

## Redirect

Redirect the user after submitting the form using redirect option. See example bellow.

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

#### Redirect

Redirect to success page.

I love Simple Forms!

#### Redirect configuration

    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)
        },
    });

## Accessibility

Simple Forms are user friendly! For better experience enable additional accessibility features like ESCAPE Reset and TAB Highlight.

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

#### Accessibility

Simple Forms are user friendly!

Select or drop files here
(gif jpg png) files allowed.
I love Simple Forms!

#### Accessibility configuration

    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
        },
    });

## Ajax Submit

Simple Forms can still be submitted without ajax (with page reload). See bellow how to disable ajax and validation.

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.

#### No Ajax

Regular form submit.

I love Simple Forms!

#### Disable Ajax Submit

    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
    });

## Hide Form After Submit

Simple Forms can be removed after submission and replaced with a custom success message. See example bellow.

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

#### Hide me

Hide the form after submission.

I love Simple Forms!

#### Hide the form

    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