Duplicate newsletter form and put on a custom page

Solved
jacauschi23
Explorer
60 9 17

I need to duplicate the newsletter block on the homepage doja.vip, including the text above and below it (I will be replacing the text fyi). The duplicated html/css then needs to be placed into the HTML editor of a custom page I have setup.

Screen Shot 2021-04-20 at 11.50.07 PM.png

 

I tried myself and this is what I got (shown below), but I couldn't figure out what was missing/causing issues with the newsletter form width, the "Enter your email" text size, and the margin/padding between the newsletter and the text above it.

 

Screen Shot 2021-04-20 at 11.42.00 PM.png

 

 

<style><!--
#shopify-section-1618076969419b2313.shopify-section.with-gutter {
  color: black;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  text-align: center !important;
  line-height: 1.6;
  font-family: Helvetica, "Helvetica Neue", Arial, "Lucida Grande", sans-serif;
  max-width: 1025px;
    margin: 0 auto;
    padding: 0 20px;
  -webkit-font-smoothing: antialiased;
}
--></style>
<style><!--
#shopify-section-1568117974886.shopify-section.mount-newsletter.with-gutter {
  max-width: 1025px;
  margin: 0 auto;
  margin-top: 50px;
}
.newsletter__text {
font-size: 8px !important;
color: rgba(233, 0, 0, 0.6)
}
--></style>
<style><!--
#contact_form.contact-form {
  border-radius: 60px;
  padding: 10px 32px;
  border: 2px solid black;
}
--></style>
<div id="shopify-section-1618076969419b2313" class="shopify-section with-gutter" data-shopify-editor-section="{&quot;id&quot;:&quot;1618076969419b2313&quot;,&quot;type&quot;:&quot;rich-text&quot;,&quot;disabled&quot;:false}">
<div id="id-1618076969419b2313" class="content-section  gutter--on  rich-text rich-text--align-left rich-text--media-off ">
<div class="rich-text__content" style="text-align: center;">
<h2 class="rich-text__title  h1 ">Greatest Team Ever</h2>
<div class="rich-text__body rte">
<p><strong>When you represent this brand you are co-signing numerous epic bounce-backs. You are advocating the hustle that comes before the bubble up. You are endorsing the late nights and early mornings because real ones recognize each other. We appreciate you for **bleep** with us and when you spend your hard earned money to support the Doja Movement just know that you are supporting the grind and that's some real player shit.</strong></p>
</div>
</div>
</div>
</div>
<div class="shopify-section mount-newsletter with-gutter" data-shopify-editor-section="{&quot;id&quot;:&quot;1568117974886&quot;,&quot;type&quot;:&quot;newsletter&quot;,&quot;disabled&quot;:false}">
<div class="shopify-section mount-newsletter with-gutter" data-shopify-editor-section="{&quot;id&quot;:&quot;1568117974886&quot;,&quot;type&quot;:&quot;newsletter&quot;,&quot;disabled&quot;:false}">
<div class="content-section gutter--on newsletter ">
<div class="newsletter__form"><form method="post" action="/contact?oseid=qCF5jMTpTZkcpdmraD43yAeM#contact_form" id="contact_form" accept-charset="UTF-8" class="contact-form" data-editor-form-attribute="" autocomplete="off"><input type="hidden" name="form_type" value="customer" /><input type="hidden" name="utf8" value="✓" />
<div><input type="hidden" name="contact[tags]" value="newsletter" /> <input type="email" class="newsletter__input" value="" placeholder="Enter your email" name="contact[email]" id="Email" aria-label="Enter your email" autocorrect="off" autocapitalize="off" /></div>
<button type="submit" class="newsletter__submit" id="Subscribe" aria-label="Submit"> SUBSCRIBE </button> <input type="hidden" name="oseid" value="qCF5jMTpTZkcpdmraD43yAeM" /></form></div>
<div class="newsletter__text rte" data-live-text-setting="section.1568117974886.text">
<p>When you sign up for our newsletter, you will receive news regarding products per e-mail. You can at any time withdraw your consent by unsubscribing directly in the newsletter. Read our privacy policy.</p>
</div>
</div>
</div>
</div>
<style><!--
#contact_form.contact-form {
    border-radius: unset !important;
    padding: unset !important;
    border: unset !important;
  }
  #contact_form .newsletter__input {
    border-radius: 60px !important;
    padding: 10px 32px !important;
    border: 2px solid black !important;
  }
  #contact_form #Subscribe {
    border-radius: 60px !important;
    padding: 10px 32px !important;
    border: 2px solid black  !important;
    width: 100% !important;
    margin-top: 13px !important;
    padding: 17px !important;
    position: unset !important;
    color: black;
    font-size: 12px;
  }
--></style>
<style data-shopify="" data-shopify-editor="{&quot;accessedSettings&quot;:[{&quot;id&quot;:&quot;color_text&quot;,&quot;section_id&quot;:&quot;1568117974886&quot;}],&quot;filteredColorSettings&quot;:[]}"><!--
:root { --shopify-editor-section-1568117974886-setting-color_text:#e90000; }
  
    #shopify-section-1568117974886 .newsletter,
    #shopify-section-1568117974886 .newsletter a {
      color: var(--shopify-editor-section-1568117974886-setting-color_text);
    }
    #shopify-section-1568117974886 .newsletter .svg path {
      fill: var(--shopify-editor-section-1568117974886-setting-color_text);
    }
    #shopify-section-1568117974886 .newsletter__input {
      color: var(--shopify-editor-section-1568117974886-setting-color_text);
      border-color: var(--shopify-editor-section-1568117974886-setting-color_text);
    }
    #shopify-section-1568117974886 .newsletter__input::placeholder { color: var(--shopify-editor-section-1568117974886-setting-color_text); }
    #shopify-section-1568117974886 input[type="email"]:-webkit-autofill, 
    #shopify-section-1568117974886 input[type="email"]:-webkit-autofill:hover, 
    #shopify-section-1568117974886 input[type="email"]:-webkit-autofill:focus, 
    #shopify-section-1568117974886 input[type="email"]:-webkit-autofill:active {
      -webkit-text-fill-color: var(--shopify-editor-section-1568117974886-setting-color_text) !important;
    }
--></style>

 

 

0 Likes
jacauschi23
Explorer
60 9 17

This is an accepted solution.

FIXED

0 Likes