Created
April 15, 2019 10:22
-
-
Save JacobLett/6761c258757dee149fe527f11e9156c5 to your computer and use it in GitHub Desktop.
technolawyer hubspot form embed
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--[if lte IE 8]> | |
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script> | |
<![endif]--> | |
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> | |
<script> | |
hbspt.forms.create({ | |
portalId: "4518656", | |
formId: "0022373b-0680-4647-a549-3dcbe772e71d", | |
css: '', | |
cssClass: 'tl-form' | |
}); | |
</script> | |
<style> | |
/* This may not be needed if texted added inside hubspot */ | |
.tl-form h2 { | |
position: relative; | |
margin-top: -15px; | |
} | |
.tl-form h2::before { | |
position: absolute; | |
content: "Download Our Media Kit and Rates"; | |
text-indent: 200%; | |
white-space: nowrap; | |
overflow: hidden; | |
position: absolute; | |
left: 0; | |
background: url('img/header-download-rate-card.png') no-repeat 0 0; | |
width: 303px; | |
height: 27px; | |
z-index: 1000; | |
} | |
.tl-form { | |
max-width: 364px; | |
font-family: Verdana, sans-serif; | |
font-size: 12px; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
margin: 20px 0 30px 0; | |
position: relative; | |
background: #fff; | |
background: #e6f3ff; | |
border: 1px solid #ccc; | |
padding: 0 24px 0 24px; | |
border-radius: 10px; | |
float: left; | |
} | |
.hs-form-required { | |
display: none; | |
} | |
.tl-form .hs-richtext { | |
font-size: 13px; | |
font-weight: 300; | |
margin-bottom: 20px; | |
} | |
.hs-fieldtype-intl-phone.hs-input select { | |
margin-right: 5px; | |
padding: 6px; | |
height: 27px; | |
background: #fff; | |
} | |
.hs-fieldtype-intl-phone.hs-input input { | |
width: 67% !important; | |
} | |
/* Form Field (selector for form field wrapper) */ | |
.hs-form .hs-form-field { | |
display: block; | |
overflow: hidden; | |
margin-bottom: 8px; | |
} | |
.hs-form .hs-form-field>label { | |
text-align: right; | |
font-size: 11px; | |
font-weight: 700; | |
text-align: right; | |
padding-right: 12px; | |
line-height: 18px; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
.hs-form .input { | |
overflow: hidden; | |
} | |
/* Inputs (selectors for all inputs) */ | |
.hs-form input[type="text"], | |
.hs-form input[type="password"], | |
.hs-form input[type="datetime"], | |
.hs-form input[type="datetime-local"], | |
.hs-form input[type="date"], | |
.hs-form input[type="month"], | |
.hs-form input[type="time"], | |
.hs-form input[type="week"], | |
.hs-form input[type="number"], | |
.hs-form input[type="email"], | |
.hs-form input[type="url"], | |
.hs-form input[type="search"], | |
.hs-form input[type="tel"], | |
.hs-form input[type="color"], | |
.hs-form input[type="file"], | |
.hs-form textarea, | |
.hs-form select { | |
display: block; | |
font-size: 11px; | |
border: 1px solid #707070; | |
padding: 2px; | |
width: 100%; | |
float: left; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
border-radius: 0; | |
padding: 6px; | |
} | |
.hs-form select { | |
font-size: 11px; | |
} | |
/* Error message (selector for validation messages) */ | |
.hs-form .hs-error-msgs { | |
padding: 0; | |
margin: 5px 0 0 0; | |
} | |
.hs-form .hs-error-msgs li { | |
list-style-type: none; | |
color: red; | |
width: 100%; | |
} | |
/* Submit buttons (selectors for all non-CTA buttons) | |
========================================================================== */ | |
.hs-submit { | |
text-align: right; | |
} | |
.hs-submit .hs-button { | |
background: url("img/bt_download.gif") no-repeat center center; | |
width: 136px; | |
height: 23px; | |
margin: 5px 0 20px 0; | |
padding: 0; | |
border: 0; | |
display: inline-block; | |
font-size: 0px; | |
cursor: pointer; | |
} | |
/* desktop and up */ | |
@media (min-width: 746px) { | |
.tl-form { | |
max-width: 364px; | |
} | |
/* Form Field (selector for form field wrapper) */ | |
.hs-form .hs-form-field { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
} | |
.hs-form .hs-form-field>label { | |
width: 40%; | |
} | |
.hs-form .input { | |
display: block; | |
width: 60%; | |
} | |
.hs-form .hs-error-msgs { | |
width: 100%; | |
} | |
.hs-form .hs-error-msgs li { | |
text-align: center; | |
} | |
/* end desktop up */ | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment