Email not Sending and Form Submission Page is not Categorized
-
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>
Viewing 3 replies - 1 through 3 (of 3 total)
Viewing 3 replies - 1 through 3 (of 3 total)
- You must be logged in to reply to this topic.
