To collect subscribers with Omnisend you can use different types of our standard signup forms as well as integrate a default newsletter footer form that is located in the code of your store template. 

If you need to use a different form for more customization, you can integrate a custom HTML signup form!
 

 

Integrating Custom HTML form

To collect subscribers with a custom form you can integrate the following types of embedded signup forms:

  • 1st method. Mark specific HTML tags with Omnisend classes to your current form (i.e. Constant Contact, Aweber, etc.) or 
  • 2nd method. Embed ready-made HTML form from Omnisend which you are free to customize anyway you like (if you know CSS).

Currently custom forms can capture contact's email, name and surname and only work on online stores that are integrated with Omnisend. The forms will not work on other websites, landing pages, etc.

 
 

1st method

You can use this method practically with every form which has a "Submit" button. All you need to do is to mark the old <form> tag with the class "omnisend-subscribe-form" and "input" tag where your subscribers are supposed to enter their email addresses with the class "omnisend-subscribe-input-email". Right after a subscriber submits the form, Omnisend will catch this event.

 
Example for email, name and last name

 Your current "Subscribe" box:

<form class="my-form" action="/subscribe" method="post">
    <input type="text" placeholder="Enter your email address" />
    <input type="text" placeholder="Enter your first name" />
    <input type="text" placeholder="Enter your last name" />
    <input type="submit" value="Subscribe!">
</form>


The very same form but ready to use with Omnisend would look like this:

<form class="my-form omnisend-subscribe-form" action="/subscribe" method="post">
    <input class="omnisend-subscribe-input-email" type="text" placeholder="Enter your email address" />
    <input class="omnisend-subscribe-input-first-name" type="text" placeholder="Enter your first name" />
    <input class="omnisend-subscribe-input-last-name" type="text" placeholder="Enter your last name" />
    <input type="submit" value="Subscribe!">
</form>

 
 

2nd method

The only thing you need to do in this case, is put the code you are provided where you want for the subscription form to appear. If you have sufficient CSS knowledge, you are free to modify the form according to your needs. Just paste the code in the footer, where you usually see subscription forms.  
 

Example for email, name and last name

<div class="span4"> 
    <div class="p30">
        <h4>Newsletter</h4>
        <form class="omnisend-subscribe-form" style="width: 100%;">
            <input type="text" class="omnisend-subscribe-input-email" placeholder="Enter your email address" style="width: 100%; height: 34px; display: block; color: #a0a0a0; font-size: 15px; font-family: Arial, sans-serif; padding: 6px; border: 1px solid #cfcfcf; outline-width: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;" />
            <input type="text" class="omnisend-subscribe-input-first-name" placeholder="Enter your first name" style="width: 100%; height: 34px; display: block; color: #a0a0a0; font-size: 15px; font-family: Arial, sans-serif; padding: 6px; border: 1px solid #cfcfcf; outline-width: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;" />
            <input type="text" class="omnisend-subscribe-input-last-name" placeholder="Enter your last name" style="width: 100%; height: 34px; display: block; color: #a0a0a0; font-size: 15px; font-family: Arial, sans-serif; padding: 6px; border: 1px solid #cfcfcf; outline-width: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;" />
            <input type="submit" value="Subscribe!" style="width: 100%; height: 34px; display: block; color: #ffffff; font-size: 16px; font-weight: bold; font-family: Arial, sans-serif; padding: 8px; margin-top: 5px; background-color: #a2a2a2; border-width: 0px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; outline-width: 0px; cursor: pointer;" />
        </form>
    </div>
</div>
 

 
By default, all subscribers will be added to "Contacts from your shop" list. 

 

Example forms

Here are some great examples of custom CSS forms that you could use with Omnisend:

.soundest-form-wof-wheel-rotor-slices path:nth-child(1){fill:#777}
.soundest-form-wof-wheel-rotor-slices path:nth-child(2){fill:#7bd4ce}
.soundest-form-wof-wheel-rotor-slices path:nth-child(3){fill:#777}
.soundest-form-wof-wheel-rotor-slices path:nth-child(4){fill:#7bd4ce}
.soundest-form-wof-wheel-rotor-slices path:nth-child(5){fill:#777}
.soundest-form-wof-wheel-rotor-slices path:nth-child(6){fill:#7bd4ce}
.soundest-form-wof-wheel-rotor-slices path:nth-child(7){fill:#777}
.soundest-form-wof-wheel-rotor-slices path:nth-child(8){fill:#7bd4ce}
.soundest-form-wof-wheel-rotor-slices path:nth-child(9){fill:#777}
.soundest-form-wof-wheel-rotor-slices path:nth-child(10){fill:#7bd4ce}
.soundest-form-wof-image-logo>img{max-width:80%;}
.soundest-form-wof-open{display:none;}


 

Important to know

Once you create a custom HTML form, make sure it's integrated with Omnisend. That way you will be able to customize your forms as well as add/change success and error messages on your form. Just note, we will capture custom forms along with the automatically captured footer form, however:

  1. All the statistics will be accumulated into one Newsletter Signup form and displayed as totals.
  2. Add a Tag to organize your new signups into segments (you can use existing tags or create a new one) and send targeted communication based on the segments you create
  3. The style and rules you create to success and error popups will be applied to all of the captured forms.

 
Have more questions? Contact us at support@omnisend.com
 

Did this answer your question?