Lightweight Dynamic JavaScript Form Popup Library – FormModal

FormModal is a lightweight JavaScript plugin for creating customizable form modals using just HTML data attributes. You get a clean user experience with smooth modal animations, a design that matches your site’s look, and a mobile-friendly layout. The plugin also offers simple form validation, customizable themes, and a honeypot to prevent bots.

At its core, FormModal simplifies form implementation through an ingenious approach: declarative HTML attributes. This approach eliminates complex JavaScript configurations while maintaining robust customization capabilities. With just 2kb of compressed code, you can create flexible, accessible form modals across various web applications.

Use Cases:

It supports lead generation through newsletter signups, event registrations, contact forms, demo requests, and subscription forms. For user engagement, you can create quick polls, collect feedback, handle social media follows, and contest entries. You can also handle product inquiries, size guide requests, shipping information, and price alerts in e-commerce.

How to use it:

1. Download the FormModal plugin and add the following script to your page.

<script src="/path/to/dist/formmodal.min.js" defer></script>

2. Create a button that triggers the form modal. Use the data-* attributes to define the form’s fields and the action URL where the form data will be submitted. Here’s an example of a basic contact form:

<h2>Basic Contact Form</h2>
<button class="openModalBtn" 
  data-title="Contact Us" 
  data-submit-button-text="Send Message" 
  data-form-modal='[
    {"name":"name", "label":"Full Name", "placeholder":"Enter your full name", "required":true},
    {"name":"email", "label":"Email Address", "type":"email", "placeholder":"Enter your email", "required":true},
    {"name":"message", "label":"Message", "type":"textarea", "placeholder":"Your message here", "required":true}
  ]' 
  data-action-url="/path/to/action/">
  Contact Form
</button>

3. You can modify the form for different use cases. Below are examples of how to set up forms for newsletter signups, event registration, product inquiries, and job applications.

<h2>Newsletter Signup</h2>
<button 
  class="openModalBtn" 
  data-title="Subscribe to Newsletter" 
  data-submit-button-text="Subscribe"
  data-form-modal='[
    {"name":"email", "label":"Email Address", "type":"email", "placeholder":"Enter your email", "required":true},
    {"name":"preferences", "label":"Interests", "type":"checkbox", "options":["News", "Products", "Events"], "required":false}
  ]' data-action-url="/path/to/action">
  Newsletter Signup
</button>

<h2>Event Registration</h2>
<button 
  class="openModalBtn" 
  data-title="Register for Event" 
  data-submit-button-text="Register Now" 
  data-form-modal='[
    {"name":"name", "label":"Full Name", "placeholder":"Enter your full name", "required":true},
    {"name":"email", "label":"Email Address", "type":"email", "placeholder":"Enter your email", "required":true},
    {"name":"phone", "label":"Phone Number", "type":"tel", "placeholder":"Enter your phone number", "required":true},
    {"name":"ticket", "label":"Ticket Type", "type":"select", "options":["Standard", "VIP", "Group"], "required":true},
    {"name":"quantity", "label":"Number of Tickets", "type":"number", "min":1, "max":5, "required":true}
  ]' 
  data-action-url="/path/to/action">
  Event Registration
</button>

<h2>Product Inquiry</h2>
<button 
  class="openModalBtn" 
  data-title="Product Information Request" 
  data-submit-button-text="Request Info"
  data-form-modal='[
    {"name":"name", "label":"Your Name", "placeholder":"Enter your name", "required":true},
    {"name":"email", "label":"Email Address", "type":"email", "placeholder":"Enter your email", "required":true},
    {"name":"product", "label":"Product", "type":"select", "options":["Product A", "Product B", "Product C"], "required":true},
    {"name":"question", "label":"Your Question", "type":"textarea", "placeholder":"What would you like to know?", "required":true}
  ]' 
  data-action-url="/path/to/action">
  Ask About Product
</button>

<h2>Job Application</h2>
<button 
  class="openModalBtn" 
  data-title="Quick Job Application" 
  data-submit-button-text="Submit Application"
  data-form-modal='[
    {"name":"name", "label":"Full Name", "placeholder":"Enter your full name", "required":true},
    {"name":"email", "label":"Email Address", "type":"email", "placeholder":"Enter your email", "required":true},
    {"name":"phone", "label":"Phone Number", "type":"tel", "placeholder":"Enter your phone number", "required":true},
    {"name":"position", "label":"Position", "type":"select", "options":["Developer", "Designer", "Manager"], "required":true},
    {"name":"experience", "label":"Years of Experience", "type":"number", "min":0, "max":50, "required":true},
    {"name":"resume", "label":"Resume", "type":"file", "accept":".pdf,.doc,.docx", "required":true},
    {"name":"cover_letter", "label":"Cover Letter", "type":"textarea", "placeholder":"Brief introduction...", "required":false}
  ]' 
  data-action-url="/path/to/action">
  Quick Apply
</button>

How it works:

The FormModal library operates by first injecting CSS styles into the page’s <head>. This provides the necessary styling for the modal, form elements, and transitions. When a button with the data-form-modal attribute is clicked, an event listener intercepts the click. It prevents default actions, then it reads the data-title, data-submit-button-text, data-form-modal (which contains an array of form field configurations) and the data-action-url from the button.

A new FormModal instance is created, configured with this data. This class creates the modal structure, which includes the dialog container, content area, close button, form, and all the necessary form fields. The fields are generated based on the configurations provided in the data-form-modal attribute, which include name, label, type, placeholder, and required settings. The form also includes an invisible honeypot field, which helps to prevent spam from bots.

Upon creation, the modal is displayed using a flex layout. The focus is automatically shifted to the modal, improving accessibility. If you submit the form, the handleSubmit function is triggered. This function validates form data, handles submission, and manages responses, then shows a confirmation message if the submission is successful. Otherwise, it displays an error message. The form sends a POST request with the form data in JSON format to the provided data-action-url. The modal can also be closed by pressing the escape key, clicking the close button, or clicking outside of the modal itself. When closed, the modal is removed from the DOM.

About Author:

Author: LoftDesk

Website: https://loftdesk.com/