#### Modal Form

We are happy to help.

- ## Meet SimpleForms version 3

  Simple Forms – More than just a contact form script! The most flexible, responsive and secure forms you could find!
  Automate workflows and save time. Installation is quick and intuitive without any technical knowledge.

  If you need a premium quality contact form script but incredible easy to setup Simple Forms is ready to suit your needs.
  You can easily embed Simple Forms into any web page (HTML or PHP).

  #### New Features

  - New – reCaptcha v2 support added.
  - New – Dependency free (no jQuery or bootstrap required).
  - New – Drag & drop files uploading (multiple folders supported).
  - New – Configuration file generator. To get you started really quick.
  - New – Modal form added.
  - New – 3 new email templates added.
  - New – Custom validation rules for more flexibility.
  - New – Fresh Design (40 Variations).
  - New – Mathematical captcha anti spam options added.
  - New – Extended documentation (15+ live examples) and configuration guide.

  #### Why Simple Forms ? (20+ reasons)

  1. Dependency Free!
  2. Light, Dark and 6 more color themes
  3. Fresh Design (40 Variations)
  4. Drag & Drop Files Uploading
  5. Secure and User Friendly
  6. Responsive. Mobile First
  7. Easy to use!
  8. Extended Documentation (15+ live demos)
  9. Clean and minimal code
  10. Support Strict JavaScript Mode("use strict";)
  11. Cross browser compatible
  12. Strong Validation
  13. Consent feature
  14. Store or Delete Uploaded Files after mail
  15. Redirect to Success Page after submit
  16. Server Side Form Fields Validation
  17. Server Side Files Validation
  18. Auto responder feature
  19. User IP Localization
  20. Server response in JSON format
  21. Strings translation
  22. And more...

- ## 1. Installation

  #### Include CSS

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

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

  #### Include JS

  Add required simple-forms/js/simple-forms-translations.js and simple-forms/js/simple-forms.min.js files to your page before closing </body> tag. Then init the form. See example below.

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

      <!-- Simple Form Initialization -->
      <script>
          var simple_forms = new SimpleForms("#contact-form", {                   // replace #contact-form with your form ID
              lang: "en",                                                         // language for error/info strings, check simple-forms-translations.js file
              theme: "white",                                                     // form color theme, options: white | dark | purple | red | green | blue | faded-light | faded-dark
              style: "modern-rounded",                                            // form fields style, options: none | underline | classic | classic-rounded | modern | modern-rounded
              validate: true,                                                     // validate form fields
              consent: true,                                                      // enable submit button after consent checkbox is checked
              tooltips: true,                                                     // show validation errors as tooltips, if false will show errors as strings below the field
              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>

  Now let's create a full featured contact form. Copy the form code below.

  NOTE: 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>

  IMPORTANT! Please make sure that form action attribute contain a valid path to sendmail.php (form handler) file.

  NOTE: For debugging open te browser console (F12 Key in Chrome/Mozilla/Internet Explorer OS Windows).

  NOTE: Sending emails to your inbox may not be delivered form your local/test server in OS Windows. Consider testing the form live on your hosting.

- ## 2. Styling & Configuration

  Now it's time to style and configure your form.

  Simple Forms comes in 8 different styles and YES you can add your custom styles with ease.

  NOTE: All css rules are available in: simple-forms/css/simple-forms.scss.
  Feel free to adjust your styles then compile simple-forms.scss to output the css result.

  #### Form Themes

  1. White
  2. Dark
  3. Fancy Purple (Gradient)
  4. Fresh Green (Gradient)
  5. Water Blue (Gradient)
  6. Shiny Red (Gradient)
  7. Faded Light
  8. Faded Dark

  #### Form Styles

  1. None (will inherit your website styles)
  2. Underline
  3. Classic
  4. Classic rounded
  5. Modern
  6. Modern rounded

  Simple Forms comes with a lot of new and useful settings, all in one place. See comments below for description

  ### Simple Forms Settings:

      var simple_forms = new SimpleForms("#contact-form", {
          action: "",                          // 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
          fieldsStyle: "default",              // form fields style, options: default | 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 below the field
          showErrors: true,                    // show validation errors
          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: "",          // files upload handler, default: simple-forms/files-upload-handler.php
          },
          redirect: {
              enabled: false,                  // 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: "recaptcha-v2",            // set captcha type, options: math | recaptcha-v2
              siteKey: "",                     // recaptcha SITE KEY, generate here: https://www.google.com/recaptcha/admin/create
              theme: "light"                   // recaptcha theme color, options: light | dark
          },
          accessibility: {
              escapeReset: true,               // press ESC key to reset/clear all form fields and files
              tabHighlight: false              // 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
                  }
              }
          }
      });

- ## 3. Modal Form Setup

  Simple Forms allows you to create modal forms easily, just follow the instructions below. Please make sure you have simple forms styles and required scripts connected to the page, see previous steps.

  #### Add Modal + Form Code

  Please insert the modal + form code right after opening body tag.

  IMPORTANT: Please check the form id and action attributes if they match with your setup.

      <div id="my-modal" class="sf-modal">
          <div class="sf-modal-wrapper">
              <div class="sf-modal-content">
                  <div class="sf-modal-closer">
                      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg>
                  </div>

                  <div class="sf-wrapper">
                      <form id="modal_form_example" action="../sendmail.php" class="simple-form white modern-rounded-style" method="post">
                          <div class="form-heading">
                              <h4>Modal Form</h4>
                              <p>
                                  We are happy to help.
                              </p>
                          </div>

                          <label>
                              <input type="text" name="name" class="validate-name" placeholder="Your name*">
                          </label>

                          <label>
                              <input type="text" name="phone" class="validate-phone" placeholder="Your phone*">
                          </label>

                          <label>
                              <textarea name="message" placeholder="Notes..." title=""></textarea>
                          </label>

                          <div class="simple-captcha-wrapper"></div>

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

                          <div class="server-response"></div>
                      </form>
                  </div>
              </div>
          </div>
      </div>

  Now let's add a trigger button, clicking on it will open the modal.

      <a href="#" class="tap sf-open-modal" data-src="#my-modal">Open modal form</a>

  You are free to customize the button but please do not remove data-src="#my-modal" attribute and sf-open-modal class.
  The data-src="#my-modal" attribute must have the id of the modal you added above. Please make sure it matches.

  NOTE: No initialization is needed for the modal. It will work automatically. It is included with the simple-forms.js script you should already have connected.

  #### Initialize The Form

  Here is the javascript code to init the form in modal. Don't forget to replace with your form id and adjust settings if needed.

      var modal_form_example = new SimpleForms("#modal_form_example", { // To do: replace with your form id
          theme: "white",
          style: "modern-rounded",
          validate: true,
          captcha: {
              enabled: true,
              type: "math"
          },
          validator: {
              rules: {
                  ".validate-name": {
                      required: true,
                      min: 2,
                      max: 30,
                      name: true
                  },
                  ".validate-phone": {
                      required: true,
                      min: 8,
                      max: 18,
                      phone: true
                  },
              }
          }
      });

  Click the button to see the modal form in action.

  Open modal form

- ## 3. Backend Configuration

  #### Backend Configuration (simple-forms/config.php)

  Get started fast with Simple Forms Config Generator.

  All available form handler options are described below. Everything you need to set up is probably described here. There is a minimum required setup to start receiving emails.

  Name | Type | Default | Description
  --- | --- | --- | ---
  COMPANY_NAME | string | Simple Forms | Set your company/brand name (not required, but recommended)
  YOUR_EMAIL | string | empty | * Required, your email address, example: my-email@gmail.com This email will receive form submissions.
  EMAILS_SUBJECT | string | New Form Submission | * Required, email subject
  REPLY_TO_EMAIL_FIELD | boolean | true | This option allows you to replay to the user email, who sent the form
  ENABLE_AUTO_RESPONDER | boolean | true | Choose to use or not Autorespoonder feature
  AUTO_RESPONDER_EMAILS_SUBJECT | string | Your submission received | * Required if ENABLE_AUTO_RESPONDER = true
  SEND_COPY_TO | string | empty | Not required, comma separated emails which will get a copy: myemail@gmail.com, myemail2@gmail.com
  REPLY_TO | string | empty | Not required, email address to reply to.
  USE_RECAPTCHA | boolean | true | Enable recaptcha check, this require RECAPTCHA_V3_SECRET_KEY to be set.
  RECAPTCHA_V3_SECRET_KEY | string | empty | Recaptcha version 3 secret key, generate here
  DELETE_FILES_AFTER_MAIL | boolean | true | Choose to delete or keep uploaded files after receiving emails

- ## 4. Captcha

  Simple Forms has two build in antispam options.

  #### 1. Mathematical Captcha

  It is simple to init mathematical captcha, just add to your form initialization and the captcha field will appear.

      var simple_forms = new SimpleForms("#contact-form", {
          captcha: {
              enabled: true,
              type: "math",
          }
      });

  #### 2. Google reCaptcha version 2

  Important notes before using Google reCaptcha anti spam option:

  1. Please do not share your Google reCAPTCHA secret key!
  2. Consider configuring Google reCaptcha v2 on your domain (not on your local/test server) to avoid unexpected errors and scripts conflict.
  3. reCaptcha is not responsive. Unfortunately reCaptcha is not mobile friendly. We are looking for a fix in the future releases.

  #### reCaptcha Front-end Configuration (Javascript)

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

  #### reCaptcha Back-end Configuration (PHP)

  To finalize the configuration of reCaptcha and make sure it works and protect you against spam, please do the following:

  1. In your /simple-forms/config.php file set: define('USE_RECAPTCHA', true)
  2. Second step is to add your reCaptcha secret key again in /simple-forms/config.php look for:
     define("RECAPTCHA_V2_SECRET_KEY", "YOUR_SECRET_KEY"). And replace YOUR_SECRET_KEY with generated secret key here.
  3. And finally test your form. Do some test submits and check if you get no errors saying something like: Invalid secret key, please check your form handler or recaptcha error.

  That's it for the captcha setup, meet you in the next section.

- ## 5. Redirect

  Simple Forms has the option to redirect after form submission.

  #### Redirect configuration

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

- ## 6. Drag & Drop Files

  Simple Forms come with a brand new solution for files uploading.
  Now you can drag and drop files (multiple folders supported).

  #### Files upload configuration

      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: "",          // files upload handler, default: simple-forms/files-upload-handler.php
          }
      });

- ## 7. Advanced Validation

  Simple Forms now allow you to add custom validation rules, see example below.

  #### Advanced form fields validation

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

- ## 8. Feedback

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