Creating Mobile Responsive Pardot Forms

I’m not a developer.  So when I saw how easy it was to integrate a Pardot web form with a website using an iframe, it seemed too good to be true.  Pardot makes dynamic and progressive capture forms easy.  You simply create the form in Pardot and Pardot gives you a code snippet to paste into your website content management system (CMS).  This code calls an iframe from Pardot.  In this article we will take the concept a step further allowing us to create mobile responsive Pardot forms.

Now iframes have gotten a bad rap over the years.  They bring back images of decade old websites that are split into horrific sections; however, iframes are still very useful, are part of the HTML5 standard, and through custom styling (CSS), have found a happy place in today’s web community. Gone are the blocky days of the past, and in are responsive iframes that will seamlessly integrate into your website.

As with all things “styling”, this may not be for the faint of heart.  There is a big difference between a website and responsive website that conforms to the users device.

I set out to do this exercise on my Higher Education WordPress site, connecteduniversity.biz, with a standard responsive theme and design.  Although this exercise could be done on any CMS, such as Drupal, the same principles apply.  I found the code snippets and settings needed to make the Pardot foms look great with my university responsive theme.

Steps to create mobile responsive Pardot forms:

Step 1: Create your Pardot Form Layout – Navigate to (Marketing > Forms > Layout Templates) and select Add Layout Template.  Give it a name such as “Default Responsive Form Template”

Step 2: In the Layout tab is where you will change the elements of Pardot’s default CSS to make the form fields responsive.  You can read all about it in this Pardot help article, or you can simply copy the code below and paste it in your template (click to expand).


Step 3:
Now that the Pardot form filds are responsive, it’s time to tackle the iframe itself and make it responsive.  The simplest way to do this is using the javascript iframe-resizer.  Click on the link and download iframeResizer.min.js and iframeResizer.contentWindow.min.js.  In WordPress, these two files will go into your themes js directory.  This is typically done via FTP to your website or using file manager in cPanel on many web hosts.

Step 4:
 Now register the javascript so it can be used on your site.  In WordPress, this is done by editing your theme functions.php file through Appearance –> Editor in your WordPress admin.  Select the functions.php file on the right and insert the following code (click to expand):


Step 5: 
Now that we have responsive form fields and the right javascript in place to resize the iframe, it’s time to create a form. Here is a great Pardot help article on creating forms with a video, but we have one more step to do in the third section, Look and Feel.  In Step 3, paste the following code above the form to reference the resizer script.  Be sure to replace mydomain.com and theme_name with your own domain and theme (click to expand).


Responsive Pardot Forms

Pardot Look and Feel Form Editor (Click to Enlarge)

 

Step 6: The final step is to paste the Pardot iframe code into the CMS web page and include the resizer script.  In WordPress, this can be done in the the text tab of the page WYSIWYG editor as seen below, simply replace the src with the code Pardot provides (click to expand):

 

To see this responsive form in action, stop over at the Apply Now page of connecteduniversity.biz.  Resize the browser to tablet or mobile sizes to see both the form fields respond along with the iframe.  Try submitting a blank form to see the error handling dynamically shift the size as well.

* The views expressed on this site are of the original authors or contributors and do not reflect those of Salesforce.org, its affiliates, or its clients.

Welcome! Forums Creating Mobile Responsive Pardot Forms

This topic contains 0 replies, has 1 voice, and was last updated by  Brent Wege 3 years, 2 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #391 Reply

    Brent Wege
    Keymaster

    I’m not a developer.  So when I saw how easy it was to integrate a Pardot web form with a website using an iframe, it seemed too good to be true… [See the full post at: Creating Mobile Responsive Pardot Forms]

    #495 Reply

    lneuumkcnwi

    (Awaiting moderation)

    #515 Reply

    FrankZed

    (Awaiting moderation)

    #516 Reply

    CalvinKeync

    (Awaiting moderation)

    #519 Reply

    Waltertop

    (Awaiting moderation)

    #520 Reply

    Keithordew

    (Awaiting moderation)

    #521 Reply

    CalvinKeync

    (Awaiting moderation)

    #525 Reply

    FrankZed

    (Awaiting moderation)

    #529 Reply

    Keithordew

    (Awaiting moderation)

    #553 Reply

    imutuluye

    (Awaiting moderation)

    #554 Reply

    ividipelelad

    (Awaiting moderation)

    #555 Reply

    JosiZep

    (Awaiting moderation)

Viewing 12 posts - 1 through 12 (of 12 total)
Reply To: Creating Mobile Responsive Pardot Forms
Your information: