Hi All,
Pardot's Form Wizard lets you create a customized form in seconds. We can use pardot forms on our website to collect information about visitors and create prospects and other actions.
How to create form into pardot?
In pardot > Marketing Menu > Forms > Form..
Then click on 'Add Form' button from right side, A wizard will open...
Step 1 : Enter Form name, and select folder where you want to save this form, choose campaign.
Step 2 : Select fields you want to show on page, you can also add new fields here
according to different data types. You can also make required fields.
Step 3 : You can also select Layout template here, you can also apply some styles on above and below of form.
Step 4 : After form submission, you can show ThankYou content from this step, you can also redirect on a particular location using "Redirect the prospect instead of showing the form's Thank You Content" option, and specify url in below text box. In completion Action section, you can also select an action which you want to perform after form completion.
Step 5 : After fill all details in above steps, Click on Confirm and Save.
Now, your form is ready to use. You can see form will look like that :
You can here, 'Link' of form and also 'Redirect Location'. When you click on 'Link' of form then you form will look like that (if you design any layout template, that will also apply):
How to use Pardot form in salesforce and create prospects?
Step 1 : Design layout of form in salesforce using visualforce page.
Step 2 : Open above form into a tab and open view source of that page.
Step 3 : You can see that there are some ids into each input like that "141381_1661pi_141381_1661", this is id which is used by pardot to create prospects.
Step 4 : Set action on <form> tag like that :
<form accept-charset="UTF-8" action="http://go.pardot.com/l/141381/2016-03-05/hvk8" class="form" id="pardot-form" method="post">
Here, action is url of your form which you want to connect.
Step 5 : Add some script from view source of form into your visualforce page.
Your form is ready, you can use this form from your site or anywhere, and when you will fill info and submit that form, like that :
When you click on 'Send' button, this will redirect on specified location which you specified into pardot form 'Redirect Location'.
After Submit form, this will create a prospect record in Pardot.
'Registration Form' Visualforce Page :
'RegistrationThankyou' Visualforce Page :
'RegistrationHeader' Visualforce Component :
'RegistrationFooter' Visualforce Component :
Here is the testing public url where you can test this demo :
http://ranu-singhal-developer-edition.ap1.force.com/Registration_Form
Try this in your salesforce org. If you face any issue implementing this, email to me, i will help to set this up. Provide your valuable feedback to me.
Pardot's Form Wizard lets you create a customized form in seconds. We can use pardot forms on our website to collect information about visitors and create prospects and other actions.
How to create form into pardot?
In pardot > Marketing Menu > Forms > Form..
Then click on 'Add Form' button from right side, A wizard will open...
Step 1 : Enter Form name, and select folder where you want to save this form, choose campaign.
Step 2 : Select fields you want to show on page, you can also add new fields here
according to different data types. You can also make required fields.
Step 3 : You can also select Layout template here, you can also apply some styles on above and below of form.
Step 4 : After form submission, you can show ThankYou content from this step, you can also redirect on a particular location using "Redirect the prospect instead of showing the form's Thank You Content" option, and specify url in below text box. In completion Action section, you can also select an action which you want to perform after form completion.Step 5 : After fill all details in above steps, Click on Confirm and Save.
Now, your form is ready to use. You can see form will look like that :
You can here, 'Link' of form and also 'Redirect Location'. When you click on 'Link' of form then you form will look like that (if you design any layout template, that will also apply):
How to use Pardot form in salesforce and create prospects?
Step 1 : Design layout of form in salesforce using visualforce page.
Step 2 : Open above form into a tab and open view source of that page.
Step 3 : You can see that there are some ids into each input like that "141381_1661pi_141381_1661", this is id which is used by pardot to create prospects.
Step 4 : Set action on <form> tag like that :
<form accept-charset="UTF-8" action="http://go.pardot.com/l/141381/2016-03-05/hvk8" class="form" id="pardot-form" method="post">
Here, action is url of your form which you want to connect.
Step 5 : Add some script from view source of form into your visualforce page.
Your form is ready, you can use this form from your site or anywhere, and when you will fill info and submit that form, like that :
<apex:page sidebar="false" showHeader="false" standardStylesheets="false" docType="html-5.0"> <c:RegistrationHeader /> <head> <script type="text/javascript" src="http://form-cdn.pardot.com/js/piUtils.js?ver=20130530"></script><script type="text/javascript"> piAId = '142381'; piCId = '1439'; if(!window['pi']) { window['pi'] = {}; } pi = window['pi']; if(!pi['tracker']) { pi['tracker'] = {}; } pi.tracker.pi_form = true; (function() { function async_load(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.src = ('https:' == document.location.protocol ? 'https://pi' : 'http://cdn') + '.pardot.com/pd.js'; var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c); } if(window.attachEvent) { window.attachEvent('onload', async_load); } else { window.addEventListener('load', async_load, false); } })(); </script> <script type="text/javascript"> //<![CDATA[ var anchors = document.getElementsByTagName("a"); for (var i=0; i<anchors.length; i++) { var anchor = anchors[i]; if(anchor.getAttribute("href")&&!anchor.getAttribute("target")) { anchor.target = "_top"; } } //]]> </script> <script type="text/javascript">(function(){ pardot.$(document).ready(function(){ (function() { var $ = window.pardot.$; window.pardot.FormDependencyMap = []; $('.form-field-master input, .form-field-master select').each(function(index, input) { $(input).on('change', window.piAjax.checkForDependentField); window.piAjax.checkForDependentField.call(input); }); })(); });})(); </script> </head> <div class ="container"> <div class="row"> <form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/141381/2016-03-05/hvk8" class="form" id="pardot-form"> <input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="" /> <div class="col-sm-10 col-sm-offset-1"> <div class="panel panel-default"> <div class="panel-heading"> <div class="pull-left"> <h3 class="panel-title">Please Enter Your Contact Information</h3> </div> <div class="clearfix"></div> </div> <div class="panel-body form-horizontal"> <div class="col-sm-6"> <div class="form-group"> <div class = "col-sm-4"> <label for="141381_3065pi_141381_3065" class = "headColor">Title*</label> <select name="141381_3065pi_141381_3065" id="141381_3065pi_141381_3065" class="form-control select backcolor" onchange="" required="required"> <option value="" selected="selected"></option> <option value="12121">Mr.</option> <option value="12123">Mrs.</option> <option value="12125">Ms.</option> </select> <div id="141381_3065pi_141381_3065" style="display:none"></div> </div> <div class = "col-sm-8"> <label for="141381_3057pi_141381_3057" class = "headColor">First Name*</label> <input type="text" name="141381_3057pi_141381_3057" id="141381_3057pi_141381_3057" value="" class="form-control text backcolor text-input green-border required " size="20" maxlength="40" onchange="" required="required"/> <div id="141381_3057pi_141381_3057" style="display:none"></div> </div> </div> <div class="form-group"> <div class = "col-sm-12"> <label for="141381_3063pi_141381_3063" class = "headColor">E-Mail*</label> <input type="text" name="141381_3063pi_141381_3063" id="141381_3063pi_141381_3063" value="" class="form-control text" size="20" maxlength="255" onchange="piAjax.auditEmailField(this, 141381, 1667, 24365);" required="required"/> <div id="141381_3063pi_141381_3063" style="display:none"></div> </div> </div> <div class="form-group"> <div class = "col-sm-12"> <label for="141381_3061pi_141381_3061" class = "headColor">Company*</label> <input id="141381_3061pi_141381_3061" maxlength="40" name="141381_3061pi_141381_3061" size="20" type="text" class="form-control text text-input green-border required " required="required"/> <div id="141381_3061pi_141381_3061" style="display:none"></div> </div> </div> <div class="form-group"> <div class = "col-sm-12"> <label for="141381_3069pi_141381_3069" class = "headColor">Remarks</label> <textarea type="text" name="141381_3069pi_141381_3069" id="141381_3069pi_141381_3069" value="" class="form-control text text-input green-border" size="30" maxlength="65535" onchange="" /> <div id="141381_3069pi_141381_3069" style="display:none"></div> </div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <div class = "col-sm-12"> <label for="141381_3059pi_141381_3059" class = "headColor">Surname*</label> <input id="141381_3059pi_141381_3059" maxlength="80" name="141381_3059pi_141381_3059" size="20" type="text" class="form-control text text-input green-border required " required="required"/> <div id="141381_3059pi_141381_3059" style="display:none"></div> </div> </div> <div class="form-group"> <div class = "col-sm-12"> <label for="141381_3067pi_141381_3067" class = "headColor">Phone*</label> <input id="141381_3067pi_141381_3067" maxlength="40" name="141381_3067pi_141381_3067" size="20" type="text" class="form-control text text-input green-border required" required="required" /> <div id="141381_3067pi_141381_3067" style="display:none"></div> </div> </div> </div> <div class="row"> <div class = "panel-body form-horizontal"> <div class="form-group"> <div class = "col-sm-12"> <label style= "color: #f44336;">* These fields are required.</label> <input type="submit" name="submit" value="Send" accesskey="s" class = "btn btn-success sendbtn"/> </div> </div> </div> </div> </div> </div> </div> </form> </div> <div class = "row"> <c:RegistrationFooter /> </div> </div> </apex:page>
'RegistrationThankyou' Visualforce Page :
<apex:page sidebar="false" showHeader="false" standardStylesheets="false" docType="html-5.0"> <c:RegistrationHeader /> <div class="row"> <div class="col-sm-10 col-sm-offset-1"> <hr/> <h2 class = "thanks">Thank You!</h2> <p> Thank you for contacting us. </p> <hr/> </div> </div> <c:RegistrationFooter /> </apex:page>
'RegistrationHeader' Visualforce Component :
<apex:component > <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" /> <script src="https://code.jquery.com/jquery-1.11.3.min.js"/> <link href="{!URLFOR($Resource.bootstrap,'bootstrap/css/bootstrap.css')}" rel="stylesheet" /> <link href="{!URLFOR($Resource.bootstrap,'bootstrap/dist/jquery.bootgrid.css')}" rel="stylesheet" /> <script src="{!URLFOR($Resource.bootstrap,'bootstrap/js/modernizr-2.8.1.js')}"></script> <script src="{!URLFOR($Resource.bootstrap,'bootstrap/js/bootstrap.min.js')}"></script> <title>Registration Form</title> <style> ul.menus li{ display: inline; padding: 25px; } .form-control{ background-color: hsla(0, 0%, 90%, 0.45); } .logo{ width: 88%; padding: 15px 5px 5px 95px; } .pright{ float: right !important; padding-right: 105px; } .panel-primary> .panel-heading { font-weight: bold; } .txtcolor{ color: #6fb034; } .panel-default > .panel-heading { background: linear-gradient(#6fb034, #6fb034, #6fb034); border-color: #6fb034; } .panel-title{ font-weight: bold; color: white; } .sendbtn{ margin-left: 195px; background-color: #f44336; border-color: #f44336; } .btn:hover { background-color: #f44336; border-color: #f44336; } .thanks{ font-size: 2.2em; color: #2274bd; padding: 0 0 .5em 0; line-height: 1.2; font-weight: normal; margin: 0; font-weight: bold; } </style> </head> <div class ="container"> <div class="row"> <div class="pull-left"> <img alt="iBirds" class= "logo" src="http://pi.pardot.com/l/141381/2016-03-05/hvkb/141381/4625/customLogo.png" /> </div> <div class="pull-right pright"> <ul class = "menus" style = "margin-top: 60px;"> <li class=""> <a href="#">Home</a> </li> <li class=""> <a href="#">Services</a> </li> <li class=""> <a href="#">About</a> </li> <li class=""> <a href="#">Contact</a> </li> </ul> </div> </div> </div> </apex:component>
'RegistrationFooter' Visualforce Component :
<apex:component > <div style="text-decoration: none;text-align: center;"> <a href="#" target="_blank"> <img src="http://storage.pardot.com/141381/553/ic_google_plus.png" /> </a> <a href="#" target="_blank"> <img src="http://storage.pardot.com/141381/555/ic_twitter.png" /> </a> <a href="#" target="_blank"> <img src="http://storage.pardot.com/141381/551/ic_facebook.png" /> </a> </div> <p style = "text-align: center;"> © 2016 iBirds, Site powered by iBirds Private Group; </p> </apex:component>
Here is the testing public url where you can test this demo :
http://ranu-singhal-developer-edition.ap1.force.com/Registration_Form
Try this in your salesforce org. If you face any issue implementing this, email to me, i will help to set this up. Provide your valuable feedback to me.
Thanks
