• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Replicating Pardot form in Dreamweaver

New Here ,
Aug 03, 2021 Aug 03, 2021

Copy link to clipboard

Copied

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?

Views

448

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 03, 2021 Aug 03, 2021

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 03, 2021 Aug 03, 2021

Copy link to clipboard

Copied

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

 

pardot form.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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 03, 2021 Aug 03, 2021

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 03, 2021 Aug 03, 2021

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 03, 2021 Aug 03, 2021

Copy link to clipboard

Copied

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.

form.JPG

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 03, 2021 Aug 03, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 03, 2021 Aug 03, 2021

Copy link to clipboard

Copied

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

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 03, 2021 Aug 03, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 03, 2021 Aug 03, 2021

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 05, 2021 Aug 05, 2021

Copy link to clipboard

Copied

LATEST

@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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines