Editing the code of Landing Page is only advice to users who know HTML, CSS, and JavaScript well. Omnisend does not hold any responsibility for the issues 3rd party code might bring.

If you know how to code HTML, CSS or JavaScript, you can change the look of Landing Page form, its position, add additional content (for example: banner, iframe).

Landing Page currently supports three types of additional code:

  • CSS for custom styling
  • HTML (above and below your signup form) for additional content
  • JavaScript for additional features or tracking

All of these options are available at Forms > Landing Page (new or editing) > Content & Design > Design.

CSS

CSS is acronym of Cascading Style Sheets. Any changes (that you add to 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 position of any element.
  • Change 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

HTML

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

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

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

  • Upload that banner (if it is an image) to your own 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).

JavaScript

JavaScript is a programming language used to make web pages interactive or add additional tracking to the page. You can use it to add any needed tracking scripts.

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

Did this answer your question?