Allow users to subscribe to blog updates

[dennyabrain]

Prior Research :

We use Mailchimp to host our mailing list. Mailchimp has Audience A recommended way to segment your audience is using tags. You can create a signup form and set a tag called "blog" to it. You can embed this form on tattle.co.in/blog. Whenever a user subscribes via this form, an entry will be made of their email address in the Audience list and a tag "blog" will be associated with this user. You can then filter your audience by tag to target just these people.

Embeddable Code

I created a new form and associated the tag "Blog" to it. This should be ready to embed on our website

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-071822.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif;  width:600px;}
    /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
    <form action="https://app.us19.list-manage.com/subscribe/post?u=a9af83af1f247ecc04f50ad46&amp;id=4afc4a2c79&amp;f_id=003a91e4f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self">
        <div id="mc_embed_signup_scroll">
        <h2>Subscribe </h2>
        <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
    <label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
    <span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</div>
<div hidden="true"><input type="hidden" name="tags" value="6638789"></div>
    <div id="mce-responses" class="clear foot">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_a9af83af1f247ecc04f50ad46_4afc4a2c79" tabindex="-1" value=""></div>
        <div class="optionalParent">
            <div class="clear foot">
                <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
                <p class="brandingLogo"><a href="http://eepurl.com/iiuKOf" title="Mailchimp - email marketing made easy and fun"><img src="https://eep.io/mc-cdn-images/template_images/branding_logo_text_dark_dtp.svg"></a></p>
            </div>
        </div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

[dennyabrain]

I edited the code a bit to work with react

<div id="mc_embed_signup">
            <form
              action="https://app.us19.list-manage.com/subscribe/post?u=a9af83af1f247ecc04f50ad46&amp;id=4afc4a2c79&amp;f_id=003a91e4f0"
              method="post"
              id="mc-embedded-subscribe-form"
              name="mc-embedded-subscribe-form"
              class="validate"
              target="_self"
            >
              <div id="mc_embed_signup_scroll">
                <h2>Subscribe </h2>
                <div class="indicates-required">
                  <span class="asterisk">*</span> indicates required
                </div>
                <div class="mc-field-group">
                  <label for="mce-EMAIL">
                    Email Address <span class="asterisk">*</span>
                  </label>
                  <input
                    type="email"
                    value=""
                    name="EMAIL"
                    class="required email"
                    id="mce-EMAIL"
                    required
                  />
                  <span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
                </div>
                <div hidden="true">
                  <input type="hidden" name="tags" value="6638789" />
                </div>
                <div id="mce-responses" class="clear foot">
                  <div
                    class="response"
                    id="mce-error-response"
                    style={{ display: "none" }}
                  ></div>
                  <div
                    class="response"
                    id="mce-success-response"
                    style={{ display: "none" }}
                  ></div>
                </div>
                <div
                  style={{ position: "absolute", left: "-5000px" }}
                  aria-hidden="true"
                >
                  <input
                    type="text"
                    name="b_a9af83af1f247ecc04f50ad46_4afc4a2c79"
                    tabindex="-1"
                    value=""
                  />
                </div>
                <div class="optionalParent">
                  <div class="clear foot">
                    <input
                      type="submit"
                      value="Subscribe"
                      name="subscribe"
                      id="mc-embedded-subscribe"
                      class="button"
                    />
                    <p class="brandingLogo">
                      <a
                        href="http://eepurl.com/iiuKOf"
                        title="Mailchimp - email marketing made easy and fun"
                      >
                        <img src="https://eep.io/mc-cdn-images/template_images/branding_logo_text_dark_dtp.svg" />
                      </a>
                    </p>
                  </div>
                </div>
              </div>
            </form>
          </div>

It needs more tweaking to make the styling work. Or maybe there's a better solution. In the past we've embedded a mailchimp subscribe form with custom Tattle style using a react-mailchimp-subscribe component (https://github.com/tattle-made/website/blob/master/src/components/atomic/MailchimpSubscribeForm.js) We could read that component's source code to figure out how its done.

[maanasb01]

Hello, I would like to work on this issue. Should I make a reusable component from the existing form (on the home page), and use it at both the places with different props?

[dennyabrain]

@maanasb01 lets hold off on this for a while. Its been a while since I looked at this and its possible that the code I have shared above might not be upto date anymore. At some point i'll share our mailchimp access with you so you can do this fully on your own and also test this. lets take this up later.

[maanasb01]

@dennyabrain Sure. Thanks for letting me know!