Aggiunge routing contatti per reparto con endpoint Cloudflare e Resend
Introduce selettore reparto nel form, instradamento verso destinatari dedicati via variabili ambiente e fallback al destinatario generale. Mantiene modalita dev/live e validazione Turnstile lato server. Made-with: Cursor
This commit is contained in:
@ -7,4 +7,9 @@ CONTACT_FORM_MODE=dev
|
|||||||
CONTACT_FORM_RESEND_API_KEY=
|
CONTACT_FORM_RESEND_API_KEY=
|
||||||
CONTACT_FORM_FROM_EMAIL=
|
CONTACT_FORM_FROM_EMAIL=
|
||||||
CONTACT_FORM_TO_EMAIL=
|
CONTACT_FORM_TO_EMAIL=
|
||||||
|
CONTACT_FORM_TO_EMAIL_PRIVACY=
|
||||||
|
CONTACT_FORM_TO_EMAIL_SECURITY=
|
||||||
|
CONTACT_FORM_TO_EMAIL_ETHICS=
|
||||||
|
CONTACT_FORM_TO_EMAIL_LEGAL=
|
||||||
|
CONTACT_FORM_TO_EMAIL_HR=
|
||||||
CONTACT_TURNSTILE_SECRET_KEY=
|
CONTACT_TURNSTILE_SECRET_KEY=
|
||||||
|
|||||||
13
README.md
13
README.md
@ -67,7 +67,12 @@ Server-side (Cloudflare runtime / local `.env`):
|
|||||||
- `CONTACT_FORM_MODE` (`dev` or `live`)
|
- `CONTACT_FORM_MODE` (`dev` or `live`)
|
||||||
- `CONTACT_FORM_RESEND_API_KEY`
|
- `CONTACT_FORM_RESEND_API_KEY`
|
||||||
- `CONTACT_FORM_FROM_EMAIL` (verified sender in Resend)
|
- `CONTACT_FORM_FROM_EMAIL` (verified sender in Resend)
|
||||||
- `CONTACT_FORM_TO_EMAIL` (recipient inbox or alias)
|
- `CONTACT_FORM_TO_EMAIL` (default recipient inbox or alias)
|
||||||
|
- `CONTACT_FORM_TO_EMAIL_PRIVACY`
|
||||||
|
- `CONTACT_FORM_TO_EMAIL_SECURITY`
|
||||||
|
- `CONTACT_FORM_TO_EMAIL_ETHICS`
|
||||||
|
- `CONTACT_FORM_TO_EMAIL_LEGAL`
|
||||||
|
- `CONTACT_FORM_TO_EMAIL_HR`
|
||||||
- `CONTACT_TURNSTILE_SECRET_KEY`
|
- `CONTACT_TURNSTILE_SECRET_KEY`
|
||||||
|
|
||||||
Mode behavior:
|
Mode behavior:
|
||||||
@ -75,4 +80,10 @@ Mode behavior:
|
|||||||
- `dev`: accepts form and logs payload server-side (no real email send)
|
- `dev`: accepts form and logs payload server-side (no real email send)
|
||||||
- `live`: verifies Turnstile (if secret configured) and sends via Resend API
|
- `live`: verifies Turnstile (if secret configured) and sends via Resend API
|
||||||
|
|
||||||
|
Department routing:
|
||||||
|
|
||||||
|
- the contact form includes a department selector
|
||||||
|
- if a department-specific env is set, the email is routed to that recipient
|
||||||
|
- otherwise it falls back to `CONTACT_FORM_TO_EMAIL`
|
||||||
|
|
||||||
Copy `.env.example` to `.env` for local development and configure the same keys in Cloudflare Pages/Workers for production.
|
Copy `.env.example` to `.env` for local development and configure the same keys in Cloudflare Pages/Workers for production.
|
||||||
|
|||||||
@ -11,6 +11,7 @@ const model = {
|
|||||||
fieldName: cf.fieldName,
|
fieldName: cf.fieldName,
|
||||||
fieldCompany: cf.fieldCompany,
|
fieldCompany: cf.fieldCompany,
|
||||||
fieldCountry: cf.fieldCountry,
|
fieldCountry: cf.fieldCountry,
|
||||||
|
fieldDepartment: cf.fieldDepartment,
|
||||||
fieldEmail: cf.fieldEmail,
|
fieldEmail: cf.fieldEmail,
|
||||||
fieldMessage: cf.fieldMessage,
|
fieldMessage: cf.fieldMessage,
|
||||||
};
|
};
|
||||||
@ -161,6 +162,20 @@ const fieldClass =
|
|||||||
class={fieldClass}
|
class={fieldClass}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-xs font-medium text-nx-muted" for="nx-cf-department">
|
||||||
|
{cf.departmentLabel}
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="nx-cf-department"
|
||||||
|
name={cf.fieldDepartment}
|
||||||
|
class={fieldClass}
|
||||||
|
>
|
||||||
|
{cf.departmentOptions.map((opt) => (
|
||||||
|
<option value={opt.value}>{opt.label}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label class="block text-xs font-medium text-nx-muted" for="nx-cf-msg">
|
<label class="block text-xs font-medium text-nx-muted" for="nx-cf-msg">
|
||||||
{cf.messageLabel}
|
{cf.messageLabel}
|
||||||
|
|||||||
@ -30,6 +30,7 @@ export const cta = {
|
|||||||
nameLabel: 'Nome',
|
nameLabel: 'Nome',
|
||||||
companyLabel: 'Azienda (opzionale)',
|
companyLabel: 'Azienda (opzionale)',
|
||||||
countryLabel: 'Paese',
|
countryLabel: 'Paese',
|
||||||
|
departmentLabel: 'Reparto',
|
||||||
emailLabel: 'Email',
|
emailLabel: 'Email',
|
||||||
messageLabel: 'Scrivi qui il tuo messaggio',
|
messageLabel: 'Scrivi qui il tuo messaggio',
|
||||||
submitLabel: 'Invia messaggio',
|
submitLabel: 'Invia messaggio',
|
||||||
@ -49,7 +50,16 @@ export const cta = {
|
|||||||
fieldName: 'name',
|
fieldName: 'name',
|
||||||
fieldCompany: 'company',
|
fieldCompany: 'company',
|
||||||
fieldCountry: 'country',
|
fieldCountry: 'country',
|
||||||
|
fieldDepartment: 'department',
|
||||||
fieldEmail: 'email',
|
fieldEmail: 'email',
|
||||||
fieldMessage: 'message',
|
fieldMessage: 'message',
|
||||||
|
departmentOptions: [
|
||||||
|
{ value: 'general', label: 'Generale' },
|
||||||
|
{ value: 'privacy', label: 'Privacy / DPO' },
|
||||||
|
{ value: 'security', label: 'Security / Incident Response' },
|
||||||
|
{ value: 'ethics', label: 'Segnalazioni confidenziali (Ethics)' },
|
||||||
|
{ value: 'legal', label: 'Legal' },
|
||||||
|
{ value: 'hr', label: 'HR' },
|
||||||
|
],
|
||||||
},
|
},
|
||||||
} as const;
|
} as const;
|
||||||
|
|||||||
@ -79,6 +79,18 @@ async function sendWithResend(apiKey: string, fromEmail: string, toEmail: string
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function resolveDepartmentRecipient(runtimeEnv: RuntimeEnv, defaultRecipient: string, department: string): string {
|
||||||
|
const normalized = department.trim().toLowerCase();
|
||||||
|
const map: Record<string, string> = {
|
||||||
|
privacy: readEnv('CONTACT_FORM_TO_EMAIL_PRIVACY', runtimeEnv),
|
||||||
|
security: readEnv('CONTACT_FORM_TO_EMAIL_SECURITY', runtimeEnv),
|
||||||
|
ethics: readEnv('CONTACT_FORM_TO_EMAIL_ETHICS', runtimeEnv),
|
||||||
|
legal: readEnv('CONTACT_FORM_TO_EMAIL_LEGAL', runtimeEnv),
|
||||||
|
hr: readEnv('CONTACT_FORM_TO_EMAIL_HR', runtimeEnv),
|
||||||
|
};
|
||||||
|
return map[normalized] || defaultRecipient;
|
||||||
|
}
|
||||||
|
|
||||||
export const POST: APIRoute = async ({ request, locals, url }) => {
|
export const POST: APIRoute = async ({ request, locals, url }) => {
|
||||||
const runtimeEnv = getRuntimeEnv(locals);
|
const runtimeEnv = getRuntimeEnv(locals);
|
||||||
const mode = readEnv('CONTACT_FORM_MODE', runtimeEnv).toLowerCase() || 'dev';
|
const mode = readEnv('CONTACT_FORM_MODE', runtimeEnv).toLowerCase() || 'dev';
|
||||||
@ -98,6 +110,7 @@ export const POST: APIRoute = async ({ request, locals, url }) => {
|
|||||||
const company = required(form.get('company'));
|
const company = required(form.get('company'));
|
||||||
const email = required(form.get('email'));
|
const email = required(form.get('email'));
|
||||||
const country = required(form.get('country'));
|
const country = required(form.get('country'));
|
||||||
|
const department = required(form.get('department')) || 'general';
|
||||||
const message = required(form.get('message'));
|
const message = required(form.get('message'));
|
||||||
|
|
||||||
if (!name || !email || !country || !message) {
|
if (!name || !email || !country || !message) {
|
||||||
@ -122,6 +135,7 @@ export const POST: APIRoute = async ({ request, locals, url }) => {
|
|||||||
company ? `Azienda: ${company}` : '',
|
company ? `Azienda: ${company}` : '',
|
||||||
`Email: ${email}`,
|
`Email: ${email}`,
|
||||||
`Paese: ${country}`,
|
`Paese: ${country}`,
|
||||||
|
`Reparto: ${department}`,
|
||||||
'',
|
'',
|
||||||
message,
|
message,
|
||||||
]
|
]
|
||||||
@ -134,13 +148,15 @@ export const POST: APIRoute = async ({ request, locals, url }) => {
|
|||||||
status: 500,
|
status: 500,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
await sendWithResend(resendApiKey, fromEmail, toEmail, subject, text);
|
const destination = resolveDepartmentRecipient(runtimeEnv, toEmail, department);
|
||||||
|
await sendWithResend(resendApiKey, fromEmail, destination, subject, text);
|
||||||
} else {
|
} else {
|
||||||
console.info('[contact:dev] Contact payload received', {
|
console.info('[contact:dev] Contact payload received', {
|
||||||
name,
|
name,
|
||||||
company,
|
company,
|
||||||
email,
|
email,
|
||||||
country,
|
country,
|
||||||
|
department,
|
||||||
subject,
|
subject,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,6 +8,7 @@ interface ContactFormCfg {
|
|||||||
fieldName: string;
|
fieldName: string;
|
||||||
fieldCompany: string;
|
fieldCompany: string;
|
||||||
fieldCountry: string;
|
fieldCountry: string;
|
||||||
|
fieldDepartment: string;
|
||||||
fieldEmail: string;
|
fieldEmail: string;
|
||||||
fieldMessage: string;
|
fieldMessage: string;
|
||||||
}
|
}
|
||||||
@ -25,6 +26,7 @@ function readCfg(): ContactFormCfg {
|
|||||||
fieldName: 'name',
|
fieldName: 'name',
|
||||||
fieldCompany: 'company',
|
fieldCompany: 'company',
|
||||||
fieldCountry: 'country',
|
fieldCountry: 'country',
|
||||||
|
fieldDepartment: 'department',
|
||||||
fieldEmail: 'email',
|
fieldEmail: 'email',
|
||||||
fieldMessage: 'message',
|
fieldMessage: 'message',
|
||||||
};
|
};
|
||||||
@ -67,12 +69,13 @@ function bind(): void {
|
|||||||
const company = String(fd.get(cfg.fieldCompany) ?? '').trim();
|
const company = String(fd.get(cfg.fieldCompany) ?? '').trim();
|
||||||
const email = String(fd.get(cfg.fieldEmail) ?? '').trim();
|
const email = String(fd.get(cfg.fieldEmail) ?? '').trim();
|
||||||
const country = String(fd.get(cfg.fieldCountry) ?? '').trim();
|
const country = String(fd.get(cfg.fieldCountry) ?? '').trim();
|
||||||
|
const department = String(fd.get(cfg.fieldDepartment) ?? '').trim();
|
||||||
const message = String(fd.get(cfg.fieldMessage) ?? '').trim();
|
const message = String(fd.get(cfg.fieldMessage) ?? '').trim();
|
||||||
if (cfg.mailto) {
|
if (cfg.mailto) {
|
||||||
const subject = encodeURIComponent(cfg.notifySubject || 'Contatto sito');
|
const subject = encodeURIComponent(cfg.notifySubject || 'Contatto sito');
|
||||||
const companyLine = company ? `\nAzienda: ${company}` : '';
|
const companyLine = company ? `\nAzienda: ${company}` : '';
|
||||||
const body = encodeURIComponent(
|
const body = encodeURIComponent(
|
||||||
`Nome: ${name}${companyLine}\nEmail: ${email}\nPaese: ${country}\n\n${message}`,
|
`Nome: ${name}${companyLine}\nEmail: ${email}\nPaese: ${country}\nReparto: ${department || 'general'}\n\n${message}`,
|
||||||
);
|
);
|
||||||
window.location.href = `mailto:${cfg.mailto}?subject=${subject}&body=${body}`;
|
window.location.href = `mailto:${cfg.mailto}?subject=${subject}&body=${body}`;
|
||||||
return;
|
return;
|
||||||
|
|||||||
Reference in New Issue
Block a user