Hostfurl mailform module

Hostfurl provides a mailform module for linked email and web content.

New websites use this module automatically and this guide is to help those who want make changes

This content is incomplete.

What the mailform module is for

Allow Hostfurl customers, with their own email domains on Hostfurl, to write or adapt web site code that easily adds in a form, that when submitted sends the information directly as an email to them without a third party, including using web sites not hosted with Hostfurl.

The module is for Astro that include Tailwind.

Tailwind is easily added to Astro with @astrojs/tailwind

The mailform module is easily added in a similar manner

Literally one extra line to add an additional form for email to a page with module

Using familiar standard practices, a forthcoming open source hostfurl module is a required module dependency. Other standard module dependencies required. Two additional lines required in a global tailwind config file. An import statement required on any page that uses hostfurl module. Then any number of different configurable forms for email can be added with single lines

Few limitations on form layout for email using module

Suppose using multiple but different instances of a form with module on the same page, each with different data information configurations. Then using the ‘for’ attribute of a label (instead of wrapping within the label element within module code) requires an extra id parameter is added to the line. This is because a label ‘for’ breaks shadow dom encapsulation. Example use provided. Also, if you have multiple form instances you may get a higher score with Google Lighthouse if the parameter is added and used, as it can avoid an accessibility score penalty.

Location of module

The module has been tested from a private github repository. The repository will be made public and a decision will be made later whether to add the module to the public npm registry, although this is not strictly necessary.

Edit source code directly in used module

The code used in a downloaded module is the the real source code in the src directory, not a Babel transformed version in a dist directory. You can make convenient edits and even save edits to your own fork: you must save edits elsewhere before upgrading module. Although typescript is used, typescript can be relaxed and used with plain javascript.

Test source code without uploading a build

Web to mail works cross-origin and so with localhost. No need to upload a build to test while developing

More information and examples

To follow