如何在电子邮件注册表单中实现mailchimp API？

Question

Here is a snippet of html that comes from a website template that has a MailChimp API form.

<div class="row">
  <div class="col-md-6 col-sm-12 col-md-offset-3 subscribe">
    <form class="form-horizontal" role="form" action="subscribe.php" id="subscribeForm" method="POST">
      <div class="form-group">
        <div class="col-md-7 col-sm-6 col-sm-offset-1 col-md-offset-0">
          <input class="form-control input-lg" name="email" type="email" id="address" placeholder="Enter your email" data-validate="validate(required, email)" required="required">
        </div>
        <div class="col-md-5 col-sm-4">
          <button type="submit" class="btn btn-success btn-lg">SIGN UP TO BE NOTIFIED</button>
        </div>
      </div>
    </form>
    <span id="result" class="alertMsg"></span> </div>
</div>

This is the email submission form for the website template that I'm currently using. This form directly submits an email to my account; my question is: how can I turn the following form into a mailchimp API form? I mainly want to use it because it's correctly formatted already for the website im making - aka it works with the css I have and it's properly sized, etc.

<div class="newsletter">
 <form action="subscribe.php" method="post" id="newsletter-form">
  <p class="form-field">
   <label for="newsletter_email" class="visually-hidden">Your email address</label>
   <i class="icon ion-paper-airplane" aria-hidden="true"></i>
   <input type="text" name="newsletter_email" id="newsletter_email" value="" placeholder="Your email address" />
  </p>
  <p class="form-submit">
   <input type="submit" name="newsletter_submit" id="newsletter_submit" value="Get Notified" />
  </p>
 </form>
</div>

thanks for helping! sorry for the long post. I'm not sure what the etiquette on stackoverflow is, so if i'm asking a crappy question, let me know.

EDIT:

http://i.stack.imgur.com/tCZ7S.png

this is a screenshot of the two forms on my current template. top one is the original form, that sends subscriber emails to my email directly, and bottom is the mailchimp form. in addition to not being formatted properly, the mailchimp form also sends me to a blank page after i enter my email, instead of just returning a simple thank you message on the page as it should (as in:

} else {
    echo "Thanks! We'll keep you updated on the conference :)";
}

)

Here is the subscribe.php from the mailchimp template:

<?php
$apiKey = '';
$listId = '';
$double_optin=true;
$send_welcome=true;
$email_type = 'html';
$email = $_POST['email'];
//replace us2 with your actual datacenter
$submit_url = "http://us1.api.mailchimp.com/1.3/?method=listSubscribe";
$data = array(
    'email_address'=>$email,
    'apikey'=>$apiKey,
    'id' => $listId,
    'double_optin' => $double_optin,
    'send_welcome' => $send_welcome,
    'email_type' => $email_type
);
$payload = json_encode($data);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $submit_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, urlencode($payload));
$result = curl_exec($ch);
curl_close ($ch);
$data = json_decode($result);
if ($data->error){
    echo $data->error;
} else {
    echo "Thanks! We'll keep you updated on the conference :)";
}
?>

Answer 1

They are using Twitter Bootstrap on their forms. If you are not using twitter bootstrap currently, you need to add twitter bootstrap related css and js files to your page. Instead of that, if you want to use exact style mailchimp uses, you can use their subscription widget. See here for further details