SIMAEC.NET WEB PUBLISHING

Contact Form with Svelte / Firestore

Contact form is a convenient feature for website visitors to get in contact with a website owner. It is also a hassle to build and maintain. For low traffic websites, we actually recommend to skip it and publish an email address or phone number instead.

Reminder: You don't need to host a form on Firebase Hosting to take advantage of Firestore.

Concept

A simple contact form asks for an email address and provides a text box for the contact request details. Data usually is sent by email to the website owner or inserted into a database. In the implementation described below, data is stored as document in a Firestore collection.

Webforms, like a contact form, are abused by spammers, by link exchange requesters or even by hackers working on getting access to the webserver. Our solution implements some protection against these forms of abuse.

Implementation

A in page contact form is a very basic Svelte App. It contains only one component "App.svelte". For source code check the file on GitHub: Source code

Our Svelte contact form has three sets of variables:

  • Form switches, validations and response variables. A few variables to control what is displayed and when.
  • Form field variables and if fields are required their corresponding validation flags.
  • A set of hidden fields used in enabling / disabling the form. Part of the measures to prevent form abuses.

Form handler is a simple script, validating input and submitting the data into the corresponding Firestore collection.

Compiling the app results in a javascript which has to be included in a page that will show the form.

<script defer="" src="/assets/js/contactform.js"></script> 

On page we also need the hook for the app.

<div id="contactform"></div>

Final Touch

No styles are defined within the svelte components. Styling is achieved with the global stylesheet.

The basic setup with data storage in Firestore can be easily extended with backend functionality. By doing so, keep in mind protection from form abuse.

You can add server side functionality triggering an automated response, backend processes to retrieve submitted data internally for follow up.

We keep it simple by checking for new submissions in the Firestore database in the morning and answer them if necessary.

Is this information enough to allow you setting up a feedback form yourself?

If not, please submit a feedback including your email address and we will contact you.

Resources