Pardot Forms/Landing Pages for Salesforce

Anonymous 

 0

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″ 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 :

<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>
                <form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/141381/2016-03-05/hvk8" id="pardot-form">
                <input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="" />
                <div>
                    <div>
                        <div>
                            <div>
                                <h3>Please Enter Your Contact Information</h3>
                            </div>
                            <div></div>
                        </div>
                    <div>
                        <div>
                            <div>
                                <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" 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="" size="20" maxlength="40" onchange="" required="required"/>                                                    
                                        <div id="141381_3057pi_141381_3057" style="display:none"></div>
                                </div> 
                             </div>
                            <div>
                                <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="" 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>
                                <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" required="required"/>
                                        <div id="141381_3061pi_141381_3061" style="display:none"></div>
                                </div>
                            </div>
                            <div>
                                <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="" size="30" maxlength="65535" onchange="" />
                                    <div id="141381_3069pi_141381_3069" style="display:none"></div>
                                </div>
                            </div>                                                                                    
                        </div>
                        <div>
                            <div>
                                <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" required="required"/>
                                        <div id="141381_3059pi_141381_3059" style="display:none"></div>
                                </div>
                            </div>
                            <div>
                                <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" required="required" />
                                        <div id="141381_3067pi_141381_3067" style="display:none"></div>
                                </div>       
                            </div>                            
                        </div>
                        <div>
                            <div class = "panel-body form-horizontal">
                                <div>
                                    <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>
          <div>
              <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>
                <div>
                      <img alt="iBirds" class= "logo" src="http://pi.pardot.com/l/141381/2016-03-05/hvkb/141381/4625/customLogo.png" />
                </div>
                <div>
                    <ul class = "menus" style = "margin-top: 60px;">
                        <li>
                            <a href="#">Home</a>
                        </li>
                        <li>
                            <a href="#">Services</a>
                        </li>
                        <li>
                            <a href="#">About</a>
                        </li>
                        <li>
                            <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;">
        &copy; 2016 iBirds, Site powered by iBirds Private Group;
    </p>
</apex:component>



Here is the testing public url where you can test this demo :

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

leave a comment

Your email address will not be published. Required fields are marked *