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

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

Contents

CSS
HTML

Landing Page currently supports three types of additional codes:

  • CSS for custom styling.
  • HTML (above and below your signup form) for extra content.

All of these options are 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 MORE and LESS button, 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:

HTML

HTML is an acronym of Hypertext Markup Language. It allows for adding new content to the Signup Page. Few examples:

  • A large banner above the "Subscribe" form.
  • Youtube video below the "Subscribe" form (using Youtube's embed code).
  • Use some elements from your website (i.e. header, menus, etc.) and make the Signup Page look like your website. In that case, you will need to apply some additional CSS classes in Style (CSS) field.

If you have a large banner and you want to place it on the Signup Page, you'll need to:

  • Upload that banner (if it is an image) to your server.
  • Create a <div> which will contain the image of your banner (in Omnisend's HTML field). If you want, you can add some CSS class to that div as well.

We offer two options where you can add custom HTML:

  • Above the form.
  • Below the form.

You can also add content on the left side of the form (where it is possible regarding the theme chosen). In that case, you will need to add custom HTML in any field (below or above the form) and then change content's position (by editing its CSS classes).

Use-case

If you wish to have a timer on your Landing page you can add it by using HTML.

  1. Go to https://niftyimages.com/CountdownTimers.
  2. Click generate and copy the code.

3. Paste the code to HTML space on the design tab.

4. Add style="display: block;" between countdown link and />. The code should look similar to this one: <img src="https://img1.niftyimages.com/fuw/lo8o/-thd" style="display: block;"/>

Have any additional questions? Feel free to contact us at support@omnisend.com.

Did this answer your question?