[Lookbook] Header newsletter form with jquery success and error

styles.scss.liquid

div.contact * {display: inline-block;}

@media screen and ($bp-min: $bp-med) {
  //ul.navprimary__horizontal li:not(.contact){margin-top:21px;}
  //ul.navprimary__horizontal li{height: 32px;}
  //ul.navprimary__horizontal li.contact input{border-radius: 2px;}
}

@media only screen and (max-width: 1326px) {
  .contact{ display:none; }
}

theme.liquid

          {% form 'customer' %}
          <div class="contact site-nav--item site-nav--item-fade" style="min-width: 598px; float: right; margin-top: 12px; text-align: right;">
            <span style="color: rgb(236, 194, 19);">For Sales and Stock Updates: </span>
            <label style="color: white;">Name: </label>
            <input style="max-width: 100px;" type="text" id="contactFormName" name="contact[name]" placeholder="Name" />
            <label style="color: white;">Email:</label>
            <input style="max-width: 100px;" type="email" id="contactFormEmail" name="contact[email]" />
            <input style="max-width: 63px;" type="submit" id="contactFormSubmit" value="SEND" />
          </div>
          {% if form.posted_successfully? %}
          <script>
            $('.contact').empty();
            $('.contact').append('<div style="color: white; margin-top: 20px;">Thanks for signing up!</div>');
          </script>
          {% endif %}
          {% if form.errors %}
          <script>
            $('.contact').empty();
            $('.contact').append('<div style="color: white; margin-top: 20px;">Sorry, something went wrong. Please try again.</div>');
          </script>
          {% endif %}
          {% endform %}