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)
  • jason

    08/03/2019 at 2:58 pm
    Reply

    For some reason, when I have a dropdown input type, the box is a different size than the text boxes. Is there a way to set the width of these elements? Is this width defined independently of other fields?

  • Ajay

    07/03/2019 at 9:39 am
    Reply

    Hi Jinni...I mean Jenna :) your blog has been such a great help. Have been using your help for last 2 months and it's now kinda my magic lamp :). For this form css, it's working fine on my landing page so thanks for that, however I have a different requirement, I am asking user for his/her info and for a reference, so to highlight the 'reference' part, want to make only those fields in a different color (background), so if there are 6 fields in total (all are text fields), 3 of them should be in different color. I am sure 'jinni' would have answer for that as well.

    • Jenna Molby
      to Ajay

      07/03/2019 at 12:47 pm
      Reply

      Hi Ajay, You can do this in CSS. Here's an example: form.form p.fieldname input.text {background-color:red;} where fieldname is the name of your field. Cheers, Jenna

  • RC

    11/02/2019 at 10:26 am
    Reply

    Is there a way to only change the size of one field within the "text" field type? For example, I have 4 text fields on my form, but would only like one of those fields to have an updates size.

  • Amanda

    30/10/2018 at 1:09 pm
    Reply

    Hey Jenna - I'm wondering how to format these buttons for mobile. I got them looking stellar on desktop, but everything gets stripped for mobile. Thanks! PS Your tutorials are a life-saver!

  • Alana Davis

    17/07/2018 at 9:12 am
    Reply

    Hi Jenna! I have added the code into the form section of the layout and applied it to a form but when I place the code into the landing page (in HubSpot), it is showing up blank. I noticed a couple other people had the same issue so is there possibly a common mistake I may be making as well? Thank you!

1 3 4 5 6

Leave A Comment

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