Add interest field to mailing list subscribe (telecom/trucking/formation)
- Footer subscribe modal: new "I'm interested in" dropdown with 3 options - Hoisted JS: reads interest field, validates selection, passes to API - Subscribe API: routes to different Listmonk lists by interest (telecom→list 3, trucking→list 8, formation→list 9) - Interest stored as subscriber attribute for campaign segmentation Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
33da00fd89
commit
f1027694a3
3 changed files with 16 additions and 7 deletions
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
<section class="py-10 border-t border-gray-100"> <div class="max-w-2xl mx-auto px-4 text-center"> <h2 class="text-lg font-bold text-gray-900 mb-2">Stay ahead of compliance changes</h2> <p class="text-sm text-gray-600 mb-5">Regulatory updates, enforcement trends, and compliance tips. No spam.</p> <button type="button" id="subscribe-btn-footer" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-pw-700 text-white text-sm font-medium hover:bg-pw-800 transition-colors"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"></path></svg>
|
||||
Join Mailing List
|
||||
</button> </div> </section> <!-- Subscribe modal --> <div id="subscribe-modal-global" class="fixed inset-0 z-[9999] hidden items-center justify-center bg-black/50 backdrop-blur-sm"> <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4 p-6"> <div class="flex justify-between items-start mb-4"> <h3 class="text-lg font-semibold text-gray-900">Join our mailing list</h3> <button type="button" id="subscribe-close-global" class="text-gray-400 hover:text-gray-600"> <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg> </button> </div> <form id="subscribe-form-global" class="space-y-4"> <div> <label for="sub-name-g" class="block text-sm font-medium text-gray-700 mb-1">Name <span class="text-gray-400">(optional)</span></label> <input type="text" id="sub-name-g" placeholder="Your name" maxlength="100" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none"> </div> <div> <label for="sub-company-g" class="block text-sm font-medium text-gray-700 mb-1">Company <span class="text-gray-400">(optional)</span></label> <input type="text" id="sub-company-g" placeholder="Your company" maxlength="200" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none"> </div> <div> <label for="sub-email-g" class="block text-sm font-medium text-gray-700 mb-1">Email <span class="text-red-400">*</span></label> <input type="email" id="sub-email-g" required placeholder="you@company.com" maxlength="200" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none"> </div> <div class="flex items-start gap-2"> <input type="checkbox" id="sub-consent-g" required class="mt-1 rounded border-gray-300 text-pw-600 focus:ring-pw-500"> <label for="sub-consent-g" class="text-xs text-gray-600 leading-relaxed">
|
||||
</button> </div> </section> <!-- Subscribe modal --> <div id="subscribe-modal-global" class="fixed inset-0 z-[9999] hidden items-center justify-center bg-black/50 backdrop-blur-sm"> <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4 p-6"> <div class="flex justify-between items-start mb-4"> <h3 class="text-lg font-semibold text-gray-900">Join our mailing list</h3> <button type="button" id="subscribe-close-global" class="text-gray-400 hover:text-gray-600"> <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg> </button> </div> <form id="subscribe-form-global" class="space-y-4"> <div> <label for="sub-name-g" class="block text-sm font-medium text-gray-700 mb-1">Name <span class="text-gray-400">(optional)</span></label> <input type="text" id="sub-name-g" placeholder="Your name" maxlength="100" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none"> </div> <div> <label for="sub-company-g" class="block text-sm font-medium text-gray-700 mb-1">Company <span class="text-gray-400">(optional)</span></label> <input type="text" id="sub-company-g" placeholder="Your company" maxlength="200" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none"> </div> <div> <label for="sub-email-g" class="block text-sm font-medium text-gray-700 mb-1">Email <span class="text-red-400">*</span></label> <input type="email" id="sub-email-g" required placeholder="you@company.com" maxlength="200" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none"> </div> <div> <label for="sub-interest-g" class="block text-sm font-medium text-gray-700 mb-1">I'm interested in <span class="text-red-400">*</span></label> <select id="sub-interest-g" required class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none"> <option value="">Select an area...</option> <option value="telecommunications">Telecommunications (FCC/USAC)</option> <option value="trucking">Trucking / DOT Compliance</option> <option value="formation">Business Formation</option> </select> </div> <div class="flex items-start gap-2"> <input type="checkbox" id="sub-consent-g" required class="mt-1 rounded border-gray-300 text-pw-600 focus:ring-pw-500"> <label for="sub-consent-g" class="text-xs text-gray-600 leading-relaxed">
|
||||
I agree to receive compliance updates and service announcements from Performance West Inc. I can unsubscribe at any time. We never share your email.
|
||||
</label> </div> <!-- Honeypot --> <div class="absolute opacity-0 h-0 overflow-hidden" aria-hidden="true" tabindex="-1"> <label for="sub-website-g">Website</label> <input type="text" id="sub-website-g" name="website" autocomplete="off" tabindex="-1"> </div> <input type="hidden" id="sub-ts-g" value=""> <button type="submit" id="sub-submit-g" class="w-full py-2.5 px-4 bg-pw-700 text-white text-sm font-medium rounded-lg hover:bg-pw-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
Subscribe
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue