Go to rebrand

Email Marketing

Email Marketing helps companies build deeper, longer-lasting relationships with their customers. We use Email Marketing to store and manage our e-mail subscriptions.

Get expert advice delivered right to your inbox

We try to avoid the fluff and deliver tips and guides that really matter


Thank you, you have successfully subscribed to our newsletter! Enjoy reading our tips and recommendations.
Unsubscribe easily whenever you want

Any number of subscription boxes can be added to a site, in order to have multiple ways to obtain users. You have to make sure to have unique form names for each.


Thank you, you have successfully subscribed to our newsletter! Enjoy reading our tips and recommendations.

Dependency

Email Marketing requires ca_styleguide_forms_light.js or ca_styleguide_forms.js in order to make the live validations so make sure it's present on your page

How to use

1. Make sure to include the JS via Lazy Load and CSS into your page or project:

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_styleguide_email_mkt.css') }}" /> <script type="text/javascript" class="lazy-load" data-src="{{ static("js/ca_styleguide_email_mkt.js") }}"></script>

2. Inside a wrapper <div class="nw-subs__box">, add a <form> , the success / error messages and make sure to include a submit button with the email-marketing-sbmt class:

<div class="nw-subs__box"> <form class="nw-subs__frm" name="[ANY NAME]"> <input class="ca-form__input ca-form__input--shadowed" name="email" type="email" minlength="10" required placeholder="Email" /> <button class="email-marketing-sbmt">Send me advice</button> </form> <div class="nw-subs__thnk js-is-hidden">Success message</div> </div>

Custom fields and additional variables

Additional variables or fields are passed through hidden inputs.

The source property is passed through a field with the name source.

The vars and lists properties are passed through fields with data-email-marketing attribute, being data-email-marketing="lists" added to the lists object and data-email-marketing="vars" added to the vars object.

The lists object takes it's property names from the name attribute of the field and always have a 1 as a value since we only signup users to our newsletters, we don't unsubscribe.

For the vars object, the property name will be taken from the name attribute as well and the value from the value attribute. Example: <input type="hidden" name="source" value="Styleguide ThirdParty" /> <input type="hidden" data-email-marketing="vars" name="company" value="styleguide" /> <input type="hidden" data-email-marketing="vars" name="category" value="styleguide" /> <input type="hidden" data-email-marketing="lists" name="Some List Name" value="doesn't matter it'll be 1" />

As default, the script will add the email to the __CA Master List (all users) list. We can customize the lists the user is subscribing to by using listName.


Custom initialization

If you're adding a new subscription box dynamically (with an ajax call for example) after the page loads, you would need to start the script again in order to add the eventListener to the submit button.

For doing that, you can call the init method (there is an instance in the window):

window.CAEmailMarketing.init();

You can also send a DOM element as a parameter, in order to initiate any subscription box inside that element. (The code is going to look for a submit button inside a form, so don't send the form itself, send the parent element instead):

window.CAEmailMarketing.init(yourDOMelement);

UserDB Tracking

You can set the optional type of UserDB email signup event via the data-uapi-email-type="weekly_newsletter" attribute on the form submit button. If this attribute is not added to the submit button, the type data won't be send in the payload. See an example on the first form of this page.

The payload that wil be sent:

payload = { category: 'page interaction', name: 'email signup', data: { success: [true, false], type: ['weekly_newsletter', 'daily_newsletter', 'radio'], }, };