Skip to content

Instantly share code, notes, and snippets.

@brennandunn
Last active November 17, 2021 14:23
Show Gist options
  • Save brennandunn/db05685b47b1bbe79e04ad0b08cd980a to your computer and use it in GitHub Desktop.
Save brennandunn/db05685b47b1bbe79e04ad0b08cd980a to your computer and use it in GitHub Desktop.
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;
}
$(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
})
})
<!--
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>
@limitlessly21
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment