Formular in einer HubSpot-Vorlage zentrieren

[vrneuman]

Sie können Ihr Formular mithilfe des Moduls „Horizontaler Abstandhalter“ oder CSS in einer HubSpot-Vorlage zentrieren.

 

Mithilfe des Moduls „Horizontaler Abstandhalter“

• Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
• Klicken Sie im Finder auf den Namen der Vorlage.
• Klicken Sie im Inspektor rechts auf + Hinzufügen, um zwei neue Module „Horizontaler Abstandhalter“ einzufügen. Eins der Module wird links vom Formularmodul, das andere rechts davon angeordnet.

Mithilfe von benutzerdefiniertem CSS

• Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
• Suchen Sie im Finder Ihre CSS-Datei in den Ordnern, und klicken Sie auf die Datei, um sie im Editor auszuwählen.
• Fügen Sie den folgenden Code ein, um alle Ihre Formulare auf Ihrer Website zu zentrieren:

/* Zum Zentrieren des Formulars innerhalb seines Moduls und Anwenden einer maximalen Breite */
form.hs-form,
.hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}

/* Zum Zentrieren des Formulartitels innerhalb eines Formularmoduls */
.hs_cos_wrapper .form-title {
text-align: center;
}

/* Zum Zentrieren der Einsende-Schaltfläche im Formular */
.hs_submit {
    text-align: center;
}

• Wenn Sie nur bestimmte Formulare zentrieren möchten, können Sie Ihrem Formularmodul in Ihrer Vorlage eine benutzerdefinierte Klasse hinzufügen und dann den CSS-Code anpassen, damit dieser nur für Module mit dieser Klasse gilt. Wenn Sie Ihrem Formularmodul z. B. die benutzerdefinierte Klasse center-form hinzufügen, sieht der CSS-Code wie folgt aus:

/* Zum Zentrieren des Formulars innerhalb seines Moduls und Anwenden einer maximalen Breite */
form.hs-form,
.center-form .hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}

/* Zum Zentrieren des Formulartitels innerhalb eines Formularmoduls */
.center-form .hs_cos_wrapper .form-title {
text-align: center;
}

/* Zum Zentrieren der Einsende-Schaltfläche im Formular */
.center-form .hs_submit {
    text-align: center;
}

• Klicken Sie oben rechts auf Änderungen veröffentlichen.