Form Style Generator for Pardot Forms

Easily style and customize your Pardot lead forms by using this Form Style Generator for Pardot Forms. With only a couple of clicks you can customize every aspect of your Pardot form including: button color, label positioning and text color, no coding required.

Fields

Borders & Background

px
px

Fonts

px
px
px

Labels

Fonts

px

Required Fields

Spacing

px
px

Button

Font

px

Spacing

px
px

Borders & Background

px
px

Size

px
px

Preview

	
45 comment(s)
  • Bryan Kreitz

    17/03/2019 at 3:20 pm
    Reply

    Hi Jenna. Thanks for putting this together. Would welcome your input on how to target styling in a Pardot form for an individual field, namely a multi-select field. If I set the form.form select {height: 150px;} for example, it sets the height for all drop-down fields in the form at 150px. I don't want that. I want to target just a single specific field, presumably using the field ID (i.e. #18922_221116pi_18922_221116) to set the height just for that field...it's a multi-select field, hence the desired height increase. Have tried dozens of approaches and can't get the CSS to take. For reference I'm just adding a section above the form so inheritance doesn't "seem" to be a concern. Can't find a single example of how to make this work. Would be a great tidbit of info for our community. Any ideas? Appreciate your insights, Bryan

    • Jenna Molby
      to Bryan Kreitz

      20/03/2019 at 3:03 pm
      Reply

      Hi Bryan, You're welcome :) The ID in the example you shared changes every time you save your form. That's why it's not working for you. Instead, each form field is wrapped in a paragraph (P tag) that has a unique ID that is the name of the field. For example, if you have a dropdown field for COUNTRY your CSS selector would be p.country select. Hope that helps! Cheers, Jenna

1 4 5 6

Leave A Comment

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