Knowledge Base

Advanced Settings of Signup Page

If you know how to code HTML and CSS, you can change the entire look of the "Subscribe" form, its position, add additional content (for example: banner, iframe).


Code editor

The code editor is designed to be as useful as possible for the developer. There are few shortcuts. They are displayed below every field. CTRL + SPACE is useful and its hints depend on what you are working with.

  • If you are working in "Style (CSS)" field and press CTRL + SPACE, you will see a list of our default CSS classes that are used in our landing page.
  • If your marker in inside the class, then the editor will offer properties. Here's an example.

In HTML fields CTRL + SPACE will offer you all html tags possible. If you start typing a tag and then press CTRL + SPACE, the autocomplete will offer you most relevant tags.

Note: if you are using MAC, you should still press CTRL + SPACE (not CMD).

Style (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.

Here's an example of customized Signup Page (only CSS was edited).

Here's how we did it:

  • We added an image as a background. Note: you'll need to host an image somewhere in your server. 
  • We changed the position of the "Subscribe" form and changed height, margin of some elements.
  • Translations were changed in the initial Texts tab and the logo was uploaded in under the Style tab.

CSS code of this Signup Page:

#content {
    padding: 55px 0px;
}
@media (min-width: 1000px) {
    html, body {
        height: 100%;
    }
    body {
        background: url("http://example.com/sampleimage.png") no-repeat center fixed;
        background-position: 25% 25%;
        background-size: cover;
    }
    #content.landing-page {
        padding: 0px;
    }
    #content.landing-page .center.small {
        position: absolute;
        left: 50%;
        background-color: #ffffff;
    }
    #content.landing-page .landing-page-template-logo {
        padding: 50px 0px 15px 0px;
        margin: 0px;
    }
    #content.landing-page .box {
        border-width: 0px;
        padding: 35px 35px 50px 35px;
    }
}

 

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-please-wait
.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

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 Soundest'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 "Subscribe" form.
  • Below the "Subscribe" form.

You can also add content on the left side of the form. 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).

In the initial Texts tab and the logo was uploaded in under the Style tab.

Was this article helpful?
Yes No
Thank you for your feedback!