Replicating Pardot form in Dreamweaver

Forum|Forum|4 years ago
August 3, 2021
1 reply
885 views

I am looking to replicate a form that was created on pardot in dreamweaver.

The Pardot Layout consists of 3 sections: Layout, Form, and Site Search.

The layout consiste of this html:

<!DOCTYPE html>
<html>
<head>
<base href="http://www2.therdigroup.com" >
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="%%description%%"/>
<title>%%title%%</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');	
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');	
body{padding:0 !important;margin: 0 !important;}
.main_form{margin:0 auto;max-width: 800px;}	
.main_form .form {
    padding: 0px !important;
    margin: 0px !important;
    width: 100%!important;
}
.main_form .form .form-field {
    margin: 0px!important;
    margin-bottom: 20px!important;
    width: 100% !important;
    float: left!important;
    clear: none !important;
}
.main_form .form p label {
    color: #333 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    display: inline-block !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
}
.main_form .form p .field-label {
    width: 100%!important;
    display: block!important;
    text-align: left!important;
    font-weight: 400!important;
    background: none !important;
    padding-top: 0 !important;
}
.main_form .form input[type="text"], .main_form .form select, .main_form .form textarea {
    font-size: 14px !important;
    
    padding: 10px 12px!important;
    float: left!important;
    width: 100% !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    box-sizing: border-box!important;
    font-family: 'Open Sans', sans-serif !important;
	border: solid 1px #ddd !important;
background: #f5f5f5 !important;
	color: #333 !important;
	height: 48px !important;
	margin: 0!important;
    vertical-align: baseline!important;
    box-shadow: none!important;
    -webkit-appearance: none!important;
    -moz-appearance: none!important;
    appearance: none!important;
    outline: 0!important;
	
}
.main_form .form input:focus, .main_form .form select:focus, .main_form .form textarea:focus {	
	border-color: #00548e !important;
	}	
	
form.form p {
    color: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px;
}

.main_form .form textarea {
    resize: none!important;
}

.red-color, form.form p.error, form.form span.error, form.form div.error, form.form p.error label {
    margin: 0 !important;
    padding: 0 !important;
    color: red !important;
    text-shadow: none !important;
}

.main_form .form .form-field.error input, .main_form .form .form-field.error select, .main_form .form .form-field.error textarea {
    border-color: red !important;
}
form.form p.required label, form.form span.required label {
    padding-left: 0 !important;
}
.main_form .form p .field-label {
    color: #333 !important;
    font-family: 'Open Sans', sans-serif !important;
}

.main_form .form .pd-radio span {
    display: block!important;
    width: 100%!important;
}
.main_form .form p.submit {
    margin: 0px!important;
    padding: 0px!important;
    width: 100% !important;
    text-align: center!important;
    display: inline-block!important;
    margin-top: 0 !important;
}
.main_form .form input[type="submit"] {
	
	color:#333 !important;;background:transparent !important;;border:2px solid #01010133 !important;
	
   
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    padding: 5px 80px !important;
    display: inline-block !important;
    float: none !important;
    font-size: 14px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500;
	letter-spacing: 2px !important;
    cursor: pointer !important;
    transition: 0.5s !important;
    -webkit-transition: 0.5s !important;
    -moz-transition: 0.5s !important;
    -o-transition: 0.5s !important;
    margin: 0px !important;
    position: relative !important;
    text-transform: uppercase !important;
    z-index: 1!important;
    height: auto !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width: auto !important;
}
.main_form .form input[type="submit"]:hover,.main_form .form input[type="submit"]:focus {
    background: #00467f !important;
    border-color: #00467f !important;
	color: #fff !important;
}
.main_form .form .pd-checkbox span {
    width: 100%!important;
    display: inline-block!important;
    margin-bottom: 15px!important;
}
.main_form .form .pd-checkbox span:last-child {
    margin-bottom: 0px!important;
}
.main_form .form .pd-checkbox label.inline {
    margin: 0px!important;
}
.main_form .form .pd-checkbox .field-label {
    margin: 0px 0px 5px 0px!important;
}
.main_form .form .pd-checkbox input[type="checkbox"] {
    opacity: 0!important;
    position: absolute!important;
    width: auto !important;
}
.main_form .form .pd-checkbox input[type="checkbox"], .main_form .form .pd-checkbox label.inline {
    cursor: pointer!important;
}
.main_form .form .pd-checkbox label.inline {
    position: relative!important;
    font-size: 14px!important;
    line-height: 1.2em!important;
    padding-left: 30px!important;
}
.main_form .form .pd-checkbox input[type="checkbox"] + label.inline:before {
    content: ''!important;
    background: #fff!important;
    border: 1px solid #333!important;
    float: left!important;
    vertical-align: middle!important;
    width: 15px!important;
    height: 15px!important;
    padding: 2px!important;
    margin-right: 0px!important;
    margin-bottom: 0px!important;
    text-align: center!important;
    margin-top: -1px!important;
    left: 0!important;
    position: absolute!important;
}
.main_form .form .pd-checkbox input[type="checkbox"]:checked + label.inline:before {
    content: "\f00c"!important;
    font-family: 'FontAwesome'!important;
    background: #333 !important;
    color: #fff!important;
    border-color: #333 !important;
    line-height: 1em!important;
}
.main_form .form .pd-radio span {
    width: 100%!important;
    display: inline-block!important;
    margin: 0 0 7px 0px!important;
}
.main_form .form .pd-radio span:last-child {
    margin-bottom: 0px!important;
}
.main_form .form .pd-radio label.inline {
    margin: 0px!important;
}
.main_form .form .pd-radio .field-label {
    margin: 0px 0px 10px 0px!important;
}
.main_form .form .pd-radio input[type="radio"] {
    opacity: 0!important;
    position: absolute!important;
    width: auto !important;
}
.main_form .form .pd-radio input[type="radio"], .main_form .form .pd-checkbox label.inline {
    cursor: pointer!important;
    color: #333 !important;
    font-family: 'Open Sans', sans-serif !important;
}
.main_form .form .pd-radio label.inline {
    position: relative;
    font-size: 14px!important;
    line-height: 1.2em!important;
    padding-left: 30px!important;
    cursor: pointer!important;
    width: auto!important;
}
.main_form .form .pd-radio input[type="radio"] + label.inline:before {
    content: ''!important;
    background: #fff!important;
    border: 1px solid #333!important;
    float: left!important;
    vertical-align: middle!important;
    width: 10px!important;
    height: 10px!important;
    padding: 2px!important;
    margin-right: 0px!important;
    margin-bottom: 0px!important;
    text-align: center!important;
    left: 0!important;
    position: absolute!important;
    border-radius: 50px!important;
    -webkit-border-radius: 50px !important;
}
.main_form .form .pd-radio input[type="radio"]:checked + label.inline:before {
    content: "\f00c"!important;
    font-family: 'FontAwesome'!important;
    background: #ee8a1d!important;
    color: #fff!important;
    border-color: #f47920!important;
    line-height: 1em!important;
    font-size: 10px!important;
}
.main_form .form .thanks_msg {
    width: 100%!important;
    text-align: center!important;
    float: left!important;
    padding: 20px 0px!important;
}
.main_form .form .thanks_msg h2 {
    width: 100%!important;
    display: inline-block!important;
    font-size: 28px!important;
    color: #333!important;
}
.main_form .form .thanks_msg p {
    text-align: center!important;
    font-size: 15px!important;
    color: #666!important;
    width: 100%!important;
    display: inline-block!important;
    margin: 0px !important;
    padding: 0px !important;
}
.main_form .form span.description {
    width: 100%!important;
    display: inline-block!important;
    padding: 20px 0px 10px!important;
    font-size: 15px!important;
    line-height: 1.3em!important;
}
.main_form .form .form-field.error {
    padding-bottom: 5px !important;
}
.main_form form.form p.no-label {
    text-align: left !important;
}

</style>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-59BV25V');</script>
<!-- End Google Tag Manager -->
</head>

<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-59BV25V"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="main_form">
  %%content%%
</div>
	
<script>
var labels = document.querySelectorAll("p.pd-text label, p.pd-select label, p.pd-textarea label");
         var i = labels.length;
         while (i--) {
         var label = labels.item(i);
         var text = label.textContent;
         label.parentNode.classList.contains("required") && (text += " *");
         var nextElement = label.nextElementSibling;
         
         if (nextElement) {
         if (nextElement.tagName == 'SELECT') {
         nextElement.options[0].text = text;
         } else {
         nextElement.setAttribute("placeholder", text);
         }
         label.parentNode.removeChild(label);
         }
         }
         // var elements = document.querySelectorAll('.no-label');
         Array.prototype.forEach.call(elements, function(el, i) {
         el.parentNode.removeChild(el);
         });	
</script>	
	
</body>
</html>

The Form sections consists of this text:

<form accept-charset="UTF-8" method="post" action="%%form-action-url%%" class="form" id="pardot-form">
%%form-opening-general-content%%

%%form-if-thank-you%%
	%%form-javascript-focus%%
	%%form-thank-you-content%%
	%%form-thank-you-code%%
%%form-end-if-thank-you%%

%%form-if-display-form%%

	%%form-before-form-content%%
		%%form-if-error%%
			<p class="errors">Please correct the errors below:</p>
		%%form-end-if-error%%
			
		%%form-start-loop-fields%%
			<p class="form-field %%form-field-css-classes%% %%form-field-class-required%% %%form-field-class-type%% %%form-field-class-hidden%% %%form-field-class-no-label%% %%form-field-class-error%% %%form-field-dependency-css%%">
				%%form-if-field-label%%
					<label class="field-label" for="%%form-field-id%%">%%form-field-label%%</label>
				%%form-end-if-field-label%%
				
				%%form-field-input%%
				%%form-if-field-description%%
					<span class="description">%%form-field-description%%</span>
				%%form-end-if-field-description%%
			</p>
			
			<div id="error_for_%%form-field-id%%" style="display:none"></div>
			%%form-field-if-error%%
				<p class="error no-label">%%form-field-error-message%%</p>
			%%form-field-end-if-error%%
			
		%%form-end-loop-fields%%
		
		%%form-spam-trap-field%%
		
		<!-- forces IE5-8 to correctly submit UTF8 content  -->
		<input name="_utf8" type="hidden" value="&#9731;" />
		
		<p class="submit">
			<input type="submit" accesskey="s" value="%%form-submit-button-text%%" %%form-submit-disabled%%/>
		</p>
	%%form-after-form-content%%
	
%%form-end-if-display-form%%

%%form-javascript-link-target-top%%
</form>

And Site search consists of this:

<form method="get" action="%%search-action-url%%" class="form" id="pardot-form">
	<p class="full-width">
		<input type="text" name="q" value="%%search-query%%" size="40" /> 
		<input type="submit" value="Search" /> 
	</p>
<h2>Search results for: %%search-query%%</h2>		

%%search-if-results%%
	<ol start="%%search-result-start-position%%">
		%%search-start-loop-results%% 
		<li>
			<strong><a href="%%search-result-url%%">%%search-result-title%%</a></strong><br/>
			%%search-result-description%%<br/> 
			<em>%%search-result-url-abbreviation%%</em> %%search-result-file-size%% KB
		</li> 
		%%search-end-loop-results%%
	</ol>
	
	<p class="pager">
		<strong>
		%%search-if-previous-page-available%%
		<a href="%%search-previous-page-url%%">
			Previous (page %%search-previous-page-number%%)
		</a>
		%%search-else-previous-page-not-available%%
			Previous 
		%%search-end-if-previous-page-available%% |
	
		Page %%search-this-page-number%% of %%search-total-pages-number%% | 
	
		%%search-if-next-page-available%%
			<a href="%%search-next-page-url%%">
			Next (page %%search-next-page-number%%)</a>
		%%search-else-next-page-not-available%%
			Next
		%%search-end-if-next-page-available%%
		</strong>
	</p>
%%search-else-no-results%%
	%%search-no-results-content%%
%%search-end-if-results%%
</form>

How am I able to bring this altogether in dreamweaver?

Nancy OShea

Community Expert

I'm afraid I have no idea what a "Pardot form" is, sorry. Dreamweaver is merely a code editor.

To duplicate the document above, go to File > SaveAs > some new filename.... Beyond that, I'm not sure what you're asking us to help you with.

Nancy O'Shea— Product User & Community Expert

erich6020735Author

Pardot is a marketing automation tool that we are using to track contact form leads.

I am trying to figure out how to tie this code together as I am not able to display the form within the Live section as it looks when we embed the form on our site.

The underneath the "Form" section is text that says "Form content is inserted in to the %%content%% tag in the layout"

When I paste the code into the %%content%% part of the layout, it does not display properly.

I am trying to figure out how to properly tie this all togehter in dreamweaver.

Forget about WYSIWYG. This will never display in Dreamweaver or your local browser because it's incomplete. This appears to be some kind proprietary form code that must be uploaded to the hosting platform that supports it in order to work. Right now, it's just arbitrary code and I'm not even sure what kind of code it is.

Use Dreamweaver to work with code only. When you want to test the form, upload it to your hosting server.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded