Centrera ett formulär på en HubSpot-mall

Du kan centrera ett formulär i en HubSpot-mall med hjälp av horisontella distansmoduler eller anpassad CSS.

Använda horisontella distansmoduler

• I ditt HubSpot-konto, navigera till Marknadsföring > Filer och mallar > Designverktyg.
• Klicka på mallens namn i sökaren för att redigera.
• I inspektorn till höger klickar du på+Lägg till för att infoga två nya horisontella distansmoduler, en till vänster och en till höger om formulärmodulen.

Användning av anpassad CSS

• I ditt HubSpot-konto, navigera till Marknadsföring > Filer och mallar > Designverktyg.}
• I sökaren, ldinCSS-filKlicka sedan på den i mapparna för att välja den i redigeraren.
• Lägg till följande kod i center alla av dina formulär på hela webbplatsen:

/* För att centrera formuläret i sin modul och tillämpa en maxbredd */
form.hs-form,
.hs_cos_wrapper .form-title {
max bredd: 600px;
display: block;
marginal: 0 auto;
}

/* Centrera formulärets titel i en formulärmodul */
.hs_cos_wrapper .form-title {
text-align: center;
}

/* För att centrera knappen för att skicka in formuläret */
.hs_submit {
   text-align: center;
}

• Om du vill centrera specifika formulär kan du lägga till enegen klass till din formulärmoduli mallen och sedan anpassa CSS så att den endast gäller för moduler med den klassen. Om du till exempel lägger till den anpassade klassen center-form till formulärmodulen i mallen skulle CSS-filen se ut så här:

/* För att centrera formuläret i modulen och tillämpa en maxbredd */
form.hs-form,
.center-form .hs_cos_wrapper .form-title{
max bredd: 600px;
display: block;
marginal: 0 auto;
}

/* Centrera formulärets titel i en formulärmodul */
.center-form .hs_cos_wrapper .form-title{
text-align: center;
}

/* För att centrera knappen för att skicka formuläret */
.center-form .hs_submit{
   text-align: center;
}

• Klicka påPublicera ändringar uppe till höger.