Sentrere et skjema på en HubSpot-mal

Du kan sentrere et skjema i en HubSpot-mal ved hjelp av horisontale avstandsmoduler eller tilpasset CSS.

Bruke horisontale avstandsmoduler

• Gå til Innhold > Design Manager i HubSpot-kontoen din.
• Klikk på malnavnet i søkeren for å redigere.
• I inspektøren til høyre klikker du på + Legg til for å sette inn to nye horisontale avstandsmoduler, én til venstre og én til høyre for skjemamodulen.

Bruke tilpasset CSS

• Gå til Innhold > Design Manager i HubSpot-kontoen din.
• Finn CSS-filen i søkeren i mappene, og klikk deretter på den for å velge den i redigeringsprogrammet.
• Legg til følgende kode for å sentrere alle skjemaene på hele nettstedet:

/* 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 sentrere bestemte skjemaer, kan du legge til en egendefinert klasse i skjemamodulen i malen og deretter justere CSS-en slik at den bare gjelder for moduler med denne klassen. Hvis du for eksempel legger til den egendefinerte klassen center-form i skjemamodulen i malen, vil CSS-en se slik ut:

/* 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; }

• Klikk på Publiser endringer øverst til høyre.