I currently have a site that has 100s of very similar pages.The top of each page is a hero section with a form.Currently the form is coded on each page and each page has its own +server.js and I want to change both to components so it is easier to make site wide changes and keep everything in sync.
When I tried to implement this, the form sends an email correctly if validation passes, but it doesn't look like the formdata is returned to the page and so no success message is shown. If the form is filled incorrectly and validation fails again due to the lack of formdata no error message is shown.
server.js
import { z } from 'zod';const contactSchema = z.object({ fullName: z .string({ required_error: 'Name is required' }) .min(2, { message: 'Please provide full name' }) .max(64, { message: 'Name must be less than 64 characters' }) .trim(), email: z .string({ required_error: 'Email is required' }) .trim() .max(64, { message: 'Name must be less than 64 characters' }) .email({ message: 'Please provide a valid Email' }), phone: z .string({ required_error: 'Phone is required' }) .min(10, { message: 'Please provide a valid phone number' }) .trim(), address: z .string({ required_error: 'Address is required' }) .min(5, { message: 'Please provide a valid address' }) .trim()});export const actions = { contactus: async ({ request }) => { const formData = Object.fromEntries(await request.formData()); try { const result = contactSchema.parse(formData); sendMail(formData); return { success: true }; } catch (err) { const { fieldErrors: errors } = err.flatten(); return { formData, errors }; } }};import sgMail from '@sendgrid/mail';sgMail.setApiKey(import.meta.env.SENDGRID_API_KEY);export async function sendMail(formData) { const msgBodyHTML = 'Name: '.concat( formData.fullName,'<br/>Phone: ', formData.phone,'<br/>Email: ', formData.email,'<br/>Address: ', formData.address ); const msg = { to: ['admin@-----.ca'], from: 'noreply@-----.ca', subject: 'New Form', html: msgBodyHTML }; await sgMail.send(msg);}Form
<script> export let form;<script/><!--Form--><div> {#if form?.success}<h3 class="mb-4 text-center text-xl font-bold tracking-tight text-mainbg md:text-3xl xl:text-4xl"> Thank you! We will be in touch shortly!</h3> {:else}<h3 class="mb-4 text-center text-xl font-bold tracking-tight text-mainbg md:text-3xl xl:text-4xl"> Contact us Now</h3><form action="?/contactus" method="POST" class="flex flex-col"><div class="grid grid-cols-1 gap-3 px-6 md:grid-cols-2 md:gap-4"><div class="flex flex-col justify-start text-xl"> {#if form?.formData?.fullName}<input id="fullName" name="fullName" class=" rounded-xl pl-2" type="text" placeholder="Name" value={form?.formData?.fullName} /> {:else}<input id="fullName" name="fullName" class=" rounded-xl pl-2" type="text" placeholder="Name" value="" />{/if} {#if form?.errors?.fullName}<span class="px-2 text-xs font-bold text-orangeAccent">{form?.errors?.fullName[0]}</span> {/if}</div><div class="flex flex-col justify-start text-xl"> {#if form?.formData?.email}<input id="email" name="email" class=" rounded-xl pl-2" type="email" placeholder="Email" value={form?.formData?.email} /> {:else}<input id="email" name="email" class=" rounded-xl pl-2" type="email" placeholder="Email" value="" /> {/if} {#if form?.errors?.email}<span class="px-2 text-xs font-bold text-orangeAccent">{form?.errors?.email[0]}</span> {/if}</div><div class="flex flex-col justify-start text-xl"> {#if form?.formData?.phone}<input id="phone" name="phone" class=" rounded-xl pl-2" type="text" placeholder="Phone" value={form?.formData?.phone} /> {:else}<input id="phone" name="phone" class=" rounded-xl pl-2" type="text" placeholder="Phone" value="" /> {/if} {#if form?.errors?.phone}<span class="px-2 text-xs font-bold text-orangeAccent">{form?.errors?.phone[0]}</span> {/if}</div><div class="flex flex-col justify-start text-xl"> {#if form?.formData?.address}<input id="address" name="address" class=" rounded-xl pl-2" type="text" placeholder="Address" value={form?.formData?.address} /> {:else}<input id="address" name="address" class=" rounded-xl pl-2" type="text" placeholder="Address" value="" /> {/if} {#if form?.errors?.address}<span class="px-2 text-xs font-bold text-orangeAccent">{form?.errors?.address[0]}</span> {/if}</div></div><button class="mt-4 w-3/4 self-center rounded-2xl bg-orangeAccent py-1 font-bold shadow-lg hover:brightness-75">Contact now!</button></form> {/if}</div>