If you know how to code CSS, you can change the look of the Landing Page form, its position, add extra content (e.g. banner, iframe). 

Editing the code of the Landing Page is only advised to users who know CSS. Omnisend is not responsible for any issues 3rd party code might bring.

Contents

CSS

Landing Page currently supports three types of additional codes:

  • CSS for custom styling.

This option is available in Forms > Landing Page (new or editing) > Content & Design > Design.

CSS

CSS is an acronym for Cascading Style Sheets. Any changes (that you add to the Style (CSS) field) will override our default settings. You can also add your custom CSS classes. By editing CSS you can:

  • Change colors of any element.

  • Change the position of any element.

  • Change the size of any element, and much more.

Don't limit yourself - if you want, you can also change fonts, colors, and much more while editing CSS.

A list of our default CSS classes

.landing-page
.landing-page-template-top
.landing-page-template-logo
.landing-page-template-logo img
.landing-page-form-wrapper
.landing-page-form-container
.landing-page-form-title-line-1
.landing-page-form-title-line-2
.landing-page-form-email-container
.landing-page-form-email-input
.landing-page-form-error
.landing-page-form-submit-button
.landing-page-form-thank-you
.landing-page-template-bottom
.landing-page-soundest-solution
.landing-page-form-text-field
.landing-page-form-text
.landing-page-form-text-expand
.landing-page-form-label
.landing-page-form-country-input
.landing-page-form-email-input
.landing-page-form-name-input
.landing-page-form-surname-input
.landing-page-form-phone-input
.landing-page-form-city-input
.landing-page-form-gender-input
.landing-page-form-gender-label
.landing-page-form-gender-radio
.landing-page-form-content-background
.landing-page-form-birthdateYear-input
.landing-page-form-birthdateMonth-input
.landing-page-form-birthdateDay-input
.landing-page-website-buttonHTML

Let's consider an example.

Problem: The text added to the form is too long to fit the default box and is shrunk by Omnisend to fit the default box.

Solution: We won't change the functionality of the form, but will hide the MORE and LESS buttons, and increase the size of the text box to fit all text.

/*Hide MORE button*/
.expandable-button{
display: none !important;}

/*Increase the size of the text box for mobile*/
@media only screen and (max-width: 600px){
.expandable-text{ height: 250px !important;}}

/*Increase the size of the text box for desktop*/
@media only screen and (min-width: 768px){
.expandable-text{ height: 200px !important;}}

Now, let's verify the form view with both desktop and mobile previews:

Have any additional questions? Feel free to contact us at [email protected].

Did this answer your question?