SIMAEC.NET WEB PUBLISHING

Subscription Form with Svelte / Firestore

Collecting subscribers for a newsletter is important for digital marketing of a website. It is also the simplest form.

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

Concept

A simple form that asks for an email address and the permission / consent to receive electronic bulletins or promotional emails from an website or company. In the implementation described below, data is stored as document in a Firestore collection.

Implementation

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

Like the other forms, the subscription 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/subscriptionform.js"></script> 

On page we also need the hook for the app.

<div id="subscriptionform"></div>

For a subscription form in production see Newsletter

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.

A complete newsletter funnel requires also an unsubscribe option. The intention of this form is to collect email addresses. Dealing with the newsletter funnel including email deployment and unsubscribe is discussed in more details in Digital Marketing.

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

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

Resources