Mail Chimp - OG 

Get this from https://us3.admin.mailchimp.com/lists/members/

Then go to "signup forms" > "embedded forms"


The pre-set form code looks something like this: 


<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<form action="!!!!!!!!!!!!!!!!!!!!!!!!!!" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
   <div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
   <!-- 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_a104716c783b60ea324e9a13b_a5844a1c7e" tabindex="-1" value=""></div>
   <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
   </div>
</form>
</div>
<!--End mc_embed_signup-->

Strip out the CSS, JS and div tags. All we need is the input type and form action tags. 


<form action="http://yourdomain.us2.list-manage.com/subscribe/post?u=f2783bcb766c7&id=07b8" method="post"id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"> <input type="text"name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required> <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> </form>



Setup

We need an email server to send the emails from - we do this by using mail gun's SMTP server. All we need to do is add some default settings to the config file.


Form to Email

To add Form to email, we only require a few things.

<form method="POST" action="/page_cms/email/">  {% csrf_token %}  <input type="hidden" name="url" value="{{ request.get_full_path }}">  <input type="hidden" name="contact_group" value="email_group1">  <input type="hidden" name="message" value="Thank you for witting this email...">   <input type="text" name="title">  <textarea name="comment"></textarea>  <button>contact</button>  <input type="hidden" name="please_nofill"></form>


You need to make a user group of who is going to be emailed, and .

The URL is the redirect after the email is sent.


If the form needs to upload a file, include the following attribute


< form method="POST" action="/page_cms/email/" enctype="multipart/form-data">

​​​​​​​

Mailchimp Embedded Standardised Subscribe Form Code

  • HTML
<form action="http://yourdomain.us2.list-manage.com/subscribe/post?u=f2783bcb766c7&id=07b8"
           method="post" 
           id="mc-embedded-subscribe-form" 
           name="mc-embedded-subscribe-form" 
           class="validate subscribe-form" 
           target="_blank">
          
           <div class="email-container form-element">
               {% if admin %}
                   <p
                       data-type="plain_text"
                       data-slug="email"
                       data-constant="true">
                       {% if not constants.email.plain_text and admin%}
                           Email Label Text
                       {% endif %}
                       {{constants.email.plain_text}}
                   </p>
               {% else %}
               {% endif %}
               <label for="mce-EMAIL" class="subscribe_email">{{constants.email.plain_text}}</label>
               <input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required>
           </div>


           <!--BOT TRACKER-->
           <div class="visually-hidden" aria-hidden="true">
               <input type="text" name="b_2a7d4540b0e3adaef3dbd30ad_1d523630d2" tabindex="-1" value="">
           </div>
       
           <div class="subscribe-container form-element">
               {% if admin %}
                       <p
                           data-type="plain_text"
                           data-slug="signup"
                           data-constant="true">
                           {% if not constants.signup.plain_text and admin %}
                               Sign Up Label
                           {% endif %}
                           {{constants.signup.plain_text}}
                       </p>
                   {% else %}
                   <!--id="mc-embedded-subscribe"-->
                       <input 
                           class="btn_primary" 
                           type="submit" 
                           value="{% if not constants.signup.plain_text %}Subscribe{% endif %}{{constants.signup.plain_text}}" 
                           name="subscribe"
                             />
                   {% endif %}
               </div>
               <div class="compliance_text">
                   <input 
                       type="checkbox" 
                       id="mce-group[15681]-15681-0" 
                       name="group[15681][1]" 
                       value="1" 
                       class="visually-hidden" 
                       required>
                   <label for="mce-group[15681]-15681-0">
                       <i class="fal fa-square" aria-hidden="true"></i>
                       <i class="fal fa-check-square" aria-hidden="true"></i> 
                       <span
                           data-slug="compliance_links"
                           data-constant="true"
                           data-type="plain_text"
                           >
                           {% if not constants.compliance_links.plain_text %}
                               I agree to terms and conditions
                           {% endif %}
                           {{constants.compliance_links.plain_text}}
                       </span>
                   </label>
               </div>
       </form>
   </div>

  • CSS

form {
 overflow: hidden;
 margin-bottom: $gutter;
 @include at-query($max, $medium) {
  legend,
  .form-element {
   width: 100%;
  }
 }
 .email-container {
  display: inline-block;
  margin-right: $gutter;
  position: relative;
  border-bottom: 2px solid $white;
  width: 100%;
  &::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 2px;
   bottom: -1.5px;
   left: 0;
   background-color: $yellow;
   visibility: hidden;
   @include vendorize(transform, scaleX(0));
   @include vendorize(transition, all 0.3s ease-in-out);
  }
  &:hover::before,
  &:focus::before,
  &:focus-within::before {
   visibility: visible;
   @include vendorize(transform, scaleX(1));
  }
  input {
   background-color: $transparent;
   border: none;
   &:focus {
    outline: none;
   }
  }
  label {
   @include vendorize(transition, all 0.2s ease-in-out);
   position: absolute;
   opacity: 0.7;
   cursor: pointer;
  }
  label,
  input {
   width: 100%;
   padding: 10px 0;
   @include font-size(30px);
  }
 }
 .compliance_text {
  padding-top: 10px;
  padding-bottom: 1rem;
  i {
   padding-right: 10px;
  }
  label {
   cursor: pointer;
   p {
    display: inline-block;
   }
  }
 }
}


  • JS


app.placeholder = {
init: function() {
 $("#mce-EMAIL").focus(app.placeholder.hideLabel);
 $("#mce-EMAIL").focusout(app.placeholder.revealLabel);
},
hideLabel: function() {
 $(this)
  .prev("label")
  .addClass("hidden");
},
revealLabel: function() {
 if (!this.value) {
  $(this)
   .prev("label")
   .removeClass("hidden");
 }
}
};


Mail Chimp - django


<form class="mail_chimp_signup" action="/page_cms/mailchimp/">
    <input type="hidden" name="url" value="{{ request.get_full_path }}">
    <label for="id_mailchimp_email">{{constants.news_letter_text.plain_text}}</label>
    <input class="pure-u-5-6" id="id_mailchimp_email" type="email" name="email" placeholder="{{constants.news_letter_text.plain_text}}">
    <div class="pure-u-1-6 mail_chimp_signup__submit">
     <input type="submit" value="{{constants.news_letter_button.plain_text}}">
    </div>
    <div class="mail_chimp_signup__accept">
     <input  id="id_mailchimp_accept" type="checkbox" name="accept" required>
     <label for="id_mailchimp_accept">
      <i class="far fa-square"></i>
      <i class="far fa-check-square"></i>
      <p>
       {{constants.news_letter_accept.plain_text}}
      </p>
     </label>
    </div>
   </form> 


get api mailchimp and username login and paste into settings.py

example: 

SIGNUP_URL = 'https://us6.api.mailchimp.com/*.0/lists/**********/members/'
SIGNUP_AUTH = ('*** ****', '**********-us6')


found at https://us3.admin.mailchimp.com/account/api/