Integrating SvelteKit SuperForms with Nodemailer in a SvelteKit App

In modern web development, creating interactive and user-friendly forms is crucial for engaging and retaining users. SvelteKit, with its efficient and component-based architecture, offers an excellent foundation. When combined with SuperForm for form handling, Zod for schema validation, Svelte-Sonner for notifications, and Nodemailer for email integration, it becomes a powerhouse for creating sophisticated web applications. This blog post will guide you through integrating these technologies to enhance user experience in your SvelteKit applications.

Prerequisites

Install the necessary packages:

npm i nodemailer nodemailer-brevo-transport svelte-sonner sveltekit-superforms zod

Creating the Form Component

In your Svelte-Kit project, navigate to the src/routes directory and create a new file named +page.svelte. This file will contain our form component.

+page.svelte file

At the top of your +page.svelte file, import the required modules and set up the form with sveltekit-superforms and Zod for validation:

We will also import svelte-sonner for showing the toast message about user action

<script>
	import { Toaster, toast } from 'svelte-sonner';
	import { z } from 'zod';
	import { superForm } from 'sveltekit-superforms/client';
	import { opinionSchema } from '../../lib/formFunctions/FormSchema';

	export let data;

	const {
		form,
		enhance,
		message,
		capture,
		restore,
		errors,
		constraints,
		delayed,
		timeout,
		submitting
	} = superForm(data?.form, {
		resetForm: false,
		onSubmit() {
			toast('Your form is submitting...');
		}
	});
</script>

<Toaster richColors closeButton />

HTML Markup

Below the script tag, define the HTML structure for your form, utilizing Svelte's reactivity to handle form submission and display messages:

<form action="?/create" method="POST" use:enhance>
		<div class="flex flex-col space-y-3">
			<input
				class="input input-primary"
				placeholder="Type your name"
				name="name_title"
				type="text"
				bind:value={$form.name_title}
				{...$constraints.name_title}
			/>
			<div class="text-red-500">
				{#if $errors?.name_title}
					{$errors.name_title}
				{/if}
			</div>
			<input
				class="input input-primary"
				placeholder="Type your email"
				name="email"
				type="email"
				bind:value={$form.email}
				{...$constraints.email}
			/>
			<div class="text-red-500">
				{#if $errors?.email}
					{$errors.email}
				{/if}
			</div>
			<textarea
				class="textarea textarea-primary"
				placeholder="Type your message"
				name="detail"
				type="text"
				bind:value={$form.detail}
				{...$constraints.detail}
			/>
			<div class="text-red-500">
				{#if $errors?.detail}
					{$errors.detail}
				{/if}
			</div>
		</div>

		<button
			disabled={$delayed}
			class="btn {$delayed ? 'animate-pulse text-white ring' : 'btn-primary'}  mt-5 w-full"
		>
			{$delayed ? 'Sending Mail...' : 'Submit'}
		</button>
	</form>

Handling Form Submission on the Server

Now, let's set up the server-side handling of the form submission. Create a +page.server.js file in the same directory as your form component:

The Blueprint

import { superValidate, message } from 'sveltekit-superforms/server';
import { opinionSchema } from '../../lib/formFunctions/FormSchema';
import { mailPost } from '../../lib/mail/sendMail.js';

export const actions = {
	create: async ({ request }) => {
		// Form validation and email sending logic goes here
	}
};

The complete code

import { superValidate, message } from 'sveltekit-superforms/server';
import { opinionSchema } from '../../lib/formFunctions/FormSchema';
import { mailPost } from '../../lib/mail/sendMail.js';

export const load = async (event) => {
	const form = await superValidate(event, opinionSchema);

	return {
		form
	};
};

export const actions = {
	create: async ({ request }) => {
		const formData = await superValidate(request, opinionSchema);

		// await new Promise((resolve) => setTimeout(resolve, 5000));

		console.log('POST HERE', formData.data);

		// Extracting information from form
		const user_name = formData.data.name_title;
		const user_email = formData.data.email;
		const user_detail = formData.data.detail;
		console.log('user_name, user_email, user_detail: ', user_name, user_email, user_detail);


		if (!formData.valid) {
			// Again, return { form } and things will just work.
			return message(formData, {
				text: 'Something is wrong with your request, please correct and try again',
				status: 400
			});
		} else {
			const response = await mailPost({
				body: {
					user_name,
					user_email,
					user_detail
				}
			});

			// Check if response is successful
			if (response.status === 200) {
				return message(formData, {
					text: 'Your opinion has been received. Thank you!',
					status: 200
				});
			} else {
				console.log('response: ', response);
				return message(formData, { text: response.body, status: response.status });
			}
		}
	}
};

Setting Up Email with Nodemailer

Navigate to the lib/mail directory and create a sendMail.js file. Here, set up Nodemailer with your preferred transport (in this case, nodemailer-brevo-transport) and define the mailPost function to send an email with the form data:

The Blueprint

import nodemailer from 'nodemailer';
import brevoTransport from 'nodemailer-brevo-transport';

const transporter = nodemailer.createTransport(new brevoTransport({
	// Transport configuration
}));

export async function mailPost(request) {
	// Email sending logic goes here
}

Make sure to handle errors gracefully and send a response back to the client indicating the success or failure of the email operation.

The complete code

import nodemailer from 'nodemailer';
import brevoTransport from 'nodemailer-brevo-transport';

// IMPORT ENV VARIABLE
let brevoAPI = import.meta.env.VITE_BREVO_API;
// console.log(brevoAPI);

const transporter = nodemailer.createTransport(
	new brevoTransport({
		apiKey: brevoAPI
	})
);

export async function mailPost(request) {
	console.log('from sendmail js: ', request);
	const { user_name, user_email, user_detail } = request.body;
	const mailOptions = {
		from: user_email,
		to: '[email protected]',
		subject: `New message from  (${user_name})`,
		html: user_detail,
		text: user_detail
	};

	try {
		await transporter.sendMail(mailOptions);
		return {
			status: 200,
			body: 'Email sent successfully'
		};
	} catch (error) {
		console.error(error);
		return {
			status: 500,
			body: 'Failed to send email, Please try again'
		};
	}
}