How to Create a Better Date Picker Within Pardot Forms

In:

Want to be able to restrict the date range of a date picker within your Pardot forms? The default date picker with Pardot does not provide this option, but with a couple of lines of JavaScript, you can enhance the functionality of the date picker. In this tutorial, I’ll show you how to use the jQuery UI date picker within your Pardot form.

Step 1: Add the field to your form

Add the field to your form. Since we won’t be using the default date picker leave the type as TEXT.

Step 2: Add the JavaScipt to your form

In the form editor, go to step #3 – look & feel and click on the below form section. Copy & paste this JavaScript in the HTML editor.



Step 3: Edit the script

There are a couple of changes you need to make to the script in order for it to work with your form:

  1. Update YOURDATEFIELDNAME with the name of your Pardot field that should launch the date picker.
  2. Update minDate with the number of days in the past the user should be able to see and select. For example “0” would not show any dates in the past. “-20” would allow the user to select up to 20 days in the past.
  3. Update maxDate with the number of days in the future the user should be able to select. For example, “+1M” would allow the user to select a date that is 1 month in the future.

Step 4:

Save and test! Your date picker should look like the one below and if you fill out the form the date should populate within Pardot in the yyyy-mm-dd format.

Questions?

Send me a tweet @jennamolby, or leave a comment below.

Related Posts

  • 15/10/2020
    How to Use Flex Fields in Pardot

    Flex fields are custom fields that can be used over and over again to limit the number of one-time-only fields within Pardot and Salesforce. They contain data that is required temporarily to execute a specific event or campaign. Once the data is no longer needed, the fields can be reset to blank using an Engagement Program or Automation Rule

  • 04/10/2020
    How To Embed a Pardot Form on Your Website The Right Way

    Pardot offers 2 methods for embedding forms on your website; embedding using an iframe, and form handlers. While the embedded iFrame forms allow marketers to have control over updating and configuring the forms, using an iFrame isn’t always ideal for website usability. In this tutorial, I will show you how to take advantage of the Pardot iFrame forms and make it look great embedded on your website.

  • 23/09/2020
    7 Ways Pardot Users Can Use Chrome Developer Tools For Troubleshooting & Testing

    Chrome Developer Tools is widely used by developers to help edit pages on-the-fly and diagnose issues. Pardot users can use DevTools to troubleshoot and test landing pages and forms. In this post, I’ll show you 7 ways you can use DevTools, including how to identify errors on a landing page, how to customize the CSS of a form and how to view hidden form field values.

4 comment(s)
  • Partha Dave

    05/05/2020 at 2:46 am
    Reply

    Hi, this doesnt seem to work for me, i think there may be some conflict with what the pardot field name is, is this is the label of the field or the prospect field name?

    • Jenna Molby
      to Partha Dave

      09/05/2020 at 12:05 pm
      Reply

      Hi Partha, It's the prospect field name. If you are still having issues you can send me the link to your landing page to [email protected] and I can confirm that the name is correct. Cheers, Jenna

  • Jon McMinn

    06/04/2020 at 1:35 pm
    Reply

    Love this solution, Jenna! Is it possible to restrict the days available (for instance, prevent someone from selecting a weekend day)?

    • Jenna Molby
      to Jon McMinn

      09/04/2020 at 10:48 am
      Reply

      Thank you :). The easiest way to not allow someone from selected a weekend day is to hide the weekends using CSS, like this: th.ui-datepicker-week-end, td.ui-datepicker-week-end { display: none; }. Cheers, Jenna

Leave A Comment

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

About Me


Welcome to my blog, where I share, tips, tricks, thoughts and solutions that I learn in my daily life as a Marketing Operations leader.

Categories
Most Commented
Popular Posts