Knowledge Base

Custom HTML "Subscribe" Form

To learn how to integrate a signup form on Shopify, please click here.

In order to start collecting subscribers with custom form in your store you can use one of two methods:

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

This solution works only in those online-shops which have Soundest installed. This custom form cannot be added to other websites, landing pages, etc. (yet). THe universal snippet (working with any website) is available here https://developers.soundest.net/forms.html

1st method

For this method practically every form which has "Submit" button is fine. All you need to do is to mark old <form> tag with the class "soundest-subscribe-form" and "input" tag where your subscribers suppose to enter their email addresses with the class "soundest-subscribe-input". Right after a subscriber submits the form we will catch this event.

Example:

Your current "Subscribe" box:

 

</form>
The very same form but ready to use with Soundest would look like this:

<form class="my-form soundest-subscribe-form" action="/subscribe" method="post">

    <input class="soundest-subscribe-input" type="text" placeholder="Enter your email address" />

    <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 to the subscription form to appear. If you have sufficient CSS knowledge, you are free to modify the form according your needs.

 Paste the code in the footer where it is the most usual to see subscription forms.  
 <div class="span4"> 
    <div class="p30"> 
        <h4>Newsletter</h4> 
        <form class="soundest-subscribe-form" style="width: 100%;"> 
            <input type="text" class="soundest-subscribe-input" 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="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 If you want to add it to other (custom) list, follow these steps:

1. Add "data-list" attribute with list's ID to tag <form>. 

Example:

<form class="my-form soundest-subscribe-form" action="/subscribe" method="post" data-list="XXXXXXXXXXXXXXXXXXXXXXXX">

    <input class="soundest-subscribe-input" type="text" placeholder="Enter your email address" />

    <input type="submit" value="Subscribe!">

</form>

 2. You can find list's ID in Shoppers/Yourcustomlist/Settings.

Was this article helpful?
Yes No
Thank you for your feedback!