Replicating Pardot form in Dreamweaver

Report · Aug 03, 2021

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?

Report · Aug 03, 2021

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 & Moderator

Report · Aug 03, 2021

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" form section.JPG

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.

Report · Aug 03, 2021

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.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 03, 2021

Alternatively, you could possibly use an <iframe> to embed the Pardot generated forms into your HTML document. There are pros & cons to using <iframes> however.

https://www.salesforceben.com/the-drip/embed-pardot-forms-on-your-website-using-iframe/

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 03, 2021

The entire premise of what I am attempting to do it to move the "This field is required" above the corresponding red boxes.

I did not make this form, but I am trying to do what I can to figure it out, and all I have to go off of is the code above.

Since this is not appear to be a dreamweaver issue, I dont believe I'll be getting any help with this one and I'll have to try my luck elsewhere.

Report · Aug 03, 2021

I thought I would be able to assemble the form on Dreamweaver using the code from Pardot to diagnose this issue, turns out I was wrong.

Report · Aug 03, 2021

You'll have to go back to Pardot and recreate your forms there.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 03, 2021

Yes but I cant be altering a live form that is being used on sites. So I figured mograting the form to work on it elsewhere would be the better option.

Report · Aug 03, 2021

Pardot forms are generated by a 3rd party. So I'm pretty sure you need to go back to the 3rd party site to create new forms.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 05, 2021

@erich6020735 - Having worked in Pardot for years you cannot just simply edit in DW.

First off, there are 2 types of forms in Pardot, Pardot Forms, and Form Handlers. Pardot Forms are hosted within Pardot via an iFrame and are one of the reasons I don't recommend it for some clients who are not code-saavy. Pardot Form Handlers are better for what you are looking for but require coding knowledge. With Pardot Form Handlers, if you simply post your form to the URL, you can create the form and do whatever you want to do with it with the code.

The good news here is that you can do what you want. The bad news, again, is that if you are not technical and do not have ability to do advanvced code on the page, Form Handlers cannot generate your errors automatically and you need to do the error checking before you make the post to Pardot otherwise Pardot could potentially accept bad data.

Adobe Community

Replicating Pardot form in Dreamweaver