www/src/layouts/partials/klaviyo-form.html

<hr>
  <form id="email_signup" action="//manage.kmail-lists.com/subscriptions/subscribe" method="POST">
    <input type="hidden" name="g" value="XGq3MT">
    <input class="footer-email" type="email" value="" name="email" id="k_id_email" placeholder="Add your email_" />
    <button class="email-btn" type="submit">SEND</button>
  </form>
<hr>
<p class="small mt-4" style="color:#949494;"><strong>Privacy Policy:</strong> We will never share, sell, or otherwise distribute your information to third-parties. We take a minimalistic approach to email marketing–meaning we'll only send you stuff when there's something you <em>absolutely</em> need to know about. You can read more about our privacy policies <a href="/privacy-policy/">here</a>.</p>
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>

<style>

  /* Email Form Styling */

  @media only screen and (min-width: 1200px) {

    #email_signup{
      display: flex;
      justify-content: space-between;
    }

    .footer-email{
      font-family: "pp-neue-machina", sans-serif;
      text-transform: uppercase;
      font-size: 2.121vw;
      line-height: 2.121vw;
      padding: 1.953vw 0vw;
      background: none;
      border: none;
      width: 80%;
    }

    .footer-email::placeholder {
      color: #949494;
    }

    .footer-email:focus{
      background-color: #1a1a1a;
      color: #fff;
      outline: none !important;
      box-shadow: none !important;
    }

    .email-btn{
      width: 16%;
      border-left: 2px solid #949494;
      border-right: none !important;
      border-top: none !important;
      border-bottom: none !important;
      border-radius: 0px;
      font-family: "pp-neue-machina", sans-serif;
      text-transform: uppercase;
      font-size: 2.121vw;
      background-color: #1a1a1a;
      color: #949494;
    }

    .email-btn:hover{
      background-color: #00ffd0;
      color: #1a1a1a;
      box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
    }

  }

  @media only screen and (min-width: 992px) and (max-width: 1200px) {

    #email_signup{
      display: flex;
      justify-content: space-between;
    }

    .footer-email{
      font-family: "pp-neue-machina", sans-serif;
      text-transform: uppercase;
      font-size: 2.121vw;
      line-height: 2.121vw;
      padding: 1.953vw 0vw;
      background: none;
      border: none;
      width: 80%;
    }

    .footer-email:focus{
      background-color: #1a1a1a;
      color: #fff;
      outline: none !important;
      box-shadow: none !important;
    }

    .email-btn{
      width: 16%;
      border-left: 2px solid #949494;
      border-right: none !important;
      border-top: none !important;
      border-bottom: none !important;
      border-radius: 0px;
      font-family: "pp-neue-machina", sans-serif;
      text-transform: uppercase;
      font-size: 2.121vw;
      background-color: #1a1a1a;
      color: #949494;
    }

    .email-btn:hover{
      background-color: #00ffd0;
      color: #1a1a1a;
      box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
    }

  }

  @media only screen and (min-width: 768px) and (max-width: 992px) {

    #email_signup{
      display: flex;
      justify-content: space-between;
    }

    .footer-email{
      font-family: "pp-neue-machina", sans-serif;
      text-transform: uppercase;
      font-size: 2.121vw;
      line-height: 2.121vw;
      padding: 1.953vw 0vw;
      background: none;
      border: none;
      width:: 80%
    }

    .footer-email:focus{
      background-color: #1a1a1a;
      color: #fff;
      outline: none !important;
      box-shadow: none !important;
    }

    .email-btn{
      width: 16%;
      border-left: 2px solid #949494;
      border-right: none !important;
      border-top: none !important;
      border-bottom: none !important;
      border-radius: 0px;
      font-family: "pp-neue-machina", sans-serif;
      text-transform: uppercase;
      font-size: 2.121vw;
      background-color: #1a1a1a;
      color: #949494;
    }

    .email-btn:hover{
      background-color: #00ffd0;
      color: #1a1a1a;
      box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
    }

  }

  @media only screen and (min-width: 576px) and (max-width: 768px){

    #email_signup{
      display: flex;
      justify-content: space-between;
    }

    .footer-email{
      font-family: "pp-neue-machina", sans-serif;
      text-transform: uppercase;
      font-size: 2.121vw;
      line-height: 2.121vw;
      padding: 1.953vw 0vw;
      background: none;
      border: none;
      width: 80%;
    }

    .footer-email:focus{
      background-color: #1a1a1a;
      color: #fff;
      outline: none !important;
      box-shadow: none !important;
    }

    .email-btn{
      width: 16%;
      border-left: 2px solid #949494;
      border-right: none !important;
      border-top: none !important;
      border-bottom: none !important;
      border-radius: 0px;
      font-family: "pp-neue-machina", sans-serif;
      text-transform: uppercase;
      font-size: 2.121vw;
      background-color: #1a1a1a;
      color: #949494;
    }

    .email-btn:hover{
      background-color: #00ffd0;
      color: #1a1a1a;
      box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
    }

  }

  @media only screen and (max-width: 576px) {

    #email_signup{
      display: flex;
      justify-content: space-between;
    }

    .footer-email{
      font-family: "pp-neue-machina", sans-serif;
      width: 70%;
      text-transform: uppercase;
      font-size: 4vw;
      line-height: 2.121vw;
      padding: 6vw 0vw;
      background: none;
      border: none;
    }

    .footer-email:focus{
      background-color: #1a1a1a;
      color: #fff;
      outline: none !important;
      box-shadow: none !important;
    }

    .email-btn{
      width: 25%;
      border-left: 2px solid #949494;
      border-right: none !important;
      border-top: none !important;
      border-bottom: none !important;
      border-radius: 0px;
      font-family: "pp-neue-machina", sans-serif;
      text-transform: uppercase;
      font-size: 4vw;
      background-color: #1a1a1a;
      color: #949494;
    }

    .email-btn:hover{
      background-color: #00ffd0;
      color: #1a1a1a;
      box-shadow: inset 0vw 0vw 0vw 1vw #1a1a1a !important;
    }

  }

</style>