Tips and tricks to improve Pardot form select fields with JavaScript

After completing multiple projects in Pardot, here are some of the tips and tricks to improve the form select fields of Pardot with Javascript. There is no default value shown in the Pardot form select, so if you want to add some default value like for the country field: "Please select your Country" then you need to add some JavaScript. Here is the default form select field in Pardot.

Here is the JavaScript that you can add to the form

You can add the above JavaScript in the Pardot form, one way is you can add the JS by editing the form >> Look and Feel tab >> Below Form tab >> Click the Source icon and paste the Javascript.

Now the form looks like the below:

Read more: Marketo form administration tool – add or update field for all forms at once

If you did not see the value then you may need to customize the following line of code:

document.querySelector(".country select option");

Change that country to your form field name. You can see it by inspecting it. In the browser, right-click near the form field >> then click inspect >> see what is the field name in the class

Following is one example:

form-field  country pd-select required    form-field-primary

With that, we can say the class is country so we use .country

How to set a default value for a custom dropdown in a Pardot form?

You wanted a default value to be selected, for example, the USA country needs to be selected by default.

When we inspect we find that the value of the option is 7683158

Now adding the following JavaScript in the below form will select the USA by default.

Here is the final result:

Read more: Pardot, Mailchimp, and website integrating Marketing system

Let’s make the select label a placeholder

CSS that makes the label lower can be like below:

Now select the field that looks like below:

Now, with the following JavaScript, the select form label is pulled up when the option value is changed.

Here is the result

Read more: How to integrate Pardot on the website easily?

How to add custom form field validation in Pardot form?

Let’s say you need to validate a phone form field and allow more than 7 digits, then something like the below JavaScript can do the trick.

How to add the placeholder form field in Pardot form?

As Pardot doesn't have a placeholder by default, so you can add the placeholder from JavaScript code like below, let's say your field's class name is first_name then the code is:

var firstname = document.querySelector('.first_name input');
 if(firstname){
    firstname.placeholder = 'John';
}

In this way, we helped multiple clients to make form layouts, landing page layouts, and email layouts and made them as per their brand guidelines. Please let us know if you have similar kinds of projects, you can email us at webocreation.com@gmail.com. Hope you liked this tutorial, please subscribe to our YouTube Channel and read more about Salesforce, Pardot, Marketo, and Hubspot. You can also find us on Twitter and Facebook.