title: Custom Mailchimp Embedded Suscribe Form not working in Wordpress
body: <p>Let me tell you a bit about what is happening to me since I have spent 2 days trying to solve it and I have not succeeded ...</p>
  <p>On this page: <a href="https://abbeyelizabethsykes.com/podcast/" rel="nofollow noreferrer">https://abbeyelizabethsykes.com/podcast/</a> I have inserted, through the Elementor &quot;HTML&quot; widget, a Mailchimp &quot;Embedded Form&quot; that I have customized with SUBLIME EDITOR and that looks correct from there in the browser, but when uploading it to the web, where it really should go, it does not recognize the applied CSS customization.</p>
  <p>I don't know what else I can do. My Code level is very basic.</p>
  <p>Any ideas?</p>
  <p>Many thanks in advance!!</p>
  <p>Juan Manuel</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#mc_embed_signup_scroll  {
      display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #ECDDDC;
    text-align: center;
    padding: 10px 0 9px;
    margin: 0 0 100px 0;
  }
  
  #mc_embed_signup_scroll input {
    border: 0px;
    width: 100%;
    border-box: box-sizing !important;
    text-align: left;
    border: 0px;
    width: 250px;
    margin: 0 20px 0 0;
    box-sizing: border-box;
    font-family: 'Cormorant Garamond', sans-serif;
    font-size: 11,5px;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 30px;
    letter-spacing: 0px;
    padding: 15px;
    font-family: 'Cormorant Garamond', sans-serif;  
  }
  #mce-FNAME {
      padding-top: 10px !important;
      padding-bottom: 10px !important;
      padding-right: 30px !important;
      padding-left: 30px !important;
  }
  #mce-EMAIL {
      padding-top: 10px !important;
      padding-bottom: 10px !important;
      padding-right: 30px !important;
      padding-left: 30px !important;
  }
  input[type="submit" i] {
    background-color: #b2815d;
    color: #fff;
    cursor: pointer;
    text-align: center !important;
    padding-top: 10px !important;
      padding-bottom: 10px !important;
      padding-right: 30px !important;
      padding-left: 30px !important;
  } 
  input[type="submit" i]:hover {
    color: #fff;
    background-color: #999999;
  } 
  @media (max-width: 800px) {
    #mc_embed_signup_scroll input {
      margin: 10px 0;
    }
  
    #mc_embed_signup_scroll {
      flex-direction: column;
      align-items: stretch;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Begin Mailchimp Signup Form --&gt;
  &lt;link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"&gt;
  &lt;style type="text/css"&gt;
      #mc_embed_signup {background:#fff; clear:left; font:14px 'Cormorant Garamond', sans-serif }
      /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
         We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
  &lt;/style&gt;
  &lt;div id="mc_embed_signup"&gt;
  &lt;form action="https://abbeyelizabethsykes.us6.list-manage.com/subscribe/post?u=5b20c704b98ce3fb74a4be13c&amp;amp;id=f8338bb7a7" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate&gt;
      &lt;div id="mc_embed_signup_scroll"&gt;
      
  &lt;div class="mc-field-group"&gt;
      &lt;input type="text" value="" name="FNAME" placeholder="First Name" class="" id="mce-FNAME"&gt;
  &lt;/div&gt;
  &lt;div class="mc-field-group"&gt;
      &lt;input type="email" value="" name="EMAIL" placeholder="Email" class="required email" id="mce-EMAIL"&gt;
  &lt;/div&gt;
      &lt;div id="mce-responses" class="clear"&gt;
          &lt;div class="response" id="mce-error-response" style="display:none"&gt;&lt;/div&gt;
          &lt;div class="response" id="mce-success-response" style="display:none"&gt;&lt;/div&gt;
      &lt;/div&gt;    &lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&gt;
      &lt;div style="position: absolute; left: -5000px;" aria-hidden="true"&gt;&lt;input type="text" name="b_5b20c704b98ce3fb74a4be13c_f8338bb7a7" tabindex="-1" value=""&gt;&lt;/div&gt;
      &lt;div class="clear"&gt;&lt;input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'&gt;&lt;/script&gt;&lt;script type='text/javascript'&gt;(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[1]='FNAME';ftypes[1]='text';fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);&lt;/script&gt;
  &lt;!--End mc_embed_signup--&gt;</code></pre>
  </div>
  </div>
  </p>