Vidensbase

Centrer en formular på en HubSpot-skabelon

Skrevet af HubSpot Support | Jun 28, 2023 12:40:24 PM

Du kan centrere en formular på en HubSpot-skabelon ved hjælp af vandrette afstandsmoduler eller brugerdefineret CSS.

Brug af vandrette afstandsmoduler

  • Klik på skabelonnavnet i søgeren for at redigere.
  • I inspektøren til højre skal du klikke på + Tilføj for at indsætte to nye vandrette afstandsmoduler; et til venstre og et til højre for dit formular-modul.

Brug af brugerdefineret CSS

  • Find din CSS-fil i søgeren i mapperne, og klik derefter på den for at vælge den i editoren.
  • Tilføj følgende kode for at centrere alle dine formularer på tværs af din hjemmeside:
/* To center the form within its module and applying a max-width */ form.hs-form, .hs_cos_wrapper .form-title { max-width: 600px; display: block; margin: 0 auto; } /* To center the form title within a form module */ .hs_cos_wrapper .form-title { text-align: center; } /* To center the form submit button */ .hs_submit { text-align: center; } 
  • Hvis du vil centrere specifikke formularer, kan du tilføje en brugerdefineret klasse til dit formularmodul på din skabelon og derefter justere din CSS, så den kun gælder for moduler med den klasse. Hvis du f.eks. tilføjer den brugerdefinerede klasse center-form til dit formular-modul på din skabelon, vil din CSS se sådan ud:
/* To center the form within its module and applying a max-width */ form.hs-form, .center-form .hs_cos_wrapper .form-title { max-width: 600px; display: block; margin: 0 auto; } /* To center the form title within a form module */ .center-form .hs_cos_wrapper .form-title { text-align: center; } /* To center the form submit button */ .center-form .hs_submit { text-align: center; }
  • Klik på Publish changes øverst til højre.