SIMAEC.NET WEB PUBLISHING

Feedback Form with Svelte

We started to include a feedback/comment form on every page on a website since year 2000. It is a convenient, high converting tool to capture feedback from website visitors about specific content. It is common now that websites provide such a feature linked to a simple or more complex survey.

Concept

A simple survey which asks for rating of content and accessibility of a page with optional comment box and email field. The form is shown in a modal container not visible/existent until the feedback button is clicked.

Data is stored as document in a Firestore collection.

Implementation

Because the form is in a modal container, we need two components. One for the button which opens the container and a second with the form itself.

For source code check the corresponding Git Repo: Source code

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/feedbackform.js"></script> 

On page we also need the hook for the app.

<div id="feedbackform"></div>

Final Touch

No styles are defined within the svelte components. Styling is achieved with the global stylesheet. We use Svelte's transition features which creates some style instructions. (Issue with CSP)

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 for assistance.

Resources