Formulaire d’inscription

Vous pouvez intégrer le formulaire d’inscription de Hyvor Post à votre site web pour permettre aux utilisateurs de s’abonner à votre newsletter. Le formulaire utilise le double opt-in par défaut, ce qui garantit que les abonnés confirment leur inscription par e-mail.

• Intégrer le formulaire d’inscription
• Personnaliser le formulaire
• Utiliser plusieurs listes
• Attributs du formulaire

Intégrer le formulaire d'inscription

Ajoutez d’abord la balise script suivante dans le <head> de votre site web :

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

Ajoutez ensuite la balise HTML suivante à l’endroit où vous souhaitez afficher le formulaire :

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

Remplacez {subdomain} par le sous-domaine de votre newsletter. Vous le trouverez dans Console → Paramètres → Newsletter → Sous-domaine de la newsletter.

Personnaliser le formulaire

Vous pouvez personnaliser le texte et l’apparence du formulaire dans Console → Paramètres → Formulaire d’inscription.

Cela inclut des options comme le titre, la description, le texte du bouton, les couleurs et l’interface. Vous pouvez également ajouter du CSS personnalisé pour aller plus loin. Notez que le CSS personnalisé est ajouté au formulaire, qui est un web component avec un shadow DOM : votre CSS n’affectera donc que le formulaire, et non le reste de votre site.

Utiliser plusieurs listes

Supposons que votre newsletter comporte deux listes : Weekly Updates et Product Announcements.

1. Par défaut, les deux listes sont affichées dans le formulaire d’inscription, et les utilisateurs peuvent choisir à quelle(s) liste(s) s’abonner.

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

2. Si vous souhaitez n’afficher que la liste Product Announcements, vous pouvez définir l’attribut lists sur « Product Announcements » (plusieurs listes peuvent être séparées par des virgules). Toute personne qui s’abonne via ce formulaire sera abonnée uniquement à la liste Product Announcements.

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

3. Par défaut, toutes les listes sont sélectionnées dans le formulaire. Si vous souhaitez qu’une liste soit désélectionnée par défaut, définissez l’attribut lists-default-unselected sur le nom de la liste (là encore, plusieurs listes peuvent être séparées par des virgules).

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

4. Si vous souhaitez masquer la sélection des listes, définissez l’attribut lists-hidden. L’utilisateur sera abonné à toutes les listes par défaut. Pour l’abonner à des listes précises, utilisez l’attribut lists.

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

Dans l’exemple ci-dessus, l’utilisateur sera abonné à la liste Product Announcements sans voir la sélection des listes.

Attributs du formulaire