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:
justin
parent
33da00fd89
commit
f1027694a3
3 changed files with 16 additions and 7 deletions
|
|
@ -7,7 +7,16 @@ const LISTMONK_URL = process.env.LISTMONK_URL || "http://listmonk:9000";
|
|||
const LISTMONK_USER = process.env.LISTMONK_USER || "api";
|
||||
const LISTMONK_PASS = process.env.LISTMONK_PASSWORD || "";
|
||||
|
||||
async function addToListmonk(email: string, name: string, company?: string) {
|
||||
// Listmonk list IDs by interest area
|
||||
const LISTMONK_LISTS: Record<string, number[]> = {
|
||||
telecommunications: [3], // FCC Carriers - Direct Contacts
|
||||
trucking: [8], // FMCSA / DOT Carriers
|
||||
formation: [9], // Business Formation Leads
|
||||
};
|
||||
const DEFAULT_LISTS = [3]; // fallback to telecom list
|
||||
|
||||
async function addToListmonk(email: string, name: string, company?: string, interest?: string) {
|
||||
const lists = (interest && LISTMONK_LISTS[interest]) || DEFAULT_LISTS;
|
||||
const resp = await fetch(`${LISTMONK_URL}/api/subscribers`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
|
|
@ -18,9 +27,9 @@ async function addToListmonk(email: string, name: string, company?: string) {
|
|||
email,
|
||||
name: name || email.split("@")[0],
|
||||
status: "enabled",
|
||||
lists: [3], // FCC Carriers - Direct Contacts
|
||||
lists,
|
||||
preconfirm_subscriptions: true,
|
||||
attribs: { company: company || "", source: "website" },
|
||||
attribs: { company: company || "", source: "website", interest: interest || "" },
|
||||
}),
|
||||
});
|
||||
if (!resp.ok && resp.status !== 409) {
|
||||
|
|
@ -44,7 +53,7 @@ const CONSENT_TEXT =
|
|||
// POST /api/v1/subscribe
|
||||
router.post("/api/v1/subscribe", submitLimiter, async (req, res) => {
|
||||
try {
|
||||
const { email, name, company, consent, _hp, _ts } = req.body ?? {};
|
||||
const { email, name, company, interest, consent, _hp, _ts } = req.body ?? {};
|
||||
|
||||
// Honeypot — bots fill hidden fields
|
||||
if (_hp) {
|
||||
|
|
@ -106,7 +115,7 @@ router.post("/api/v1/subscribe", submitLimiter, async (req, res) => {
|
|||
}
|
||||
|
||||
try {
|
||||
await addToListmonk(cleanEmail, name || cleanEmail, company || undefined);
|
||||
await addToListmonk(cleanEmail, name || cleanEmail, company || undefined, interest || undefined);
|
||||
} catch (listmonkErr) {
|
||||
console.error("[subscribe] Listmonk addToListmonk failed (non-fatal):", listmonkErr);
|
||||
}
|
||||
|
|
|
|||
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