0
Welcome Guest! Login
0 items Join Now

Tutorial: Integrating Mailchimp with the Newsletter Particle

Last Post
Search Topic
    • pdowse's Avatar
    • pdowse
    • Hero Rocketeer
    • Posts: 292
    • Thanks: 31

    Tutorial: Integrating Mailchimp with the Newsletter Particle

    Posted 6 years 9 months ago
    • Hi All,

      Thought I would put this process up to help other members, but also as a record if I need to do this again myself! :-)

      Step One
      First you will need to set up a particle override for the Newsletter Particle so you don't orverride your original files. This is very straight forward.

      Simply create a folder called 'particles' in templates/your_template/custom and copy both 'newsletter.yaml'and 'newsletter.html.twig' (you will find these in the templates/your_template/particles folder, if they're not there you might need to grab these files from another template with this particle)

      Next you will need to copy the _newsletter.scss file from templates/your_template/scss to templates/your_template/custom/scss and add this to your custom.scss file
      @import "dependencies";
@import "newsletter";

      Step Two
      You will need to log into your mailchimp account to get some code for the newsletter particle. Here's the instructions on how to get this code
      http://kb.mailchimp.com/lists/signup-forms/host-your-own-signup-forms

      Step Three
      Now you will want to edit your 'newsletter.html.twig' file. (make sure it's the one in your templates/your_template/custom/particles folder)

      I replaced line 13 code
      <form class="g-newsletter-form" action="//feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('//feedburner.google.com/fb/a/mailverify?uri={{ particle.uri|e }}', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

      with the code from my Mailchimp form - looks like this (you will need to get your customised code using the instructions above)
      <form action="http://mailchimp.us8.list-manage.com/subscribe/post" method="POST">

<input type="hidden" name="u" value="a123cd45678ef90g7h1j7k9lm">

<input type="hidden" name="id" value="ab2c468d10">

      Then I replaced line 16 code
      <input type="text" placeholder="{{ particle.inputboxtext|raw }}" name="email">

      with this code
      <label for="MERGE0"></span></label>
            <div class="field-group">
                <input type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="">
                
                
            </div>

      Then I replaced line 21 code
      <input type="submit" name="Submit" class="button {{ particle.buttonclass|e }}" value="{{ particle.buttontext|raw }}">

      with this code
      <input type="submit" class="button" name="submit" value="Subscribe">
				</div>
			</div>
			    <input type="hidden" name="ht" value="This will be a series of numbers and letters from your mailchimp page - make sure to add it in">
    <input type="hidden" name="mc_signupsource" value="hosted">

      Now I'm by no means a programmer so not sure if this is the best way to do it or not (I'm sure there's much smarter people than me who would do it cleaner and better) but this worked for me so hopefully it works for you too!

    • The following users have thanked you: David Goode, landed, MrT, Matt, Damir

    • Good things come to those who wait - but it's only what's left over from those who don't
    #1354049
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 21555
    • Thanks: 3089
    • messin' with stuff

    Re: Tutorial: Integrating Mailchimp with the Newsletter Particle

    Posted 6 years 1 month ago
    #1378328

Time to create page: 0.040 seconds