HubSpot Baza wiedzy

Wyśrodkuj formularz na szablonie HubSpot

Autor: HubSpot Support | Oct 18, 2021 4:24:16 PM

Możesz wyśrodkować formularz na szablonie HubSpot, używając poziomych modułów dystansowych lub niestandardowego CSS.

Używanie poziomych modułów dystansowych

  • Kliknij nazwę szablonu w wyszukiwarce, aby go edytować.
  • W inspektorze po prawej stronie kliknij+Dodaj, aby wstawić dwa nowe poziome moduły dystansowe; jeden po lewej, a drugi po prawej stronie modułu formularza.

Używanie niestandardowego CSS

  • W wyszukiwarce, kliknijoszukaj swójplik CSSw obrębie folderów, a następnie kliknij go, aby zaznaczyć go w edytorze.
  • Dodaj następujący kod do wyśrodkowania all swoich formularzy na całej stronie:
/* Aby wyśrodkować formularz w obrębie jego modułu i zastosować maksymalną szerokość */
form.hs-form, .hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}

/* Aby wyśrodkować tytuł formularza w module formularza */
.hs_cos_wrapper .form-title {
text-align: center;
}

/* Aby wyśrodkować przycisk wysyłania formularza */
.hs_submit {
   text-align: center;
}
  • Jeśli chcesz wyśrodkować określone formularze, możesz dodaćniestandardową klasę do swojego modułu formularzyw swoim szablonie, a następnie dostosować swój CSS, aby stosował się tylko do modułów z tą klasą. Na przykład, jeśli dodasz niestandardową klasę center-form do modułu formularzy w swoim szablonie, Twój CSS będzie wyglądał tak:
/* Aby wyśrodkować formularz w obrębie jego modułu i zastosować maksymalną szerokość */
form.hs-form, .center-form .hs_cos_wrapper .form-title{
max-width: 600px;
display: block;
margin: 0 auto;
}

/* Aby wyśrodkować tytuł formularza w obrębie modułu formularza */
.center-form .hs_cos_wrapper .form-title{
text-align: center;
}

/* Aby wyśrodkować przycisk wysyłania formularza */
.center-form .hs_submit{
   text-align: center;
}
  • W prawym górnym rogu kliknij przyciskOpublikuj zmiany.