Questions produits et conseils

vrneuman
HubSpot Employee
HubSpot Employee

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.
0 Votes
1 Réponse
TiphaineCuisset
Gestionnaire de communauté
Gestionnaire de communauté

Centrer un formulaire sur un modèle HubSpot

Merci pour ce partage @vrneuman !


Saviez vous que la Communauté est disponible en français?
Rejoignez les discussions francophones en changeant votre langue dans les paramètres !

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


0 Votes