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%;}

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');
.soundest-form-without-image-headline-table-cell{
font-family: Chilanka !important;}
.soundest-form-without-image-second-headline{
font-family: Pacifico !important;}

Create a Popup without input fields

This task consists of two stages — adding two buttons to the Signup form and also enabling a specific functionality for both of them.

In the CSS editor of the Form, you can hide unnecessary buttons and also add two others:

.button {
background: #000000;
color: #FFFFFF;
font-size: 18px;
padding: 15px 25px;
margin: 0 5px;
text-decoration: none;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
min-width: 150px;
display: inline-block;
margin-bottom: 10px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
color: #FFFF !important;}

.soundest-form-simple-field, .soundest-form-simple-submit {
display: none;}
.soundest-form-simple-field-select {
display: none;}

.button.soundest-form-simple-close {
border: none !important;
height: auto;
width: auto;}

Apart from adding those buttons to the form, we should also add some functionality to them. The form should be closed after clicking on any of these buttons:

.button.soundest-form-simple-close:after, .button.soundest-form-simple-close:before {
display: none;}

Besides, we also want to redirect the website visitor to the page with a specific offer. Thus, we are adding the names and functional classes to each of these buttons.

<br><a href="your_URL" class="button soundest-form-simple-close "> Yes, Please</a> <a href="/" class="soundest-form-simple-close button">No, thanks</a></br>

After clicking on the No, thanks button, the form will be closed, while after clicking on the Yes, please one the page with a special offer opens up

"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.

.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);}

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?