Hi !

Recently one of our website was audited for accessibility.

It recommended to change the role="alert" with role="status" for success validation form.

May be this improvement can be done for further release.

Thank you very match ??

Howdy,

We have recently started using this plugin and we have come to realize that the users can click on the submit button multiple times, causing the form to be submitted multiple times (plus, we get multiple emails/submissions).
To solve it, we advise to disable the submit button when the user clicks on it and enable it once the form is submitted or something failed.

Our custom solution to this error is to hook into the JS events and manually disable the submit button upon submission.

Best regards ??

Hello,

We created a custom form using HTML and Javascript. The form submission page is not categorized for the entries and the email is not being received by the receiver.

Link to form submission page: https://drive.google.com/file/d/1xzfWqtrLwZsj7h0D9OkXISfFOSBt-W9I/view?usp=sharing

Our code:

<div id="data-multi-step" class="multi-step-form main_footer">
      <div class="card data-step">
        <h2 class="step-title">Contact Information</h2>
        <div class="form-group ">
          <label for="name">Name</label>
          <input type="text" required name="NAME" id="name" class="form-control" />
        </div>

        <div class="form-group">
          <label for="email">Email</label>
          <input type="email" required name="EMAIL" id="email" class="form-control" />
        </div>

        <div class="form-group ">
          <label for="contact">Contact</label>
          <input type="text" required name="CONTACT" id="contact" class="form-control" />
        </div>

        <div class="button-group">
          <button type="button" class="data-next bg_btn_color">Next</button>
        </div>
      </div>

      <div class="card data-step">
        <h2 class="step-title">Company Details</h2>

        <div class="form-group ">
          <label for="companyName">Company Name</label>
          <input
            type="text"
            name="COMPANY_NAME"
            id="companyName"
            class="form-control"
            required
          />
        </div>

        <div class="form-group ">
          <label for="industry">Industry</label>
			<label for="quotation-form-INDUSTRY">Industry</label>

          <select name="INDUSTRY" required id="quotation-form-INDUSTRY"
          class="form-control">
            <option>Technology</option>
            <option>Healthcare</option>
            <option>Retail</option>
            <option>Education</option>
            <option>Finance and Banking</option>
            <option>Manufacturing</option>
            <option>Real Estate</option>
            <option>Travel and Hospitality</option>
            <option>Food and Beverage</option>
            <option>Food and Beverage</option>
            <option>Entertainment and Media</option>
            <option>Non-Profit</option>
            <option>Government</option>
            <option>Automotive</option>
            <option>Fashion and Apparel</option>
            <option>E-commerce</option>
            <option>Legal Services</option>
            <option>Construction</option>
            <option>Transportation and Logistics</option>
            <option>Marketing and Advertising</option>
            <option>Telecommunications</option>
            <option >Agriculture</option>
            <option>Energy and Utilities</option>
            <option>Pharmaceuticals</option>
            <option>Sports and Recreation</option>
            <option>Human Resources</option>
            <option>Professional Services (Consulting, Coaching)</option>
            <option>Arts and Culture</option>
            <option>Home Services</option>
            <option>Insurance</option>
            <option>Beauty and Cosmetics</option>
            <option >Fitness and Wellness</option>
            <option>Home Services</option>
            <option>Others</option>
          </select>
        </div>
        <div class="form-group ">
          <label for="companySize">Company Size</label>
          <select
            type="text"
            name="COMPANY_SIZE"
            class="form-control"
            id="companySize"
            data-select-company-size
            required      
          >
            <option value="" disabled selected>Select your option</option>
            <option value="1-10 employees">1-10 employees</option>
            <option value="11-50 employees">11-50 employees</option>
            <option value="51-200 employees">51-200 employees</option>
            <option value="201+ employees">201+ employees</option>
          </select>
        </div>

        <div class="button-group">
          <button type="button" class="data-previous bg_btn_color">
            Previous
          </button>
          <button type="button" class="data-next bg_btn_color">Next</button>
        </div>
      </div>

      <div class="card data-step">
        <h2 class="step-title">Services Interested</h2>

        <div class="form-group">
          <label for="serviceCheckbox">Services interested in?</label>
          <div id="serviceCheckbox">
            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Website Development"
                value="Website Development"
                name="data-service-selected"
              />
              <label>Website Development</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Social Media Management"
                name="data-service-selected"
                value="Social Media Management"
              />
              <label>Social Media Management</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Microcontent Edits (Reels)"
                name="data-service-selected"
                value="Microcontent Edits (Reels)"
              />
              <label>Microcontent Edits (Reels)</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="SEO (Search Engine Optimization)"
                name="data-service-selected"
                value="SEO (Search Engine Optimization)"
              />
              <label>SEO (Search Engine Optimization)</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Graphics Design"
                name="data-service-selected"
                value="Graphics Design"
              />
              <label>Graphics Design</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Content Writing"
                name="data-service-selected"
                value="Content Writing"
              />
              <label>Content Writing</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Brand Guideline and Services"
                name="data-service-selected"
                value="Brand Guideline and Services"
              />
              <label>Brand Guideline and Services</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Video Editing"
                name="data-service-selected"
                value="Video Editing"
              />
              <label>Video Editing</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Lead Generation"
                name="data-service-selected"
                value="Lead Generation"
              />
              <label>Lead Generation</label>
            </div>
          </div>
        </div>
        <div class="button-group">
          <button type="button" class="data-previous bg_btn_color">
            Previous
          </button>
          <button type="button" class="data-next bg_btn_color">Next</button>
        </div>
      </div>

      <div class="card data-step">
        <h2 class="step-title">Website Development Needs</h2>
        <div class="form-group ">
          <label for="type-of-website">Type of Website</label>

          <select
            name="TYPE_OF_WEBSITE"
            id="type-of-website"
            class="form-control"      
          >
            <option value="" disabled selected>Select your option</option>
            <option value="Informational">Informational</option>
            <option value="E-commerce">E-commerce</option>
            <option value="Blog">Blog</option>
            <option value="Portfolio">Portfolio</option>
            <option value="Custom">Custom</option>
          </select>
        </div>

        <div class="form-group ">
          <label for="number-of-pages">Number of Pages</label>

          <select
            name="WEBSITE_NUMBER_OF_PAGES"
            id="number-of-pages"
            data-select-industry
            class="form-control"                 
          >
            <option value="" disabled selected>Select your option</option>
            <option value="1-5">1-5</option>
            <option value="6-10">6-10</option>
            <option value="11-20">11-20</option>
            <option value="21+">21+</option>
          </select>
        </div>

        <div class="form-group ">
          <label for="website-features-needed-checkBox">Features Needed</label>
          <div id="website-features-needed-checkBox">
            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="User-Friendly Navigation"
                name="WEBSITE_FEATURE_SELECTED"
                value="User-Friendly Navigation"
                data-website-features-selected
              />
              <label>User-Friendly Navigation</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Responsive Design"
                name="WEBSITE_FEATURE_SELECTED"
                value="Responsive Design"
                data-website-features-selected
              />
              <label>Responsive Design</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Fast Loading Speed"
                name="WEBSITE_FEATURE_SELECTED"
                value="Fast Loading Speed"
                data-website-features-selected
              />
              <label>Fast Loading Speed</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="SEO Optimization"
                name="WEBSITE_FEATURE_SELECTED"
                value="SEO Optimization"
                data-website-features-selected
              />
              <label>SEO Optimization</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Contact Information"
                name="WEBSITE_FEATURE_SELECTED"
                value="Contact Information"
                data-website-features-selected
              />
              <label>Contact Information</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Social Media Integration"
                name="WEBSITE_FEATURE_SELECTED"
                value="Social Media Integration"
                data-website-features-selected
              />
              <label>Social Media Integration</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="High-Quality Content"
                name="WEBSITE_FEATURE_SELECTED"
                value="High-Quality Content"
                data-website-features-selected
              />
              <label>High-Quality Content</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Security Features"
                name="WEBSITE_FEATURE_SELECTED"
                value="Security Features"
                data-website-features-selected
              />
              <label>Security Features</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Lead Generation Forms"
                name="WEBSITE_FEATURE_SELECTED"
                value="Lead Generation Forms"
                data-website-features-selected
              />
              <label>Lead Generation Forms</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Analytics and Tracking Tools"
                name="WEBSITE_FEATURE_SELECTED"
                value="Analytics and Tracking Tools"
                data-website-features-selected
              />
              <label>Analytics and Tracking Tools</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Accessibility Features"
                name="WEBSITE_FEATURE_SELECTED"
                value="Accessibility Features"
                data-website-features-selected
              />
              <label>Accessibility Features</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Multimedia Content"
                name="WEBSITE_FEATURE_SELECTED"
                value="Multimedia Content"
                data-website-features-selected
              />
              <label>Multimedia Content</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Testimonials and Reviews"
                name="WEBSITE_FEATURE_SELECTED"
                value="Testimonials and Reviews"
                data-website-features-selected
              />
              <label>Testimonials and Reviews</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="FAQ Section"
                name="WEBSITE_FEATURE_SELECTED"
                value="FAQ Section"
                data-website-features-selected
              />
              <label>FAQ Section</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="E-commerce Features"
                name="WEBSITE_FEATURE_SELECTED"
                value="E-commerce Features"
                data-website-features-selected
              />
              <label>E-commerce Features</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Blog and Resources Section"
                name="WEBSITE_FEATURE_SELECTED"
                value="Blog and Resources Section"
                data-website-features-selected
              />
              <label>Blog and Resources Section</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Multilingual Support"
                name="WEBSITE_FEATURE_SELECTED"
                value="Multilingual Support"
                data-website-features-selected
              />
              <label>Multilingual Support</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Customizable Dashboard"
                name="WEBSITE_FEATURE_SELECTED"
                value="Customizable Dashboard"
                data-website-features-selected
              />
              <label>Customizable Dashboard</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Client Portal"
                name="WEBSITE_FEATURE_SELECTED"
                value="Client Portal"
                data-website-features-selected
              />
              <label>Client Portal</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Legal Pages"
                name="WEBSITE_FEATURE_SELECTED"
                value="Legal Pages"
                data-website-features-selected
              />
              <label>Legal Pages</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Push Notifications"
                name="WEBSITE_FEATURE_SELECTED"
                value="Push Notifications"
                data-website-features-selected
              />
              <label>Push Notifications</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Live Chat Support"
                name="WEBSITE_FEATURE_SELECTED"
                value="Live Chat Support"
                data-website-features-selected
              />
              <label>Live Chat Support</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Performance Optimization Tools"
                name="WEBSITE_FEATURE_SELECTED"
                value="Performance Optimization Tools"
                data-website-features-selected
              />
              <label>Performance Optimization Tools</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Regular Updates and Maintenance"
                name="WEBSITE_FEATURE_SELECTED"
                value="Regular Updates and Maintenance"
                data-website-features-selected
              />
              <label>Regular Updates and Maintenance</label>
            </div>
          </div>
        </div>
        <div class="button-group">
          <button type="button" class="data-previous bg_btn_color">
            Previous
          </button>
          <button type="button" class="data-next bg_btn_color">Next</button>
        </div>
      </div>

      <div class="card data-step">
        <h2 class="step-title">Social Media Management Needs</h2>
        <div class="form-group ">
          <label for="platforms-needed-checkBox">Platforms</label>
          <div id="platforms-needed-checkBox">
            <input
              type="checkbox"
              id="Facebook"
              name="SOCIAL_MEDIA_PLATFORM_SELECTED"
              value="Facebook"
            />
            <label>Facebook</label>

            <input
              type="checkbox"
              id="Instagram"
              name="SOCIAL_MEDIA_PLATFORM_SELECTED"
              value="Instagram"
            />
            <label>Instagram</label>

            <input
              type="checkbox"
              id="Twitter"
              name="SOCIAL_MEDIA_PLATFORM_SELECTED"
              value="Twitter"
            />
            <label>Twitter</label>

            <input
              type="checkbox"
              id="TikTok"
              name="SOCIAL_MEDIA_PLATFORM_SELECTED"
              value="TikTok"
            />
            <label>TikTok</label>

            <input
              type="checkbox"
              id="LinkedIn"
              name="SOCIAL_MEDIA_PLATFORM_SELECTED"
              value="LinkedIn"
            />
            <label>LinkedIn</label>
          </div>
        </div>

        <div class="form-group ">
          <label for="frequency-of-posting">Frequency of Posting</label>

          <select
            name="FREQUENCY_OF_POSTING"
            id="frequency-of-posting"
            data-select-frequency
            class="form-control"    
          >
            <option value="" disabled selected>Select your option</option>
            <option value="Daily">Daily</option>
            <option value="Weekly">Weekly</option>
            <option value="Bi-weekly">Bi-weekly</option>
            <option value="Monthly">Monthly</option>
          </select>
        </div>

        <div class="form-group ">
          <label for="content-type-checkBox">Content Type</label>
          <div id="content-type-checkBox">
            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Image Posts"
                name="CONTENT_TYPE"
                value="Image Posts"
              />
              <label>Image Posts</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Video Posts"
                name="CONTENT_TYPE"
                value="Video Posts"
                data-website-features-selected
              />
              <label>Video Posts</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Stories"
                name="CONTENT_TYPE"
                value="Stories"
                data-website-features-selected
              />
              <label>Stories</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Ads"
                name="CONTENT_TYPE"
                value="Ads"
                data-website-features-selected
              />
              <label>Ads</label>
            </div>
          </div>
        </div>

        <div class="button-group">
          <button type="button" class="data-previous bg_btn_color">
            Previous
          </button>
          <button type="button" class="data-next bg_btn_color">Next</button>
        </div>
      </div>

      <div class="card data-step">
        <h2 class="step-title">Microcontent Edits (Reels) Needs</h2>

        <div class="form-group ">
          <label for="number-of-reels">Number of Reels per Month</label>

          <select
            name="NUMBER_OF_REELS"
            id="number-of-reels"
            class="form-control"  
          >
            <option value="" disabled selected>Select your option</option>
            <option value="1-5">1-5</option>
            <option value="6-10">6-10</option>
            <option value="11-20">11-20</option>
            <option value="21+">21+</option>
          </select>
        </div>

        <div class="form-group ">
          <label for="number-of-reels">Duration of Reels</label>

          <select
            name="DURATION_OF_REELS"
            id="number-of-reels"
            data-select-frequency
            class="form-control" 
          >
            <option value="" disabled selected>Select your option</option>
            <option value="15 seconds">15 seconds</option>
            <option value="30 seconds">30 seconds</option>
            <option value="60 seconds">60 seconds</option>
            <option value="Custom">Custom</option>
          </select>
        </div>

        <div class="button-group">
          <button type="button" class="data-previous bg_btn_color">
            Previous
          </button>
          <button type="button" class="data-next bg_btn_color">Next</button>
        </div>
      </div>

      <div class="card data-step">
        <h2 class="step-title">SEO Needs</h2>

        <div class="form-group ">
          <label for="number-of-reels">Current Website Status</label>

          <select
            name="WEBSITE_STATUS"
            id="website-status"
            data-select-frequency
            class="form-control"     
          >
            <option value="" disabled selected>Select your option</option>
            <option value="No Website">No Website</option>
            <option value="New Website">New Website</option>
            <option value="Existing Website">Existing Website</option>
          </select>
        </div>

        <div class="form-group ">
          <label for="seo-focus-area">SEO Focus Areas</label>
          <div id="seo-focus-area">
            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="On-Page SEO"
                name="SEO_FOCUS_AREA"
                value="On-Page SEO"
                data-seo-focus-area-selected
              />
              <label>On-Page SEO</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Off-Page SEO"
                name="SEO_FOCUS_AREA"
                value="Off-Page SEO"
                data-seo-focus-area-selected
              />
              <label>Off-Page SEO</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Local SEO"
                name="SEO_FOCUS_AREA"
                value="Local SEO"
                data-seo-focus-area-selected
              />
              <label>Local SEO</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Technical SEO"
                name="SEO_FOCUS_AREA"
                value="Technical SEO"
                data-seo-focus-area-selected
              />
              <label>Technical SEO</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Content Strategy"
                name="SEO_FOCUS_AREA"
                value="Content Strategy"
                data-seo-focus-area-selected
              />
              <label>Content Strategy</label>
            </div>
          </div>
        </div>

        <div class="button-group">
          <button type="button" class="data-previous bg_btn_color">
            Previous
          </button>
          <button type="button" class="data-next bg_btn_color">Next</button>
        </div>
      </div>

      <div class="card data-step">
        <h2 class="step-title">Graphics Design Needs</h2>

        <div class="form-group ">
          <label for="type-of-design">Type of Design</label>

          <select
            name="TYPE_OF_GRAPHICS_DESIGN"
            id="type-of-design"
            class="form-control"     
          >
            <option value="" disabled selected>Select your option</option>
            <option value="Logo">Logo</option>
            <option value="Brochure">Brochure</option>
            <option value="Social Media Posts">Social Media Posts</option>
            <option value="Banner Ads">Banner Ads</option>
            <option value="Infographics">Infographics</option>
            <option value="Custom">Custom</option>
          </select>
        </div>

        <div class="form-group ">
          <label for="design-quantity">Quantity</label>

          <select
            name="design-quantity"
            id="design-quantity"
            data-select-quantity-graphics
            class="form-control"
          >
            <option value="" disabled selected>Select your option</option>
            <option value="1-5">1-5</option>
            <option value="6-10">6-10</option>
            <option value="11-20">11-20</option>
            <option value="21+">21+</option>
          </select>
        </div>

        <div class="button-group">
          <button type="button" class="data-previous bg_btn_color">
            Previous
          </button>
          <button type="button" class="data-next bg_btn_color">Next</button>
        </div>
      </div>

      <div class="card data-step">
        <h2 class="step-title">Content Writing Needs</h2>

        <div class="form-group ">
          <label for="platforms-needed-checkBox">Content Type</label>
          <div id="platforms-needed-checkBox">
            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Blog Articles"
                name="CONTENT_WRITING_TYPE"
                value="Blog Articles"
                data-content-type-selected
              />
              <label>Blog Articles</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Website Copy"
                name="CONTENT_WRITING_TYPE"
                value="Website Copy"
                data-content-type-selected
              />
              <label>Website Copy</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Product Descriptions"
                name="CONTENT_WRITING_TYPE"
                value="Product Descriptions"
                data-content-type-selected
              />
              <label>Blog Articles</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Social Media Content"
                name="CONTENT_WRITING_TYPE"
                value="Social Media Content"
                data-content-type-selected
              />
              <label>Social Media Content</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="White Papers"
                name="CONTENT_WRITING_TYPE"
                value="White Papers"
                data-content-type-selected
              />
              <label>White Papers</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Custom"
                name="CONTENT_WRITING_TYPE"
                value="Custom"
                data-content-type-selected
              />
              <label>Custom</label>
            </div>
          </div>
        </div>

        <div class="form-group ">
          <label for="word-per-peice">Word Count per Piece</label>

          <select
            name="WORD_PER_PEICE"
            id="word-per-peice"
            data-select-type-of-design
            class="form-control"
          >
            <option value="" disabled selected>Select your option</option>
            <option value="300-500">300-500</option>
            <option value="500-1000">500-1000</option>
            <option value="1000-2000">1000-2000</option>
            <option value="2000+">2000+</option>
          </select>
        </div>

        <div class="button-group">
          <button type="button" class="data-previous bg_btn_color">
            Previous
          </button>
          <button type="button" class="data-next bg_btn_color">Next</button>
        </div>
      </div>

      <div class="card data-step">
        <h2 class="step-title">Brand Guideline and Services Needs</h2>

        <div class="form-group ">
          <label for="type-of-service">Type of Service</label>

          <select
            name="BRAND_GUIDLINES_TYPE_OF_SERVICE"
            id="type-of-service"
            data-select-type-of-design
            class="form-control"
          >
            <option value="" disabled selected>Select your option</option>
            <option value="Logo Design">Logo Design</option>
            <option value="Brand Identity">Brand Identity</option>
            <option value="Visual Guidelines">Visual Guidelines</option>
            <option value="Tone of Voice Guidelines">
              Tone of Voice Guidelines
            </option>
            <option value="Complete Brand Package">
              Complete Brand Package
            </option>
          </select>
        </div>

        <div class="button-group">
          <button type="button" class="data-previous bg_btn_color">
            Previous
          </button>
          <button type="button" class="data-next bg_btn_color">Next</button>
        </div>
      </div>

      <div class="card data-step">
        <h2 class="step-title">Video Editing Needs</h2>
        <div class="form-group ">
          <label for="type-of-video">Type of Video</label>

          <select
            name="TYPE_OF_VIDEO"
            id="type-of-video"
            class="form-control"
            data-select-type-of-design               
          >
            <option value="" disabled selected>Select your option</option>
            <option value="Social Media Reels">Social Media Reels</option>
            <option value="Promotional Videos">Promotional Videos</option>
            <option value="Explainer Videos">Explainer Videos</option>
            <option value="Event Highlights">Event Highlights</option>
            <option value="Custom">Custom</option>
          </select>
        </div>

        <div class="form-group ">
          <label for="length-of-video">Length of Video</label>

          <select
            name="length-of-video"
            id="length-of-video"
            class="form-control"
            data-select-type-of-design
          >
            <option value="" disabled selected>Select your option</option>
            <option value=" Up to 30 seconds">Up to 30 seconds</option>
            <option value="1-2 minutes">1-2 minutes</option>
            <option value="3-5 minutes">3-5 minutes</option>
            <option value="Custom">Custom</option>
          </select>
        </div>

        <div class="button-group">
          <button type="button" class="data-previous bg_btn_color">
            Previous
          </button>
          <button type="button" class="data-next bg_btn_color">Next</button>
        </div>
      </div>

      <div class="card data-step">
        <h2 class="step-title">Lead Generation Needs</h2>

        <div class="form-group ">
          <label for="preferred-channels-checkBox">Preferred Channels</label>
          <div id="preferred-channels-checkBox">
            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Email Marketing"
                name="PREFERRED_CHANNELS"
                value="Email Marketing"
                data-content-type-selected
              />
              <label>Email Marketing</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Social Media Ads"
                name="PREFERRED_CHANNELS"
                value="Social Media Ads"
                data-content-type-selected
              />
              <label>Social Media Ads</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Google Ads"
                name="PREFERRED_CHANNELS"
                value="Google Ads"
                data-content-type-selected
              />
              <label>Google Ads</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Content Marketing"
                name="PREFERRED_CHANNELS"
                value="Content Marketing"
                data-content-type-selected
              />
              <label>Content Marketing</label>
            </div>

            <div class="quotation-checkbox">
              <input
                type="checkbox"
                id="Other"
                name="PREFERRED_CHANNELS"
                value="Other"
                data-content-type-selected
              />
              <label>Other</label>
            </div>
          </div>
        </div>
        <div class="button-group">
          <button type="button" class="data-previous bg_btn_color">
            Previous
          </button>
          <button type="button" class="data-next bg_btn_color">Next</button>
        </div>
      </div>

      <div class="card data-step">
        <h2 class="step-title">Project Details</h2>
        <div class="form-group ">
          <label for="project-date">Desired Start Date</label>
          <input
            type="date"
            name="project-date"
            id="project-date"
            class="form-control"
            required
          />
        </div>

        <div class="form-group ">
          <label for="project-urgency-level">Urgency Level</label>

          <select
            name="PROJECT_URGENCY_LEVEL"
            id="project-urgency-level"
            class="form-control"
            data-select-urgency-level
            required      
          >
            <option value="" disabled selected>Select your option</option>
            <option value="Flexible">Flexible</option>
            <option value="Within 1 Month">Within 1 Month</option>
            <option value="Within 3 Month">Within 3 Month</option>
            <option value="ASAP">ASAP</option>
          </select>
        </div>

        <div class="form-group ">
          <label for="project-budget-range">Budget Range</label>

          <select
            name="PROJECT_BUDGET_RANGE"
            id="project-budget-range"
            data-select-budget-range
            class="form-control"
            required      
          >
            <option value="" disabled selected>Select your option</option>
            <option value="<$1,000">Less than $1,000</option>
            <option value="$1,000-$5,000,">$1,000-$5,000</option>
            <option value="$5,000-$10,000">$5,000-$10,000</option>
            <option value="$10,000+">$10,000+</option>
          </select>
        </div>

        <div class="form-group ">
          <label for="additional-comments"
            >Additional Comments or Specific Requirements</label
          >

          <textarea
            id="additional-comments"
            name="ADDITIONAL_COMMENTS"
            class="form-control additional_comment_field"
          ></textarea>
        </div>

        <div class="form-group ">
          <label for="preferred-contact-method">Preferred Contact Method</label>

          <select
            name="PREFERRED_CONTACT_METHOD"
            id="preferred-contact-method"
            class="form-control"
            data-select-preferred-contact-method
            required      
          >
            <option value="" disabled selected>Select your option</option>
            <option value="Email">Email</option>
            <option value="Phone">Phone</option>
            <option value="WhatsApp">WhatsApp</option>
            <option value="Zoom">Zoom</option>
          </select>
        </div>

        <div class="button-group">
          <button type="button" class="data-previous bg_btn_color">Previous</button>
          <button type="submit" value="Submit"  class='bg_btn_color'>Submit</button>
        </div>
      </div>
    
    

<style>
  label{
    font-size: 18px !important;
  }
  
  .card {
    background-color: white;
    border:none;
    padding: .5rem;
    max-width: 600px;
    margin: 0 auto;
    animation: fade 250ms ease-in-out forwards;
  }
  
  .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.3em;
    gap: 0.3em;
    
  }
  
  .form-group:last-child {
    margin: 0;
  }
  
  .form-group > label {
    font-weight: bold;
    font-size: 1.2em;
    color: #333;
  }
  
  .form-group > input {
    border: 1px solid #333;
    border-radius: .25em;
    font-size: 1rem;
    padding: 10px !important;
  }
  
  .step-title {
    margin: 0;
    margin-bottom: 1rem;
    text-align: center;
  }
  
  .card.active {
    animation: slide 250ms 125ms ease-in-out both;
  }
  
  .multi-step-form {
    overflow: hidden;
    position: relative;
  }
  
  .button-group{
  	width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
  }
  
  .hide {
    display: none;
  }
  
  
  
  textarea{
  	height: 250px !important;
  }
  
  @keyframes slide {
    0% {
      transform: translateX(200%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes fade {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(.75);
      opacity: 0;
    }
    100% {
      opacity: 0;
      transform: scale(0);
    }
  }
</style>


<script>
const multiStepForm = document.querySelector("#data-multi-step");
const formSteps = [...multiStepForm.querySelectorAll(".data-step")];
let skipBack = false;
let previousPageIndex;
let localIncrementor;

let pagePattern;

let indexOfFinalPage = 12;
let indexOfServiceOptionPage = 2;

let includingPages = [];

for (let i = 0; i < indexOfServiceOptionPage + 1; i++) {
  includingPages.push(i);
}
includingPages.push(indexOfFinalPage);

//TODO, save all page following pattern adding currentPageIndex in the array list in localstorage. Then when toggling through buttons, we follow the array pattern back and forth.
localStorage.setItem("pagePattern", JSON.stringify(includingPages));

//select all services checkbox inputs
const servicesCheckboxes = [
  ...multiStepForm.querySelectorAll('input[name="data-service-selected"]'),
];

let currentStep = formSteps.findIndex((step) => {
  return step.classList.contains("active");
});

if (currentStep < 0) {
  currentStep = 0;
  showCurrentStep();
}

multiStepForm.addEventListener("click", (e) => {
  let incrementor;

  if (e.target.matches(".data-next")) {
    skipBack = false;
    incrementor = getCurrentIncrementor();
  } else if (e.target.matches(".data-previous")) {
    skipBack = true;
    incrementor = getCurrentIncrementor();
  }

  if (incrementor == null) return;

  const inputs = [...formSteps[currentStep].querySelectorAll("input")];
  const allValid = inputs.every((input) => input.reportValidity());
  if (allValid) {
    currentStep = !skipBack ? currentStep + incrementor : incrementor;
    showCurrentStep();
  }
});

formSteps.forEach((step) => {
  step.addEventListener("animationend", (e) => {
    formSteps[currentStep].classList.remove("hide");
    e.target.classList.toggle("hide", !e.target.classList.contains("active"));
  });
});

function showCurrentStep() {
  formSteps.forEach((step, index) => {
    step.classList.toggle("active", index === currentStep);
  });
}

//this function gives the value to increase based on selected options.
function getCurrentIncrementor() {
  let incrementToAdd;

  let checkedServicesFields = servicesCheckboxes.filter(function (checkbox) {
    return checkbox.checked; // Return only checked checkboxes
  });

  let pagePattern = JSON.parse(localStorage.getItem("pagePattern"));

  let currentPageIndexLocal = pagePattern.findIndex((each) => {
    return each == currentStep;
  });


  let foundCheckbox;

  if (skipBack) {
    previousPageIndex = pagePattern[currentPageIndexLocal - 1];
    return previousPageIndex;
  }

  if (!skipBack) {
    if (currentStep < indexOfServiceOptionPage) {
      incrementToAdd = 1;
      return incrementToAdd;
    } else {
      foundCheckbox = servicesCheckboxes.find((each, index) => {
        if (
          each.checked &&
          !skipBack &&
          index + 1 + indexOfServiceOptionPage != currentStep
        ) {
          if (currentStep < index + 1 + indexOfServiceOptionPage) {
            incrementToAdd = index + 1 + indexOfServiceOptionPage - currentStep; // Calculate the increment needed
            if (
              currentStep != 0 &&
              currentStep != indexOfServiceOptionPage &&
              pagePattern.includes(currentStep)
            ) {
              pagePattern.push(currentStep + incrementToAdd);
            } else if (currentStep == indexOfServiceOptionPage) {
              //to  page pattern the page
              let newPattern = [];
              for (
                let i = 0;
                i < pagePattern.findIndex((each) => each == currentStep) + 1;
                i++
              ) {
                newPattern.push(pagePattern[i]);
              }

              newPattern.push(indexOfFinalPage);
              newPattern.push(currentStep + incrementToAdd);
              pagePattern = newPattern;
            }
            return true; // Stop the find operation
          }
        }
        return false; // Continue the find operation
      });
    }
  }

  //if no checkboxes other than current page, skip to last page;
  if (!foundCheckbox && currentStep >= indexOfServiceOptionPage) {
    incrementToAdd = indexOfFinalPage - currentStep;
    pagePattern.push(currentStep);
    pagePattern = removePreviousCheckedPagePattern(pagePattern);
  }

  pagePattern = [...new Set(pagePattern)];
  pagePattern = pagePattern.sort((a, b) => a - b);
  localStorage.setItem("pagePattern", JSON.stringify(pagePattern));

  return incrementToAdd;
}

function removePreviousCheckedPagePattern(pagePattern) {
  
  // Map through the checkboxes, find checked ones, and compute their indices
  const checkedPages = servicesCheckboxes
    .map((each, index) => {
      if (each.checked) {
        return index + 1 + indexOfServiceOptionPage; // Return the adjusted index for checked checkboxes
      }
      return null; // Return null for unchecked checkboxes
    })
    .filter((page) => page !== null); // Filter out null values

    for (let i = 0; i < indexOfServiceOptionPage + 1; i++) {
      checkedPages.push(i);
    }
    checkedPages.push(indexOfFinalPage);


  pagePattern.forEach((each, index) => {
    if (!checkedPages.includes(each)) {
      pagePattern.splice(index,1);
    }
  });

  return pagePattern;
}a
</script>

Hello,

We used the html-forms plug-in to add forms to some pages. Lately, users on Iphone/Safari are not able to submit the form. It does nothing and we don’t receive the confirmation email. When I use it on my computer (windows/chrome/firefox) it works fine. So there is something with the Iphone Safari combination. Multiple users observed this behavior, with different Iphone generations.

Do you have an idea what’s stopping the form to be submitted?

Thank you

Hi, does the checkbox field support multiple values?

What options do I have to add a field that can have multiple values?

Hello! I wish you a good day.

I have been using the HTML Forms plugin for a while, and I find it to be relatively stable. I would like to ask how to connect it to Google Sheets to upload data.

Thank you!

I have multiple landing pages that can have different utm_* parameters. I want to redirect visitors to a subdomain and retain those same parameters, but that doesn’t seem possible right now.

There’s a template variable {{url_params.utm_source}}, but that doesn’t work inside the redirect field. But it’s basically what I need.

Is it possible to have this work somehow? Perhaps by code snippet? If so, which hook do I need exactly?

Hi, I noticed that in recent wordpress version, you form block is not working. I mean adding the block and choosing the form in dropdown shows nothing in the frontend. But when i put the form by shortcode block, providing the shortcode of the same form, it works. So the HTML Form Block has stopped working.

Hi,

I’m a developer and I use this plugin for all my project. (thanks btw).

I wanted to ask whether it’s possible to change the HTML of a field that gets added to the form.
For example, instead of <p> tags, I prefer to wrap in <div> tags. And sometimes I put the <input> inside the <label>.

The reason I want to do this programmatically is, so I can add the code to the theme, and when the client creates a new form the markup will always be correct and matching my CSS selectors for the styles.

Are there any filter hooks to accomplish this? And if not, would you perhaps consider adding this in a future release?

Hi !

First, thank you for this plugin. We use it on all our websites and we love it for the frugal and lightweight approach and because we can extend it easily for a lot of use case.

But today, I’ve got a request with i can’t food a solution.

I need to filter / customize inputs markup which fails validation (like an email input) to add CSS highlight, error message and aria attributes for accessibility in addition with the global error message. I search but i found nothing about highlighting inputs error. Is there a solution ?

Thank you !

The form has suddenly started showing error msg. Instead of showing the form it shows:- “Error:?This contact form is placed in the wrong place.” in place of form. Can you please help with this issue?

First of all, let me thank you for an excellent replacement for CF7.

I want to use a different validation approach (based on whether the field is filled out or not, nothing fancy). All I need to do is:

• Remove browser validation
• Add classes to the inputs (I figured this step out)
• Disable default error messages

Could you please point me in the right direction?

I want to set up a form like the one in my screenshot. Is it possible?
url:https://imgur.com/a/n3t7Qw7

I’m trying to create conditional forms but my implementation doesn’t look pretty.

I want a “Dropdown” field to work like this:

The dropdown field chooses the number of people 1,2,3,4…..

When you select 1 person, some fields should appear to fill out for this person

When 2 people are selected, the fields for the first person + the fields for the second person should appear

And so on…

I have it working this way but the problem is that I have a lot of duplicate code and when the emails arrive from those who fill out the form it is very confusing.

I ask for any advice or solution please.

<div>
  <label for="form-NUMBER_OF_PERSONS">number of people</label>
  <select name="PERSONS" id="form-NUMBER_OF_PERSONS">
    <option name="PERSONS" value="1">1</option>
    <option name="PERSONS" value="2">2</option>
    <option name="PERSONS" value="3">3</option>
    <!-- More people... -->
  </select>
</div>

<div>
  <div data-show-if="PERSONS:1">
    <div>
      <div>Diver 1</div>
      <div>
        <label for="dive-form-HOW_MANY_DIVES"
          >How many logged dives do you have?
        </label>
        <div>
          <input
            type="number"
            name="HOW_MANY_DIVES"
            id="dive-form-HOW_MANY_DIVES"
          />
        </div>
      </div>
      <div>
        <label for="dive-form-HOW_OLD_ARE_YOU">How old are you? </label>
        <label>
          <input name="HOW_OLD_ARE_YOU" type="radio" value="0-12" />
          <span>0-12</span>
        </label>
        <label>
          <input name="HOW_OLD_ARE_YOU" type="radio" value="13-17" />
          <span>13-17</span>
        </label>
      </div>
      <div>
        <label for="dive-form-WHEN_LAST_DIVE"
          >When was your last dive day?</label
        >
        <label>
          <input name="WHEN_LAST_DIVE" type="radio" value="0-3 months" />
          <span>0-3 months</span>
        </label>
        <label>
          <input name="WHEN_LAST_DIVE" type="radio" value="3-6 months" />
          <span>3-6 months</span>
        </label>
        <label>
          <input name="WHEN_LAST_DIVE" type="radio" value="6-12 months" />
          <span>6-12 months</span>
        </label>
      </div>
    </div>
  </div>
  <div data-show-if="PERSONS:2">
    <div>
      <div>Diver 1</div>
      <div>
        <label for="dive-form-HOW_MANY_DIVES"
          >How many logged dives do you have?
        </label>
        <div>
          <input
            type="number"
            name="HOW_MANY_DIVES"
            id="dive-form-HOW_MANY_DIVES"
          />
        </div>
      </div>
      <div>
        <label for="dive-form-HOW_OLD_ARE_YOU">How old are you? </label>
        <label>
          <input name="HOW_OLD_ARE_YOU" type="radio" value="0-12" />
          <span>0-12</span>
        </label>
        <label>
          <input name="HOW_OLD_ARE_YOU" type="radio" value="13-17" />
          <span>13-17</span>
        </label>
      </div>
      <div>
        <label for="dive-form-WHEN_LAST_DIVE"
          >When was your last dive day?</label
        >
        <label>
          <input name="WHEN_LAST_DIVE" type="radio" value="0-3 months" />
          <span>0-3 months</span>
        </label>
        <label>
          <input name="WHEN_LAST_DIVE" type="radio" value="3-6 months" />
          <span>3-6 months</span>
        </label>
        <label>
          <input name="WHEN_LAST_DIVE" type="radio" value="6-12 months" />
          <span>6-12 months</span>
        </label>
      </div>
    </div>
    <div>
      <div>Diver 2</div>
      <div>
        <label for="dive-form-HOW_MANY_DIVES2"
          >How many logged dives do you have?
        </label>
        <div>
          <input type="number" name="HOW_MANY_DIVES2" />
        </div>
      </div>
      <div>
        <label for="dive-form-HOW_OLD_ARE_YOU2">How old are you? </label>
        <label>
          <input name="HOW_OLD_ARE_YOU2" type="radio" value="0-12" />
          <span>0-12</span>
        </label>
        <label>
          <input name="HOW_OLD_ARE_YOU2" type="radio" value="13-17" />
          <span>13-17</span>
        </label>
      </div>
      <div>
        <label for="dive-form-WHEN_LAST_DIVE2"
          >When was your last dive day?</label
        >
        <label>
          <input name="WHEN_LAST_DIVE2" type="radio" value="0-3 months" />
          <span>0-3 months</span>
        </label>
        <label>
          <input name="WHEN_LAST_DIVE2" type="radio" value="3-6 months" />
          <span>3-6 months</span>
        </label>
        <label>
          <input name="WHEN_LAST_DIVE2" type="radio" value="6-12 months" />
          <span>6-12 months</span>
        </label>
      </div>
    </div>
  </div>

  <div data-show-if="PERSONS:3">
    <div>
      <div>Diver 1</div>
      <div>
        <label for="dive-form-HOW_MANY_DIVES"
          >How many logged dives do you have?
        </label>
        <div>
          <input
            type="number"
            name="HOW_MANY_DIVES"
            id="dive-form-HOW_MANY_DIVES"
          />
        </div>
      </div>
      <div>
        <label for="dive-form-HOW_OLD_ARE_YOU">How old are you? </label>
        <label>
          <input name="HOW_OLD_ARE_YOU" type="radio" value="0-12" />
          <span>0-12</span>
        </label>
        <label>
          <input name="HOW_OLD_ARE_YOU" type="radio" value="13-17" />
          <span>13-17</span>
        </label>
      </div>
      <div>
        <label for="dive-form-WHEN_LAST_DIVE"
          >When was your last dive day?</label
        >
        <label>
          <input name="WHEN_LAST_DIVE" type="radio" value="0-3 months" />
          <span>0-3 months</span>
        </label>
        <label>
          <input name="WHEN_LAST_DIVE" type="radio" value="3-6 months" />
          <span>3-6 months</span>
        </label>
        <label>
          <input name="WHEN_LAST_DIVE" type="radio" value="6-12 months" />
          <span>6-12 months</span>
        </label>
      </div>
    </div>
    <div>
      <div>Diver 2</div>
      <div>
        <label for="dive-form-HOW_MANY_DIVES2"
          >How many logged dives do you have?
        </label>
        <div>
          <input type="number" name="HOW_MANY_DIVES2" />
        </div>
      </div>
      <div>
        <label for="dive-form-HOW_OLD_ARE_YOU2">How old are you? </label>
        <label>
          <input name="HOW_OLD_ARE_YOU2" type="radio" value="0-12" />
          <span>0-12</span>
        </label>
        <label>
          <input name="HOW_OLD_ARE_YOU2" type="radio" value="13-17" />
          <span>13-17</span>
        </label>
      </div>
      <div>
        <label for="dive-form-WHEN_LAST_DIVE2"
          >When was your last dive day?</label
        >
        <label>
          <input name="WHEN_LAST_DIVE2" type="radio" value="0-3 months" />
          <span>0-3 months</span>
        </label>
        <label>
          <input name="WHEN_LAST_DIVE2" type="radio" value="3-6 months" />
          <span>3-6 months</span>
        </label>
        <label>
          <input name="WHEN_LAST_DIVE2" type="radio" value="6-12 months" />
          <span>6-12 months</span>
        </label>
      </div>
    </div>
    <div>
      <div>Diver 3</div>
      <div>
        <label for="dive-form-HOW_MANY_DIVES3"
          >How many logged dives do you have?
        </label>
        <div>
          <input type="number" name="HOW_MANY_DIVES3" />
        </div>
      </div>
      <div>
        <label for="dive-form-HOW_OLD_ARE_YOU3">How old are you? </label>
        <label>
          <input name="HOW_OLD_ARE_YOU3" type="radio" value="0-12" />
          <span>0-12</span>
        </label>
        <label>
          <input name="HOW_OLD_ARE_YOU3" type="radio" value="13-17" />
          <span>13-17</span>
        </label>
      </div>
      <div>
        <label for="dive-form-WHEN_LAST_DIVE3"
          >When was your last dive day?</label
        >
        <label>
          <input name="WHEN_LAST_DIVE3" type="radio" value="0-3 months" />
          <span>0-3 months</span>
        </label>
        <label>
          <input name="WHEN_LAST_DIVE3" type="radio" value="3-6 months" />
          <span>3-6 months</span>
        </label>
        <label>
          <input name="WHEN_LAST_DIVE3" type="radio" value="6-12 months" />
          <span>6-12 months</span>
        </label>
      </div>
    </div>
  </div>
  <!-- More people... -->
</div>

<div>
  <input type="submit" value="Send" />
</div>

Hello! Saw the plugin has a new owner. Thought I’d ask what’s next? The plugin is great, light and fast but it missed marketing big time. How do you feel you can change that and what future updates are you planning?

Good luck on your new journey btw!

Thanks!

A lot of resources could be found on the github page at:
https://github.com/ibericode/html-forms/

It is gone and no info is available why and where the resource went.
Bugs, feature examples, all that.

Not a very good sign and bad for the trust level.

Hi I just installed your plugin, but the example form did nothing. I just got a page reload when submitting the form. Also no submissions were logged. And I also couldn’t find any errors.

In PHP 8.1, if I use the Mailchimp action, and submit a form with a group of checkboxes, the is_email() check fails when $value is an array of checkboxes values.

html-forms/src/actions/class-mailchimp.php:80

// find email field
foreach ( $submission->data as $field => $value ) {
	if ( is_email( $value ) ) {
		$email_address = $value;
	}
}

Using is_string() function as part of the check should fix it:

// find email field
foreach ( $submission->data as $field => $value ) {
	if ( is_string( $value ) && is_email( $value ) ) {
		$email_address = $value;
	}
}

We are loving this plugin, for its simplicity and usability. However, as we’re in the process of now fetching form data to process in our marketing automation system, we really need to be able to set an ID on our different forms.

For testing purposes, we’ve modified the plugin file class-form.php, but this is not viable as we, of course, wish to ensure we can update the plugin to get our latest and always recent pathces/fixes and enhancements.

Is there somewhere in the plugin we can set this, or is this an option which could be included in a future (not too far away) update? Alternatively, somehow, make sure the set slug for the form is inserted into the generated form code as “id=[slug]”? The currently generated code has a data-id, but not any id inserted in the generated/parsed code, as far as we can see.

Thanks again, for an amazing plugin!

• This topic was modified 5 months ago by asaaheim.

Hi! I have a form that is reused in several pages in my blog. I’d like to know from which ones submissions are coming from. Is this possible with HTML Forms?

Is it possible to send a thankyou message email to the form submitter email account? If yes how we can do that?

Hi there,

This article describes how to set up Google Ads Enhanced Conversion Tracking with Google Tag Manager + Contact Form 7: https://www.linkedin.com/pulse/google-ads-enhanced-conversions-tracking-contact-form-ryan-parkes

Can the same be done with HTML Forms?

I guess more specifically, my question is, can we add the form data to the GTM dataLayer like this:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    window.dataLayer.push({
        "event" : "cf7submission",
        "formId" : event.detail.contactFormId,
        "response" : event.detail.inputs })
    });
</script>

So with CF7 you can use event.detail.inputs which contains all the form data. Is there an equivalent with HTML Forms?

Any help would be much appreciated.

Thanks

Ste

• This topic was modified 7 months ago by ste9890.

Hello,

I created the contact form with HTML Forms Plugin version 1.3.30 and I set when a user press the button Send, the user receives an email.

The sender of the email is WordPress and not the email that I set in the settings.

Could someone help me with this issue?

Thanks,

Daria

Hi there,

I love your plugin and am really happy that it is soooo lightweight! Nice work!

However I encounter one problem I cannot solve. I’d like to have a contact form that sends the user input directly to our company email. That in itself is working.

But the [MESSAGE] is not formatted in the right way. I wanted to replace the line breaks with <br /> tags. Is there a way that can be achieved? I tried it with Javascript in the message, but that seems not to be executed in my email client.

Thanks in advance for your help!

Kind regards,
Laurent

Hi there,

I just discovered your plugin and I’m SO HAPPY with the speed it offers!
No impact on the site speed = PERFECT!

However I discovered one issue: I want to set the “From” in the “Form Action” to “[EMAIL]” so I can simply reply to incoming requests.
But if I do set it that way, no email will be sent. The submission is saved but no email arrives in my inbox.

Setting the “From” to sth like “[email protected]” solves the problem.

Is that a known issue? Is there a workaround? Am I doing sth wrong?

Thanks in advance for your help!

Kind regards,
Laurent

My page is dark, I am inserting the Date field and I would like to change the color of the svg icon (calendar) to white

Is there a way to do it using CSS? Could you help me,

best regards

Happy New Year 2024 to you Sir,

I don’t know if I can succeed with your plugin, to get what I want.

But I can’t know, if I don’t ask.

REQUEST
I want to create a Multi-Step or Multi Page Form, where each step is a Tab with specific Form information.

The Form will have 4 Pages, which are navigated through by Tabs, as you can see below:

1.) https://prnt.sc/_4jknpCPzf87

2.) https://prnt.sc/dNls50JiTe_4

3.) https://prnt.sc/XIS6AAnDyj10

4.) https://prnt.sc/r1Fdpi2GKpRh

When you click each Tab, it opens up a different set of information.

It means that this is a Multi Step or Multi Page Tabbed Form.

QUESTION
1.) How do I create a Form like this with your HTML Forms plugin?

2.) Can you help me create a sample for me to see? — and then you show me how you did it?

Needing to hear from you soon.

Regards.

Hallo,

Leider meldet Jetpack Protect folgendes:

The HTML Forms plugin for WordPress is vulnerable to Stored Cross-Site Scripting … up to version 1.3.28

<font style=”vertical-align: inherit;”><font style=”vertical-align: inherit;”>Würde gerne bitte wissen, ob das Problem in einem der n?chsten Updates des Plugins behoben wird.</font></font>

Vielen Dank!

• This topic was modified 10 months, 2 weeks ago by steffeninseoul.

Hi there,

I know Contact Form 7 lets you use the Disallowed Comment Keys field in Settings > Discussion to block form submissions with certain words. It’s a nice additional layer of spam security.

https://contactform7.com/comment-blacklist/

Would this work with the HTML Forms plugin currently? Would be a cool feature to add if not!

Thanks

Ste

Hi,
I used the plugin many times with dynamic data using the available filters. For example a select based on the title of some post type.

Now I have a different case, I need to connect to an external API where the response would become the value from a form element. A store locator is a goed example (postal code > the most nearby store.
There is only one choice, so the response becomes the value of my dynamic form element.

Is this possible with a filter or do I need to build this with my own Javascript code?

• This topic was modified 11 months, 2 weeks ago by Olaf Lederer. Reason: Used a better title