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>