SIMAEC.NET WEB PUBLISHING

Webforms with Svelte

Webforms are an essential component of a website which intends to stay connected with the visitors. We started to implement Svelte for interactive UI and applied this framework for Webforms. It was surprisingly simple to apply it for our sites hosted on Firebase/Firestore.

We implemented and different approach previously using a on page js submit handler and a logic with support by html and css. Info about our previous approach can be found here: Webforms

Svelte Setup

We build a small Svelte app, one component if the form is shown on the page, or two components if the form is shown as modal. The form can be tested thoroughly using a local dev build. Once finished, the app is built and published by adding the anchor div and referring the compiled js in the html code of the page where the form will show up.

Unfortunately, Firebase/Firestore doesn't provide a library optimized for Svelte. There are community built libraries available but we prefer using the libraries provided by Google itself. The current SDK works so we stick to it.

We still haven't figured out how we can refer to a Svelte build without having the triggering container on page without getting an js error.

Webform

No difference to a regular form. Input, select, textarea tags embedded within a form tag. Regular submit though is disabled using Svelte's approach:

    <form name="contact" on:submit|preventDefault={handleSubmit}></form>

The component code, including all js and html code for a contact us form like this one: Muuuh Contact Form is less than 100 lines. We are still in the re-factoring process and once we feel confident that code is reduced as much as possible, we publish the code as Github repo. For now, if you would like to have a copy for your site, contact us.

About Pitfalls

Automated Submissions: Submit handler validates data and if found valid, the data is submitted as json object to firestore. Our validation, beside making sure that all required fields are filled, checks if the navigator submitting the form has cookies enabled and if uuid cookie has a value.

Spamming: A firebase function can be built to act server side to a submission with a client independent validation and triggering an email to the site admin for notification. If a response to the person submitting a form is required, don't include the submitted content which removes the incentive to use the form for spamming.

SQL Injection: Prevented by setup of firestore rules. Read documents or update documents are disallowed.

Examples

  • Contact Form: This is a form published in the page.
  • Rate Page Form: This is a form published in a modal container. Click on "Feedback".