The 2nd part of the form customization series is finally here! In part 1, I showed you how to implement the popular floating label technique and how to create searchable, user-friendly dropdowns. In this post, I will show you how to create a conversational, paragraph-style form and how to create a form on a single line.

This is part 2 of the 3 part series. Have you come accross a form recently and didn’t know to replicate the functionality in Pardot? Share it with me via email, a tweet @jennamolby, or in the comments.

Create a paragraph-style form

This “conversational”, paragraph-style form is a unique way to display your Pardot form. It requires editing your layout template and adding some custom javascript and CSS. Here’s a preview of what it looks like.



Edit your layout template

In order for this method to work, you need to make some updates to your layout template. Navigate to your layout template and click on the FORM tab. Replace the code with the code below.

%%form-opening-general-content%% %%form-if-thank-you%% %%form-javascript-focus%% %%form-thank-you-content%% %%form-thank-you-code%% %%form-end-if-thank-you%% %%form-if-display-form%% %%form-before-form-content%% %%form-if-error%%

Please correct the errors below:

%%form-end-if-error%% %%form-start-loop-fields%%
%%form-if-field-label%% %%form-end-if-field-label%% %%form-if-field-description%% %%form-field-description%% %%form-end-if-field-description%% %%form-field-input%% %%form-field-if-error%%

%%form-field-error-message%%

%%form-field-end-if-error%%
%%form-end-loop-fields%% %%form-spam-trap-field%%

%%form-after-form-content%% %%form-end-if-display-form%% %%form-javascript-link-target-top%%

What has changed?
The paragraph tags surrounding the inputs have been replaced with DIVs and the description code has been moved from after the input to before the input.

Edit your form

Since this is an advanced technique, the form setup is a bit unique. The labels within the form will act as the “paragraph text” and the description option will be used as the placeholders within the fields.

Here’s what the set up of my form looks like once the labels are updated and the description text is added.

Add the Javascript

This javascript will take the description text from the form and turn them into placeholder text.


Add the CSS

The CSS is pretty straightforward. Float all the labels and inputs to the left, style the placeholder text and error messages.


Extra customizations

Bump the text to a different line

By default, the form fields will appear on a different line and wrap based on the width of your form. If you want to force a new line, navigate the form field that should start on a new line within the editor. Click on the advanced tab and add the class line-break as shown below.

Add a period to the end of a sentence

You can also add a period at the end of a sentence. Simply, add the class end where you want the period to appear.

The result

Minimal stylying



Styled version



Create a form on a single line

I get a lot of inquiries on how to put form fields and the submit button on a single line. Now I have finally found the time to document it. Here’s an example of what the form will look like.

Edit your layout template

For this method to work, you need to make some updates to your layout template. Navigate to your layout template and click on the FORM tab. Replace the code with the code below.

%%form-opening-general-content%% %%form-if-thank-you%% %%form-javascript-focus%% %%form-thank-you-content%% %%form-thank-you-code%% %%form-end-if-thank-you%% %%form-if-display-form%% %%form-before-form-content%% %%form-if-error%%

Please correct the errors below:

%%form-end-if-error%% %%form-start-loop-fields%%
%%form-if-field-label%% %%form-end-if-field-label%% %%form-field-input%% %%form-if-field-description%% %%form-field-description%% %%form-end-if-field-description%% %%form-field-if-error%%

%%form-field-error-message%%

%%form-field-end-if-error%%
%%form-end-loop-fields%% %%form-spam-trap-field%%

%%form-after-form-content%% %%form-end-if-display-form%% %%form-javascript-link-target-top%%

What has changed?
The paragraph tags surrounding the inputs have been replaced with DIVs.

Add the CSS




The result

Minimal styling with one field



Minimal styling with multiple fields



Styled with one field



Styled with multiple fields



Questions?

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

Author

I'm a Freelance Marketing Operations Consultant With 15 years of experience in Marketing Operations, I’ve worked with a wide range of tools including Salesforce, Marketing Cloud Account Engagement (Pardot), Marketo, and many other sales and marketing platforms. I help teams optimize their tech stacks, improve processes, and get accurate, actionable reporting. Whether it’s setting up your Marketing Automation Platform, building Salesforce reports, managing lead lifecycles, tracking attribution, or integrating your tech stack, I ensure everything is aligned to drive real results.

4 Comments

  1. Hi Jenna,

    Thank you so much for sharing this information on single line forms! I’m just having one issue, my submit button isn’t working. I’ve copied the code exactly as you’ve outlined but the submit button results in no action. Any ideas as to why?

    • Jenna Molby

      Hi Tammy, That’s strange! DM me the link to your form and I can take a look.

  2. Such a great resource, thank you!

    Currently using your suggested code for a form on a single line styled with multiple fields, but am stuck on something. I can’t get the “submit” button to move to its own line on mobile. The rest of the fields stack, but the button remains to the right of the last field, rather than breaking onto the next line. Any ideas? Thanks so much.

    • Jenna Molby

      Hi Caitlin, Adding this CSS to your form should bump the submit button to another line on mobile devices @media only screen and (max-width : 680px) {
      form.form p.submit {
      clear:both !important;
      }
      } Cheers, Jenna

Write A Comment