Centrer un formulaire sur un modèle HubSpot

Vous pouvez centrer un formulaire sur un modèle HubSpot à l'aide de modules d'espacement horizontal ou d'un CSS personnalisé.

Utilisation de modules d'espacement horizontal

• Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
• Cliquez sur le nom du modèle dans le localisateur pour le modifier.
• Dans l’inspecteur à droite, cliquez sur + Ajouter pour insérer deux nouveaux modules d'espacement horizontal : un à gauche et un à droite de votre module de formulaire.

Utiliser les CSS personnalisés

• Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
• Dans le localisateur, recherchez votre fichier CSS dans les dossiers, puis cliquez sur ce fichier pour le sélectionner dans l'éditeur.
• Ajoutez le code suivant pour centrer tous vos formulaires sur votre site web :

/* Pour centrer le formulaire dans son module et appliquer une largeur maximale */
form.hs-form, .hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}

/* Pour centrer le titre du formulaire dans un module de formulaire */
.hs_cos_wrapper .form-title {
text-align: center;
}

/* Pour centrer le bouton Soumettre d’un formulaire */
.hs_submit {
    text-align: center;
}

• Si vous souhaitez centrer uniquement des formulaires spécifiques, vous pouvez ajouter une classe personnalisée au module de votre formulaire sur votre modèle, puis ajuster votre CSS pour qu'il s'applique uniquement aux modules ayant cette classe. Par exemple, si vous ajoutez la classe personnalisée centrer un formulaire à votre module de formulaire sur votre modèle, votre CSS ressemblera à ceci :

/* Pour centrer le formulaire dans son module et appliquer une largeur maximale */
form.hs-form, .center-form .hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}

/* Pour centrer le titre du formulaire dans un module de formulaire */
.center-form .hs_cos_wrapper .form-title {
text-align: center;
}

/* Pour centrer le bouton Soumettre d’un formulaire */
.center-form .hs_submit {
    text-align: center;
}

• Dans l’angle supérieur droit, cliquez sur Publier les modifications.