Configuring subscription form (mailchimp)

We use Mailchimp for email subscriptions. To receive leads directly in your Mailchimp account, follow this guide.

1. Create a Mailchimp Account

   This is a very easy process. If you don’t already have a Mailchimp account, sign up at mailchimp.com or log in if you have one.

2. Create an Embedded Form

   After logging in, you will see the dashboard. From the left sidebar, click the Create button located at the top.

   

   Then Click Signup Form, then Embedded Form, and then Begin.

   

3. Copy the HTML Form Action Value

   After completing the previous steps, you will see a page where you can add more fields (for our theme, we only added an email field). We didn’t used mailchimp full html code unless important code and form style. That’s why, we just need the form action value. This value can be found in the HTML code after clicking the Continue button.

   

   

4. Replace the Copied Form Action Value

   After copying the HTML form action value, open the subscription-form.html file located at /src/partials/components/subscription-form.html. This partial is used as the subscription form on most pages in this theme, with some exceptions. Then, replace the value of the form action attribute with the value you copied.

   <div class="subsciption-form">
     <!-- subscription form -->
     <form
      action="https://gmail.us22.list-manage.com/subscribe/post?u=436cb8647d746fe81825f1efc&amp;id=18a007239a&amp;f_id=00cfc7e1f0"
      action="your-copied-form-action-value"
       id="mc-embedded-subscribe-form"
       novalidate="true"
       method="post">
       <div class="row gy-3">
         <div class="col-12">
           <div class="input-group">
             <label for="mce-EMAIL" class="visually-hidden">Email</label>
             <input
               type="email"
               name="EMAIL"
               placeholder="Your Email"
               class="form-control required email"
               id="mce-EMAIL"
               aria-required="true"
               autocomplete="off"
               required />
             <button
               type="submit"
               name="subscribe"
               id="mc-embedded-subscribe"
               class="btn-icon btn-animated-hover-trigger ms-auto d-block centered">
               Subscribe
               <div class="btn-animated btn-animated-t-right centered">
                 <i
                   class="material-symbols-rounded float-none fs-6 mt-1 btn-animated-child btn-animated-child-invisible">
                   call_made
                 </i>
                 <i
                   class="material-symbols-rounded float-none fs-6 mt-1 btn-animated-child btn-animated-child-visible">
                   call_made
                 </i>
               </div>
             </button>
           </div>
         </div>
         <div style="position: absolute; left: -5000px" aria-hidden="true">
           <input
             type="text"
             name="b_436cb8647d746fe81825f1efc_18a007239a"
             tabindex="-1"
             value="" />
         </div>
         <input type="hidden" name="EMAILTYPE" id="mce-EMAILTYPE-0" value="html" />
       </div>
     </form>
     <div id="mce-responses" class="clear">
       <div
         class="message message-error"
         id="mce-error-response"
         style="display: none"></div>
       <div
         class="message message-success"
         id="mce-success-response"
         style="display: none"></div>
     </div>
     <script
       defer
       async
       type="text/javascript"
       src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
     <!-- /subscription form -->
   </div>

   Note

   If you want to add more html fields then don’t copy and paste entire html code that will be provide by mailchimp as it will break subscription form theme provided style.

   Here is a html form code with first name & last name fields

   <!-- subscription form -->
   <form
     action="https://gmail.us22.list-manage.com/subscribe/post?u=436cb8647d746fe81825f1efc&amp;id=18a007239a&amp;f_id=00cfc7e1f0"
     id="mc-embedded-subscribe-form"
     novalidate="true"
     method="post">
     <div class="row gy-3">
       <div class="col-12">
         <div class="input-group">
           <label for="mce-FNAME" class="visually-hidden">First Name</label>
           <input
             type="text"
             name="FNAME"
             placeholder="Your First Name"
             class="form-control text"
             autocomplete="off"
             id="mce-FNAME" />
         </div>
       </div>
       <div class="col-12">
         <div class="input-group">
           <label for="mce-LNAME" class="visually-hidden">Last Name</label>
           <input
             type="text"
             name="LNAME"
             class="form-control text"
             id="mce-LNAME"
             autocomplete="off"
             placeholder="Your Last Name"
             value="" />
         </div>
       </div>
       <div class="col-12">
         <div class="input-group">
           <label for="mce-EMAIL" class="visually-hidden">Email</label>
           <input
             type="email"
             name="EMAIL"
             placeholder="Your Email"
             class="form-control required email"
             id="mce-EMAIL"
             aria-required="true"
             autocomplete="off"
             required />
         </div>
       </div>
       <div style="position: absolute; left: -5000px" aria-hidden="true">
         <input
           type="text"
           name="b_436cb8647d746fe81825f1efc_18a007239a"
           tabindex="-1"
           value="" />
       </div>
       <input
         type="hidden"
         name="EMAILTYPE"
         id="mce-EMAILTYPE-0"
         value="html" />
       <div class="col-12">
         <button
           type="submit"
           name="subscribe"
           id="mc-embedded-subscribe"
           class="btn-icon btn-animated-hover-trigger ms-auto d-block">
           Subscribe
           <div class="btn-animated btn-animated-t-right centered">
             <i
               class="material-symbols-rounded float-none fs-6 mt-1 btn-animated-child btn-animated-child-invisible">
               call_made
             </i>
             <i
               class="material-symbols-rounded float-none fs-6 mt-1 btn-animated-child btn-animated-child-visible">
               call_made
             </i>
           </div>
         </button>
       </div>
     </div>
   </form>