I am using Pardot to create a form. I am linking this form to our homepage, and would like the form to appear centered when it opens a new window.
I have been researching div's and it seems the answer is "wrap it in a div" but I am reading that pardot does not want certain things wrapped in div's. Here is the code that I am working with. I am trying to get all of this content to site nice in the middle of the page. both horizontally and somewhat vertically if possible. You can see my attempt at trying to center with the code ontent="width=device-width, initial-scale=1, maximum-scale=1 But that does not seem to do anything.
<!DOCTYPE html>
<html>
<head>
<base href="http://go.pardot.com" >
<meta charset="utf-8"/>
<meta name="description" content="width=device-width, itintial-scale=1, maximum-scale=1, %%description%%"/>
<title>%%title%%</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style type="text/css">
#pardot-form p label {
margin: 0 auto;
width:250px;
color: #003366;
font-size: 14px;
width: 165px;
margin-bottom: 0.5em;
font-weight: 800;
font-family: 'Open Sans',sans-serif;
}
#pardot-form.form .no-label .description {
margin-left: 0;
color: #003366;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: bold;
margin-top: 0.15em;
margin-bottom: 1em;
}
#pardot-form input.text {
border-radius: 4px;
border: 1px solid #DADADA;
width: 200px;
height: 2em;
font-family: 'Open Sans',sans-serif;
font-size: 14px;
background-color: white;
margin-bottom: 10px;
}
#pardot-form select {
border-radius: 4px;
border: 1px solid #DADADA;
width: 50%;
height: 2.5em;
font-family: 'Open Sans',sans-serif;
font-size: 14px;
background-color: white;
margin-bottom: 10px;
}
#pardot-form textarea.standard {
border-radius: 4px;
border: 1px solid #DADADA;
width: 50%;
height: 8em;
font-family: 'Open Sans',sans-serif;
font-size: 14px;
background-color: white;
margin-bottom: 10px;
}
#pardot-form p.submit input {
background: #009cdb;
border: 0 none;
border-radius: 4px;
cursor: pointer;
color: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 700;
width: 100px;
height: 40px;
}
#pardot-form.form p.submit {
margin: 0 0 0 200px;
}
</style>
</head>
<body>
%%content%%
</body>
Add this:
form.form {
display:table;
margin:0 auto !important;}
Just tested in Pardot and works.