Pardot Knowledge Base

Changing Form Submit Button to an Image

Last Updated: Apr 26, 2016 | Print this Article
 

For Forms and Landing Pages built using Layout Templates

  1. Navigate to your form and edit it.
  2. In the Look and Feel step of the form wizard, remove all text in the Submit Button field unless you want the text to appear over the image.
  3. Navigate to your form's layout template and edit it.
  4. Copy and paste the following code in the <head> tag of the Layout Content tab of the layout template; if the form is on a Pardot landing page, insert the following into the Layout Template for the landing page.
  5. Replace the URL in the example with the URL of the hosted image.
  6. View the image properties and then edit the width and height values in the code to match.
  7. Click Save layout template when finished.
Layout Template Change

Edit the information in the highlighted box to match your specific image.

For Forms in Landing Pages built using the Landing Page Builder (and preformatted templates)

  1. Choose the landing page to edit and navigate to the Landing Page Content step of the wizard.
  2. Click on the form in the builder.
  3. Click edit styles.
  4. Click Submit Button.
  5. From here you can choose to hide the submit button text, change the submit button text size and color, edit the margins on the submit button to move it left or right, and choose an image to replace the submit button.
  6. When finished, click Update and then click Confirm & Save to save your landing page.
Note: The image chosen will render with the dimensions of the original content file. To change the size of the submit button image, edit the original content file to use a new size. The video below walks through changing the Submit Button settings. Click here to expand the video.

More Form Styling Resources

Default Form Style Classes Reference 
Removing Form Autofocus
Advanced Form Field Option: CSS Classes

Need more? Start a conversation with other Pardot users in our Success Community