While creating your forms in Omnisend, you are free to choose any of the layouts or change the design using any of the tools available in the editor. But if you feel comfortable with changing the styling of the forms using custom CSS coding, you may find some hints in this article.

Contents

CSS editor
Signup form classes
Frequent requests

CSS editor

To find the CSS styling menu, proceed to the Signup form editor -> Content & Design tab -> Design and add a check-mark next to the Use custom code option.

Once you add a check-mark, a small editing window where you can add your custom coding will be shown to you. Note, for the change to be visible, you should add !important property after each customization.

Signup form classes

The codes used in the CSS editor will differ depending on the layout you are choosing. You may find the full list of the layouts available for each of your forms in the first step of the Signup form editing.

Image Left [image-left]

.soudest-form-image-left-content-outer {}
.soudest-form-image-left-content-inner {}
.soundest-form-image-left-first-block {}
.soundest-form-image-left-second-block {}
.soundest-form-image-left-close {}
.soundest-form-image-left-logo {}
.soundest-form-image-left-headline {}
.soundest-form-image-left-second-headline {}
.soundest-form-image-left-field {}
.soundest-form-image-left-submit {}

Class of the Signup box widget:

.soundest-form-image-left-open {}

Image Right [image-right]

.soundest-form-image-right-content-outer {}
.soundest-form-image-right-content-inner {}
.soundest-form-image-right-first-block {}
.soundest-form-image-right-second-block {}
.soundest-form-image-right-close {}
.soundest-form-image-right-logo {}
.soundest-form-image-right-headline {}
.soundest-form-image-right-second-headline {}
.soundest-form-image-right-field {}
.soundest-form-image-right-submit {}

Class of the Signup box widget:
.soundest-form-image-right-open {}

Background image [background]

.soundest-form-background-image-outer-block {}
.soundest-form-background-image-inner-block {}
.soundest-form-background-image-form {}
.soundest-form-background-image-close {}
.soundest-form-background-logo {}
.soundest-form-background-image-headline {}
.soundest-form-background-image-second-headline {}
.soundest-form-background-image-field {}
.soundest-form-background-image-submit {}

Class of the Signup box widget:

.soundest-form-background-image-open {}

Without image [without-image]

.soundest-form-without-image-form {}
.soundest-form-without-image-close {}
.soundest-form-without-image-logo {}
.soundest-form-without-image-headline {}
.soundest-form-without-image-second-headline {}
.soundest-form-without-image-field {}
.soundest-form-without-image-submit {}

Class of the Signup box widget:

.soundest-form-without-image-open {}

Simple [simple]

.soundest-form-simple-content-outer {}
.soundest-form-simple-content-inner {}
.soundest-form-simple-close {}
.soundest-form-simple-logo {}
.soundest-form-simple-headline {}
.soundest-form-simple-second-headline {}
.soundest-form-simple-field {}
.soundest-form-simple-submit {}

Class of the Signup box widget:

.soundest-form-simple-open {}

Frequent requests

In this section, we will present a few solutions to the most common requests.

Reducing the number of country codes suggestions

To solve this problem, we would recommend you to hide all of the countries from the list except the first one. If your store is operating on the local level, it might be a perfect solution, as this line is selected according to the country you have in your Store Settings. In other words, the business registered in the United States will see the +1 code in the form.

Below, you can see the code tailored for the form with a Simple layout.

.soundest-form-simple-field-phone-dropdown-inner > .soundest-form-simple-phone-item ~ .soundest-form-flag {
display: none;}
.soundest-form-simple-field-phone-dropdown {
bottom: -66px !important;
height: 60px !important;
width: 470px !important;
.soundest-form-simple-field-phone-dropdown-title {
display: none;}
.soundest-form-simple-phone-item-shortcut {
display: none;}
.soundest-form-simple-phone-item:hover {
background: #eee !important;
color: black !important;}

If you want to implement this solution to another type of form, you will need to change a few things:

  • replace the name simple with the name of the form layout;
  • adjust the height and width settings to match the size of the signup form;
  • change the background color of the hovered area.

That's it! You've got the form collecting phone numbers from the locals only. 🚀

Reduce the size of the logo

One of the prevalent requests is to reduce the size of the logo displayed on the signup form. The solution is pretty simple and requires one line of code only.

.soundest-form-image-left-logo>img{max-width:60%;}

We've mentioned only a few solutions. If you need assistance with your signup forms design, we encourage you to check these instructions with a knowledgeable person.

Did this answer your question?