drip.css

form[data-drip-embedded-form] {
  background: #fff url(data:image/gif;base64,R0lGODlhAQADAIABAMzMzP///yH/C1hNUCBEYXRhWE1QPD94cGFja…wbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAAAEALAAAAAABAAMAAAICRFIAOw==) repeat-y center top;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  line-height: 1.5em;
  overflow: hidden;
  color: #666;
  font-size: 16px;
  border-top: solid 20px #3071b0;
  border-top-color: #3071b0;
  border-bottom: solid 10px #3d3d3d;
  border-bottom-color: #1d446a;
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.3);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.3);
  box-shadow: 0px 0px 5px rgba(0,0,0,.3);
  clear: both;
  margin: 20px 0px;
  padding: 20px;
}

form[data-drip-embedded-form] * {
  box-sizing: border-box;
}

form[data-drip-embedded-form] br {
  display: none;
}

form[data-drip-embedded-form] h3 {
  margin: 0 0 5px 0;
  font-size: 24px;
  font-weight: normal;
}

form[data-drip-embedded-form] [data-drip-attribute=description] {
  margin-bottom: 15px;
}

form[data-drip-embedded-form] label {
  display: block;
  font-weight: bold;
  font-size: 14px;
  color: #000;
}

form[data-drip-embedded-form] input {
  font-size: 14px;
  padding: 10px 8px;
  width: 100%;
  border: 1px solid #d6d6d6;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background-color: #f8f7f7;
  margin-bottom: 5px;
  height: auto;
}

form[data-drip-embedded-form] input[type=submit] {
  width: 100%;
  color: #fff;
  margin: 10px 0px 0px;
  padding: 10px 0px;
  font-size: 18px;
  background: #0d6db8;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  text-shadow: none;
}

form[data-drip-embedded-form] .drip-success {
  padding: 10px;
  border: solid 1px #ddd;
  background: #eee;
}

drip.js

$(function(){
  $('form[data-drip-embedded-form]').on('submit', function(){
    t = $(this)
    data = $(this).serializeArray()
    tags = $(this).data('drip-tags') ? $(this).data('drip-tags').split(',').map(function(v) { return $.trim(v) }) : []
    fields = {}
    fields['tags'] = tags
    confirmation = $(this).data('drip-confirmation')
    $.each(data, function(idx, obj) {
      if (obj.name.indexOf('fields') === 0) {
        var n = obj.name.replace('fields[', '').replace(']', '')
        fields[n] = obj.value
      }
    })
    fields['success'] = function() {
      t.find('input').closest('div').hide()
      t.append($('<div>').addClass('drip-success').text(confirmation))
    }

    _dcq.push(['identify', fields])

    return false
  })
})

index.html

<!--

Note: Drip doesn't allow for cross-site AJAX submissions, so we're going to be using the identify() function of Drip.js to opt-someone in. WHAT THIS MEANS IS THAT THE FORM YOU CREATE ACTUALLY WILL NEVER GET SUBMITTED. Instead, we're just using it to flesh out some input fields. Instead, we'll be creating / updating a subscriber and applying tags. Be sure to have your Workflows/Campaigns be triggered by the addition of a Tag and NOT a Form.

TO USE:
- Create your dummy form within Drip. Copy its embedded HTML.
- Make sure you're loading drip.css and drip.js in your template.
- Ensure jQuery is loaded.
- Ensure Drip.js is loaded. (Available here: https://www.getdrip.com/docs/js-api)
- Add a "data-drip-tags" attribute to the form tag, with a comma separated list of tags you want to add.
- Add a "data-drip-confirmation" attribute for the message you'd like to display upon opt-in.

HOW IT WORKS:
The form is hijacked to never submit. Instead, the fields submitted are taken and passed into the Drip.js identify() function, along with the tags you define.

-->

<link href="drip.css" media="all" rel="stylesheet" />
<form action="https://www.getdrip.com/forms/XXXXXX/submissions" method="post" data-drip-embedded-form="XXXXXXX" data-drip-confirmation="You're all set!" data-drip-tags="Newsletter, Customer">
  <h3 data-drip-attribute="headline">Sample Form</h3>
  <div data-drip-attribute="description">Description goes here</div>
    <div>
        <label for="fields[email]">Email Address</label><br />
        <input type="email" name="fields[email]" value="" />
    </div>
    <div>
        <label for="fields[first_name]">First Name</label><br />
        <input type="text" name="fields[first_name]" value="" />
    </div>
  <div>
    <input type="submit" name="submit" value="Sign Up" data-drip-attribute="sign-up-button" />
  </div>
</form>
<script type="text/javascript">
  var _dcq = _dcq || [];
  var _dcs = _dcs || {}; 
  _dcs.account = 'XXXXX';
  
  (function() {
    var dc = document.createElement('script');
    dc.type = 'text/javascript'; dc.async = true; 
    dc.src = 'https://tag.getdrip.com/XXXXXX.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(dc, s);
  })();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="drip.js"></script>

Thanks for styling this Brennan. It looks great, and saved me some time making my form look nice.

So glad I came across this. Thanks, Brennan!

This looks amazing, but I'm confused about where to paste the code in my Drip template. Obviously, I'm a newbie to this. I'm wanting to update the styling for my Drip form. Any help would be greatly appreciated. I've been trying to get started with CSS but I'm still lost. Thanks!!

Super useful. Thank you man. Can't wait till we can start investing in RIghtMessage with our startup.

I'm trying to style the consent box that uses label and also uses

I consent to receive information about services and special offers by email
The label keeps going to the next line. I can't figure out how to adjust CSS to keep it on the same line.
Page is here: http://harmonenterprises.com/embracing-evernote-aha-guide
Any help would be appreciated!