Signup Form

You can embed Hyvor Post's signup form on your website to allow users to subscribe to your newsletter. The form uses double opt-in by default, ensuring that subscribers confirm their subscription via email.

Embed the Signup Form

First, add the following script tag to <head> of your website:

<script src="https://post.hyvor.com/form/form.js" type="module" async></script>

Then, add the following HTML tag to the place you want to show the form:

<hyvor-post-form newsletter="{subdomain}"></hyvor-post-form>

Replace {subdomain} with your newsletter subdomain. You can find it at Console → Settings → Newsletter → Newsletter Subdomain.

Customize the Form

You can customize the text and appearance of the form at Console → Settings → Signup Form.

Customize form

This includes options like title, description, button text, colors and UI. Custom CSS can also be added for further customization. Note that the custom CSS is added to the form, which is a web component with a shadow DOM, so your custom CSS will only affect the form and not the rest of your website.

Working with Multiple Lists

Assume you have two lists in your newsletter: Weekly Updates and Product Announcements.

1. By default, both lists will be shown in the signup form, and users can choose which list(s) to subscribe to.

<hyvor-post-form newsletter="{subdomain}"></hyvor-post-form>
Multiple Lists Form

2. If you want to show only the Product Announcements list, you can set the lists attribute to "Product Announcements" (multiple lists can be separated by commas). Anyone who subscribes via this form will only be subscribed to the Product Announcements list only.

<hyvor-post-form 
	newsletter="{subdomain}"
	lists="Product Announcements"
></hyvor-post-form>
Multiple Lists: Filtering

3. By default, all lists are selected in the form UI. If you want to make a list unselected by default, you can set the lists-default-unselected attribute to the list name (again, multiple lists can be separated by commas).

<hyvor-post-form
	newsletter="{subdomain}"
	lists-default-unselected="Product Announcements"
></hyvor-post-form>
Multiple Lists: Unselected

4. If you want to hide the list selection, you can set the lists-hidden attribute. The user will be subscribed to all lists by default. To subscribe to specific lists, use the lists attribute.

<hyvor-post-form
	newsletter="{subdomain}"
	lists="Product Announcements"
	lists-hidden
></hyvor-post-form>
Multiple Lists: Hidden

In the above example, the user will be subscribed to the Product Announcements list without seeing the list selection.

Form Attributes

Attribute
Value
newsletter
Your newsletter subdomain (required)
lists
A comma-separated list of newsletter list names to show in the form. If not set, all lists will be shown (if there are more than one).
lists-default-unselected
A comma-separated list of newsletter list names that should be unselected by default in the form. If not set, all lists will be selected by default.
lists-hidden
If set, the list selection will be hidden and users will be subscribed to all lists by default. To subscribe to specific lists, use the lists attribute.