Lomakkeen keskittäminen HubSpot-malliin

Voit keskittää lomakkeen HubSpot-mallissa käyttämällä vaakasuuntaisia välimoduuleja tai mukautettua CSS:ää.

Vaakasuuntaisten välimoduulien käyttäminen

• Siirry HubSpot-tililläsi kohtaan Markkinointi > Tiedostot ja mallipohjat > Suunnittelutyökalut.
• Muokkaa mallia napsauttamalla mallin nimeä hakulaitteessa.
• Napsauta oikealla olevassa tarkastajassa+Lisää lisätäksesi kaksi uutta vaakasuoraa välimoduulia; toinen lomakemoduulin vasemmalle ja toinen oikealle puolelle.

Mukautetun CSS:n käyttäminen

• Siirry HubSpot-tililläsi kohtaan Markkinointi > Tiedostot ja mallipohjat > Suunnittelutyökalut.
• Etsijässä locate yourCSS-tiedostokansioiden sisällä ja valitse se sitten editorissa napsauttamalla sitä.
• Lisää seuraava koodi center all lomakkeiden keskelle kaikkialla verkkosivustollasi:

/* Lomakkeen keskittäminen moduulin sisällä ja maksimileveyden soveltaminen */
form.hs-form, .hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}

/* Lomakkeen otsikon keskittäminen lomakemoduulin sisällä */
.hs_cos_wrapper .form-title {
text-align: center;
}

/* Lomakkeen lähetyspainikkeen keskittäminen */
.hs_submit {
   text-align: center;
}

• Jos haluat keskittää tietyt lomakkeet, voit lisätä lomakkeisiinmukautetun luokan lomakemoduuliinmalliisi ja säädä sitten CSS:ääsi niin, että se koskee vain moduuleja, joissa on tämä luokka. Jos esimerkiksi lisäät mukautetun luokan center-form lomakemoduuliin mallissasi, CSS näyttää seuraavalta:

/* Lomakkeen keskittäminen moduulin sisällä ja maksimileveyden soveltaminen */
form.hs-form, .center-form .hs_cos_wrapper .form-title{
max-width: 600px;
display: block;
margin: 0 auto;
}

/* Lomakkeen otsikon keskittäminen lomakemoduulin sisällä */
.center-form .hs_cos_wrapper .form-title{
text-align: center;
}

/* Lomakkeen lähetyspainikkeen keskittäminen */
.center-form .hs_submit{ center-form .hs_submit{
   text-align: center;
}

• Napsauta oikeassa yläkulmassaJulkaise muutokset.