Webforms with Svelte

Last updated: 2023-01-12

Building a generic webform handler with Svelte storing submitted data in a Firestore document where it can be pulled from by different backend processes within Firebase or outside of Firebase.

Webforms with Svelte has been a topic in our live stream on YT Webforms: Reactive UI with Svelte from 10/25/22.

Concept and Limitations

The idea of this webform handler is to separate developing the code for the webform from the implementation of a it in a web page. The handler allows having multiple forms on one page, each using the same script.

On purpose, the webform handler doesn't have the possibility to attach files to a form submission. At this point, besides storing the data, no immediate process is attached to a submission. Nevertheless, the basic function of the app can be extended with backend process like reply, zendesk ticket, etc.

Form Hook HTML


<head>
    ...
    <script defer src='/path/to/script/webforms.js'></script>
</head>
<body>
    ...
    <div class="webform" data="formname"></div>
</body>

Form Setup Configuration

The form details is defined in a JSON object.


[{
    "name" : "formname",
    "language": "en",
    "headline": "some headline",
    "introduction": "some description",
    "terms_text": "terms to agree",
    "success_text": "submission successful message",
    "alert_mandatory_text": "alert message",
    "alert_error_text": "error message",
    "disabled_text": "Form is disabled",
    "submit": "submit button text",
    "fields": [
        {
        "name": "email",
        "label": "Your Email Address",
        "type": "email",
        "required": true
        }
    ]
}]

"fields" is an array that can can have as many fields as necessary for a form. Type can be any valid form field type (e.g. text, email, date, select, checkbox, etc.) except attaching a file.

Code: Form Component

The code of the component is published on Github: Webform App.svelte. A few additional comments below.

When initializing the app on page load, we don't want a javascript error in case the container doesn't exist in the html code. See Reactive UI with Svelte

With the container triggering the app, we want to pass data to the app instance using the attribute "data". In this case we use it tell the app which form to load.

No style are declared within the component. All style statements are declared in a global stylesheet file. See Reactive UI with Svelte

Examples

A few examples where we use the generic webform handler built with Svelte, described above.

Newsletter Subscription - The simplest of all forms (See footer).
Contact Us - Generic Contact Us form.
SEO Audit - Example of a form with topic specific form fields.

References

Svelte - Cybernetically Enhanced Web Apps ;)