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.

Please be aware that this guide is for Classic Form Builder only.


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 bar 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 bar 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 bar 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 bar 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 bar 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 an Image Left layout.

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

.soundest-form-image-left-phone-item-shortcut {
display: none;

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

  • replace the name image-left 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. 🚀

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.


Use custom fonts

If you wish your signup forms to match the style of your website, you might need to go beyond the scope of the fonts available in Omnisend. To solve this problem, you can import one of the publicly available fonts and use it in your Signup form content.

Let's consider the example when we add two fonts offered by Google:

@import url('https://fonts.googleapis.com/css?family=Chilanka&family=Pacifico');
font-family: Chilanka !important;}
font-family: Pacifico !important;}

"Shaking" widget

If you want to add a "shaking" widget effect to the Signup form, add these lines of the code to the CSS editor. Make sure to replace the form theme with the appropriate one.

Please note that shaking will only work if the widget is placed either on top or at the bottom of the page.

.soundest-form-image-left-open {
animation: shake 3s infinite ease-in;}

@keyframes shake {
10%, 90% {
transform: translate3d(0px, 0, 0);}
20%, 80% {
transform: translate3d(2px, 0, 0);}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);}
40%, 60% {
transform: translate3d(4px, 0, 0);}

Stick widget to the left

If you don't want to show your Signup bar widget at the bottom of the screen on mobile devices, you can use this code to stick it to the left.

@media only screen and (max-width: 768px) {

.soundest-form-background-image-open {
-webkit-transform: translate(-50%,0) rotate(-90deg);
-moz-transform: translate(-50%,0) rotate(-90deg);
-o-transform: translate(-50%,0) rotate(-90deg);
-ms-transform: translate(-50%,0) rotate(-90deg);
transform: translate(-50%,0) rotate(-90deg);
transform-origin: center center;
bottom: 50%;
width: 40% /*change 40% to any width that you need*/

Click outside of a popup to close

If you want your customers to be able to exit one of our pop-ups by clicking on the outside area, you will need to take close button <a> class -> use this class -> use this custom CSS rules ( in this example, "X" button class is "soundest-form-image-left-close", as we're using image left form type).

Then use this code, but replace all '.soundest-form-image-left-close' with your close button <a> class:

.soundest-form-image-left-close { 
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 0;
border: none;


.soundest-form-image-left-close:before {
display: none;


Image leading to a link

Create this form :

Layout: Background-image

Set background image:

Paste this code to "Headline text" input area and change bold part to actual link where click should lead:

<a href="ADDURLHERE" class="omnisend-bg-image-link">Click here</a>

Then add this code to custom CSS area :

.soundest-form-background-image-inner-block-bg {
opacity: 0 !important}
.soundest-form-recollection-headline-wrapper {
opacity: 0 !important;
height: 220px;
width: 200px;
.omnisend-bg-image-link {
position: absolute;
top: -60px;
left: -100px;
width: 540px;
height: 400px;
border:none !important;

.soundest-form-background-image-second-headline {
display: none !important;
.soundest-form-background-image-fields {
display:none !important;
.soundest-form-background-image-submit {
display: none !important;
.soundest-form-background-image {
background-position: inherit !important; }
@media screen and (max-width: 500px) {
.omnisend-bg-image-link {
left: 0;

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?