AJAX Form with Mailchimp Add Subscriber (+ Uniform Plugin)

Kirby 3 Solved ✅
1

Hey,

I have a form on an enquiry form on a website which uses @mzur fantastic Uniform plugin to send a notification email to the website owners. It’s initiated via a jQuery Ajax call.

There’s a checkbox at the bottom to ‘Subscribe to stay in the know’. I just need for when someone submits the form and that checkbox is checked, the person’s details are sent to the Mailchimp API, but I’m having issues. I am using Kirby Routes, and it’s possible the issue comes from here?

Note that separate to the code below, the Uniform plugin email sender is handled by its own separate Ajax call and route in line with this reference in the docs. I’m also using a separate jQuery validation plugin rather than Uniform’s as I needed custom error styling.

HTML

          <form class="form" novalidate action="<?= $site->url() ?>" method="POST">
            <input class="input--normal" type="text" name="name" placeholder="Name" required/>
            <input class="input--normal" type="tel" name="phone" placeholder="Phone"/>
            <input class="input--normal" type="email" name="email" placeholder="Email" required/>
            <input class="input--normal"  type="text" name="comments" placeholder="Comments"/>

            <div class="input--normal twocol--spaced">
              <span class="subscribe__btn">Subscribe to Stay in the Know</span>
              <div>
                <label class="input--pright subscribe--outer subscribe--y">
                  <input type="radio" name="subscribe" id="subscribe_y" value="yes" data-checked="true" checked>
                  <span class="subscribe__span"></span>
                </label>
                <label class="subscribe--outer subscribe--n">
                  <input type="radio" name="subscribe" id="subscribe_n" value="no" data-checked="false">
                  <span class="subscribe__span"></span>
                </label>
              </div>
            </div>

            <?php echo csrf_field() ?>
            <?php echo honeypot_field() ?>

            <input type="submit"/>
          </form>

JS

        $.ajax({
          type: 'POST',
          dataType: 'json',
          url: $(this).attr('action') + '/mailchimp',
          success: function (result) {
            // You will get response from your PHP page (what you echo or print)
            console.log(result.statusText);
          },
          error: function(jqXHR, textStatus, errorThrown) {
            console.log(result.statusText);
          }
        })
        .done(function(response) {
          console.log('MC signup success');
        })
        .fail(function(data) {
          console.log('MC signup failed');
        });

Route

    [
      'pattern' => 'mailchimp',
      'method' => 'POST',
      'action' => function() {

        $name => $_POST['name'];
      	$email => $_POST['email'];

        $apikey = 'APIKEY';
        $auth = base64_encode( 'user:'.$apikey );

        $data = array(
            'apikey'        => $apikey,
            'email_address' => $email,
            'status'        => 'subscribed',
            'merge_fields'  => array(
                'FNAME' => $name
            )
        );
        $json_data = json_encode($data);

        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, 'https://us2.api.mailchimp.com/3.0/lists/<list_id>/members/');
        curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json',
                                                    'Authorization: Basic '.$auth));
        curl_setopt($ch, CURLOPT_USERAGENT, 'PHP-MCAPI/2.0');
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_TIMEOUT, 10);
        curl_setopt($ch, CURLOPT_POST, true);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $json_data);

        $result = curl_exec($ch);

        var_dump($result);
        die('Mailchimp executed');
      }
    ]

I’ve scoured and tried some of the approaches in especially this post, but to no avail.

Any help to pull me from this deep hole would be much appreciated!

2

Hm, up to which point does this work? One problem I see is that your route doesn’t return any response.

3

Hey @texnixe, it returns a 500 server error. The strange part is that if I visit the URL, eg www.mysite.com/mailchimp and use static values in the curl post request (eg $name => ‘Michael’) it sent the new subscriber to the database :confused: .

Would adding a response to the base help do you think?

Another thought was given I’m already using Uniform to use a webhook, but I seem to be getting the same error.

4

The issue was that I wasn’t capturing the data in the javascript and sending to the PHP POST request. It was solved by changing the following:

      var pfbSignupFNAME = $('#input--fname').val();
      var pfbSignupLNAME = $('#input--lname').val();
      var pfbSignupPHONE = $('#input--phone').val();
      var pfbSignupEMAIL = $('#input--email').val();

      // Create JSON variable of retreived data
      var pfbSignupData = {
        'firstname': pfbSignupFNAME,
        'lastname': pfbSignupLNAME,
        'phone': pfbSignupPHONE,
        'email': pfbSignupEMAIL,
      };

      console.log(pfbSignupData);

      // Send data to PHP script via .ajax() of jQuery
      $.ajax({
        url: $(this).attr('action') + '/mailchimp',
        type: 'POST',
        dataType: 'json',
        data: pfbSignupData, // NOTE! This is what is sending the data to the PHP function, not the 'name' on the HTML5 form
        success: function (results) {
          console.log(results);
        },
        error: function (results) {
          console.log(results);
        }
      });
2 Likes