Contact Forms

Many websites need a way for people to contact the owners of the site. The simplest way is probably to list an email address on the site, but often a better alternaive is to use something called a contact form. The rest of this article is about contact forms; why you might want one, what they are, how they work at a high level, and an example implementation.

A contact form is a form with inputs such as name, email, and message. Visitors can enter in their information, hit send, and the contents of the form are sent to a predefined destination (typically the owner’s email) all without the visitor leaving their browser.

Why use a contact form?

A big advantage of a contact form over a simple anchor tag <a href="mailto:expample@email.com>Email</a> is it removes friction for the visitor sending the message. When clicked on, an anchor tag opens up the default email client of that visitor, which can be a bit jarring and is not very elegant. The contact form allows visitors to stay on the site and in their browser instead of opening up a new program.

Visitors to the site also don’t see the email address the contact form goes off to, which can be another advantage to some.

The main disadvantage to a contact form is that they are more complex to implement than an anchor tag (which is dead simple). Some sort of service needs to be setup that will actually send the email. The information cannot just be sent from the browser of the visitor.

Example

Below is an example of a simple contact form. Sometimes you will include additional fields for people to enter information into. The service this form hits is web3forms. There are many services that offer this type of functionality. I found web3forms extrememly easy to setup and their free tier is adaquate for my friend’s needs. They allow 250 free emails a month. And after that it is $50 for up to 5,000 emails per month.

Below the form itself you can see how the form can be implemented in a Svelte site.

  <script lang="ts">
	let status = '';
	const handleSubmit = async (data: { currentTarget: HTMLFormElement | undefined }) => {
		status = 'Submitting...';
		const formData = new FormData(data.currentTarget);
		const object = Object.fromEntries(formData);
		const json = JSON.stringify(object);

		const response = await fetch('https://api.web3forms.com/submit', {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json',
				Accept: 'application/json'
			},
			body: json
		});
		const result = await response.json();
		if (result.success) {
			console.log(result);
			status = result.message || 'Success';
		}
	};
</script>

<form on:submit|preventDefault={handleSubmit}>
	<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" />
	<input placeholder="name" type="text" name="name" required />
	<input placeholder="email" type="email" name="email" required />
	<textarea placeholder="message" name="message" required rows="3" />
	<input type="submit" value="Send" />
</form>

<div>{status}</div>

Future improvements

I plan to update and refine my blog posts over time.

• Explain the code for the form better
• Spinner / loading indicator instead of just saying ‘Submitting…’ at the bottom
• More realistic success and error messages