Skip to content

Instantly share code, notes, and snippets.

@bethcasey

bethcasey/gist:74b853ef1d0acc9e0f60c7165e7107ca

Created April 27, 2016 13:11
Show Gist options
  • Save bethcasey/74b853ef1d0acc9e0f60c7165e7107ca to your computer and use it in GitHub Desktop.
Save bethcasey/74b853ef1d0acc9e0f60c7165e7107ca to your computer and use it in GitHub Desktop.
Download ZIP
Pardot Email Preference Center - form left hand side with banner
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="" name="description"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>%%title%%</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- UPDATE!! This is the favicon: update the href with the favicon image you have uploaded into Pardot -->
<link rel="shortcut icon" type="image/x-icon" href="http://www.pardot.com/favicon.ico">
<!-- Bootstrap code to make the page responsive -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- end of bootstrap code -->
<style type="text/css">
/* UPDATE!! Change the background-color of the Submit here to reflect one of your brands colours: */
/*Submit button:*/
#pardot-form .submit input {
background-color: #1c6b9f;
padding: 5px 15px;
font: 700 15px/30px Arial,sans-serif;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
text-transform: uppercase;
border-radius: 3px;
border: 1px solid #bbb;
border-color: rgba(0,0,0,.1)rgba(0,0,0,.1)rgba(0,0,0,.25);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
text-align: center;
vertical-align: middle;
cursor: pointer;
margin-bottom: 15px;
white-space: normal;
width: auto;
line-height: 130%;
margin-top: 10px;
}
/* UPDATE!! On the EPC Page this link will be the color of the "Opt out from all communications link" - make it one of your brands colours: */
a {
color: #009ddc;
text-decoration: none;
}
/*Overall Form Styling:*/
#pardot-form {
font-family: Arial,sans-serif;
width: 100%;
margin: 0 auto;
text-align: left;
padding: 20px 30px 20px 0px;
height: 100%;
font-size: 16px;
color: #333;
}
/*Field labels:*/
#pardot-form .field-label {
font-weight: normal;
text-align: left;
width: 100%;
font-size: 16px;
padding: 3px 13px 3px 0;
color: #333;
}
/*EPC Checkbox labels:*/
#pardot-form.form p label.inline {
background: 0;
display: inline;
float: none;
font-weight: normal;
line-height: 2em;
margin-right: 10px;
padding: 0;
text-align: left;
vertical-align: baseline;
font-size: 15px;
}
/* required symbol adjustments */
#pardot-form .required .field-label {background-image: none; padding-left: 0;}
#pardot-form .required .field-label:after {content: ' *'; color: red;}
/*Text inputs (email address, name etc):*/
#pardot-form input.text {
text-align: left;
width: 50%;
height: 35px;
padding: 5px;
border: none;
margin-bottom: 5px;
color: #666;
background-color: #eeeeee;
}
/*Submit button Positioning:*/
#pardot-form.form p.submit {
margin: .2em .5em .6em 7px;
padding: 0;
}
#pardot-form.form p.submit input {
margin: 0 0 0 0;
}
/*Email Preference label positioning:*/
#pardot-form.form p.no-label, #pardot-form.form p.email-pref {
margin: .2em .5em .6em 7px;
padding: 0;
}
/*Simple Responsive Media Query*/
@media (min-width: 0px) and (max-width: 768px) {
/* left content div */
#left_content {
width: 100%;
float: none;
}
/* right content div */
#right_content {
padding-left: 0;
width: 100%;
float: none;
}
/*Field labels:*/
#pardot-form .field-label {
width: 100%;
float: left;
}
/*Text inputs:*/
#pardot-form input.text {
width: 100%;
}
/*Dropdowns:*/
#pardot-form select {
width: 100%;
}
/*Textareas:*/
#pardot-form textarea {
width: 100%;
height: 80px;
}
/*Submit button:*/
#pardot-form .submit input {
margin-left: auto;
margin-right: auto;
}
}
</style>
</head>
<body>
<header>
</header>
<section class="container">
<!-- UPDATE the Logo of the EPC Page Here: change the href, the src and the dimensions of the logo -->
<div class="logo">
<div class="container" style="margin-top: 20px; margin-bottom: 10px;">
<a href=http://www.pardot.com> <img class="logo" src="http://www.pardot.com/content/themes/pardot/assets/images/pardot-logo.png" border="0" style="width: 166px; height: 65px; ">
</a>
</div>
</div>
</section>
<!-- UPDATE the colour of the line under the logo here: change the background colour only -->
<section class="container_1">
<div class="container" style=" background-color: #009ddc; width: 100%; padding: 0 0 0 0; height: 15px;">
</div>
</section>
<!-- DO NOT UPDATE:This is the area for the EPC Form - leave this as is -->
<section class="container">
<div class="container-fluid">
<div class="col-sm-12" style="min-height: 640px;">
%%content%%
</div>
</div>
</section>
<footer>
<div class="container-fluid" style="background-color: #eeeeee; min-height: 50px;">
<div class="container padded" style="text-align: center; color: #666666;">
<a href=""> 2016 Pardot, a Salesforce company. All rights reserved. | </a>
<a href="http://www.pardot.com/company/legal/privacy-policy/"> Privacy Policy | </a>
<a href="http://www.pardot.com/company/legal/permission-based-marketing-policy/"> Permission Based Marketing Policy | </a>
<a href="http://www.pardot.com/company/legal/site-terms-of-service/"> Website Terms of Use </a>
</div>
</div>
</footer>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment