Brooklyn signup form to Klaviyo list

New Member
1 0 0

Hi,

After 4 hours of struggling I could use your help: I would like the keep the original email subscribe form but linking to the Klaviyo newsletter list. How can this be accomplished?
 
Unfortunately the Klaviyo FAQ pages are only giving me an half answer for what I need (like: https://help.klaviyo.com/hc/en-us/articles/115005252528-Migrate-Shopify-Newsletter-Subscribers-into-...
where nothing is described if I want to use the original Shopify/Brooklyn signup form, as the Klaviyo one is impossible for me to style well).

 

I am using the Brooklyn theme, with the standard newsletter.liquid file:

<div class="newsletter">
  <div class="wrapper">
    {% unless section.settings.heading == blank %}
      <div class="section-header text-center">
        <h2 class="h1 section-header__title">{{ section.settings.heading | escape }}</h2>
        {% if section.settings.subheading == blank %}
          <hr class="hr--small">
        {% endif %}
      </div>
    {% endunless %}
    {% unless section.settings.subheading == blank %}
      <div class="section-subheading text-center">
        <p>{{ section.settings.subheading | escape }}</p>
        <hr class="hr--small">
      </div>
    {% endunless %}
    {% form 'customer' %}
      {{ form.errors | default_errors }}
      {% if form.posted_successfully? %}
        <div class="newsletter--form">
          <div class="note form-success">{{ 'general.newsletter_form.newsletter_confirmation' | t }}</div>
        </div>
      {% else %}
        <label for="Email" class="newsletter__label hidden-label">{{ 'general.newsletter_form.newsletter_email' | t }}</label>
        <input type="hidden" name="contact[tags]" value="newsletter">
        <div class="newsletter--form">
          <div class="input-group">
            <input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.newsletter_placeholder' | t }}" name="contact[email]" id="Email" class="input-group-field newsletter__input" autocorrect="off" autocapitalize="off">
            <span class="input-group-btn">
              <button type="submit" class="btn newsletter__submit" name="commit" id="Subscribe">
                <span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>
                <span class="newsletter__submit-text--small">
                  <span class="icon icon-arrow-right" aria-hidden="true"></span>
                </span>
              </button>
            </span>
          </div>
        </div>
      {% endif %}
    {% endform %}
  </div>
</div>

{% schema %}
  {
    "name": "Newsletter",
    "class": "index-newsletter-section",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Subscribe to our newsletter"
      },
      {
        "type": "text",
        "id": "subheading",
        "label": "Subheading",
        "default": "A short sentence describing what someone will receive by subscribing"
      },
      {
        "type": "paragraph",
        "content": "Any customers who sign up will have an account created for them in Shopify. [View customers](/admin/customers?query=&accepts_marketing=1)"
      }
    ],
    "presets": [{
      "name": "Newsletter signup",
      "category": "Promotional"
    }],
    "blocks" : []
  }
{% endschema %}

I know I have to send the emailaddress to Klaviyo but not sure how. What I currently did is this:

   <form id="email_signup" action="//manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="//manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET">
  <input type="hidden" name="g" value="JXynWp">
<!--    {% form 'customer' %} -->


And this


</form><script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<!-- {% endform %}  -->

Trying to get the information from this article working: https://help.klaviyo.com/hc/en-us/articles/115005080167-Redirect-Existing-Sign-Up-Forms-to-Klaviyo 

 

This is the code if I use an email signup field from Klaviyo (which is impossible for me to style, that is why I would like to use the Brooklyn theme one)

<form id="email_signup" class="klaviyo_condensed_styling klaviyo_condensed_float klaviyo_condensed_embed_JXynWp" action="//manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="//manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank" novalidate="novalidate">
  <input type="hidden" name="g" value="JXynWp">
  <div class="klaviyo_field_group">
    <label for="k_id_email">Newsletter Sign Up</label>
    <input type="email" value="" name="email" id="k_id_email" placeholder="Your email" />
  </div>
  <div class="klaviyo_messages">
    <div class="success_message" style="display:none;"></div>
    <div class="error_message" style="display:none;"></div>
    </div>
  <div class="klaviyo_form_actions">
    <button type="submit" class="klaviyo_submit_button">Subscribe</button>
  </div>
</form>
<style type="text/css">
.klaviyo_styling.klaviyo_condensed_embed_JXynWp,
.klaviyo_condensed_styling.klaviyo_condensed_embed_JXynWp {
  font-family: "Helvetica Neue", Arial;
}.klaviyo_styling.klaviyo_condensed_embed_JXynWp label,
.klaviyo_condensed_styling.klaviyo_condensed_embed_JXynWp label {
  color:#222;
}.klaviyo_styling.klaviyo_condensed_embed_JXynWp input[type=text],
.klaviyo_styling.klaviyo_condensed_embed_JXynWp input[type=email],
.klaviyo_condensed_styling.klaviyo_condensed_embed_JXynWp input[type=text],
.klaviyo_condensed_styling.klaviyo_condensed_embed_JXynWp input[type=email] {
  border-radius: 2px;
}.klaviyo_styling.klaviyo_condensed_embed_JXynWp .klaviyo_submit_button,
.klaviyo_condensed_styling.klaviyo_condensed_embed_JXynWp .klaviyo_submit_button {
  background-color:#0064cd;
  border-radius: 2px;
}.klaviyo_styling.klaviyo_condensed_embed_JXynWp .klaviyo_submit_button:hover,
.klaviyo_condensed_styling.klaviyo_condensed_embed_JXynWp .klaviyo_submit_button:hover {
  background-color:#0064cd;
}
</style>
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script type="text/javascript">
  KlaviyoSubscribe.attachToForms('#email_signup', {
    hide_form_on_success: true
  });
</script>

Thanks,

Rudy

0 Likes
Shopify Partner
24 1 1