Build awesome forms with
Simple Forms

Best Rated Contact Form Script!

Why Simple Forms ?

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

Contact US

We are here to help!

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!

Information Circle

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

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

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.

Settings

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-v3
        siteKey: "",                     // recaptcha V3 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-v3",   // set captcha type, options: math | recaptcha-v3
        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!

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

Booking Form

Create booking forms for your website and start receiving submissions.

Booking

Register your booking.

Survey Form

Collect accurate data from your customers by creating survey forms.

Survey

Please take a minute to
complete this form.

Color Palette

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

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

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.

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

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.

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

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.

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

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)
Document

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.

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

Captcha

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

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

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

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

Math Captcha

We hate SPAM too ...

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 V3

We hate SPAM too ...

Google reCaptcha v3

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

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.

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

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!

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

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.

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

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.

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