To collect subscribers with Omnisend, you can use different types of our standard sign-up forms, integrate the default newsletter footer form located in your store template, or the form created with a third-party application that can be integrated with Omnisend (see the full list here). 

In this article, we are going to focus on the custom HTML form offering the solution when none of the options mentioned above works.

Contents

Integrating Custom HTML form
iframe for Landing Page

Integrating Custom HTML form

To collect subscribers with custom forms, 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 any way you like (if you know CSS).

In case you have a newsletter form somewhere in your store template, Omnisend will attempt to capture that form to the Newsletter Signup form on your store template. If we didn't succeed, you may integrate that form manually, using the 1st method, or reach out to our Support Team for assistance. 

In case you don't have that form on your website, you may add a code provided in the 2nd method of this article. Once integrated with Omnisend, it will be captured by the Newsletter Signup form.

Important! Currently, custom forms can capture contact's email, first and last names, and it can only work for online stores, integrated with Omnisend, it won't work on other websites, landing pages, etc.

1st method

This method can be used with practically every form, having the "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.

The example presented below shows how all of the input fields that can be integrated with Omnisend can be modified.

Example for the email first and last names integration

 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 to 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>
 

  

Working with Integrated form

Once your custom HTML form is integrated with Omnisend, you can benefit from:

  • customizing your form success and error messages 
  • adding a tag to organize your new signups into segments and send targeted communication based on the segments you create
  • enabling the double-opt-in option
  • triggering different Welcome email for this form

All of these settings should be applied to the Newsletter Signup form on your store template.

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. Tags will be added to all of the customers, despite the form they used to subscribe.
  3. The style and rules you create to success and error popups will be applied to all of the captured forms.

iframe for Landing Page

If you want to overcome some of the limitations of the custom HTML sign-up forms, you may replace it with the iframe for the Landing Page form.

<iframe name="iframe1" id="iframe1" 
src="XXXX" frameborder="0" border="0" cellspacing="0" style="overflow:scroll;width: 1000px;height:100%;border-width: 0px; height: 700px" scrolling="no">
</iframe>

The width of the form won't be changed, but you can crop your form by changing the value for the height parameter.

To add this form to your website, you need to create a Landing Page form in your Omnisend account. Then copy the code, replace XXXX with your Landing Page URL. Modified code can be added to any place in your store code where this form should be published.

To find the URL for the form, proceed to the sign-up form editor -> Confirm & Launch -> copy the URL.


Adding this form to your website, you can benefit from:

  • adding the input fields, other than email address, first and last names
  • adding GDPR consent collection
  • adding TCPA consent collection

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

Did this answer your question?