All Collections
Settings
Using form themes to style and brand your embedded contact forms
Using form themes to style and brand your embedded contact forms

How to change the color, alignment, font, border size and more of your embedded contact forms.

Bryan Caporicci avatar
Written by Bryan Caporicci
Updated over a week ago

Note: This feature is only available on the Pro and Studio plans

There are two ways to get a contact form on your website: 

  1. Link directly to the contact form from your website.

  2. Embed the contact form on your website. 

To link directly to your contact form from your website, simply get the URL for the contact form by clicking the "View" button in the kebab menu to the right of the contact form on Settings > Communication > Contact Forms. Copy the URL and link to that URL from any button on your website. 

How to embed your contact form on your website

  • Embedding the <script> tag (recommended). 

  • Embedding the <iframe> tag. 

  • Adding the static code to your website.

To get the code to embed your contact form on your website, go to Settings > Communications > Contact Forms and click the "Embed Code" button in the kebab menu to the right of the contact form. Choose one of the three options above, and copy and paste that code onto your website. 

When you embed the contact form onto your site, it will be placed on that page on your website, so when visitors visit that page, they'll see the Sprout Studio contact form. 

How to customize the style and branding of your embedded contact forms

When embedding a contact form on your website, the contact form will be styled using the contact form theme you've chosen for that contact form. To customize your contact form themes, go to Settings > Branding > Form Themes

Note: This is unavailable on the Lite or Basic plans

For each form theme, you can customize the styling on the entire contact form with the following settings: 

  • Alignment - Whether you'd like all the fields, titles and buttons on your contact form to be left-aligned, center-aligned or right-aligned. 

  • Background Color - The color of the background of your contact form. 

  • Border Color - The color of the border for your contact form. 

  • Border Radius - Whether you'd like the border for your contact form to have a smooth corner (and how smooth) or a hard corner. 

  • Border Size - How thick the border on your contact form is. 

  • Font Family - The font used for your fields, titles and buttons on your contact form. 

You can also customize the individual elements within your contact form - the titles, the answers, the error messages and the buttons. Here are the settings you can customize for your contact forms: 

  • For the titles, which are the question for each field, you can customize the font color and font size. 

  • For the answers, which are the text fields for your contact form, you can customize the border radius and the font size. 

  • For the error messages, which show up when you have a required field that isn't filled out, you can customize the background color, the font color and the font size. 

  • For the buttons, which is the submit button as well as radio buttons and checkboxes, you can customize the background color, the border-radius, the font color and the font size. 

The form theme editor is what you see is what you get (WYSIWYG) editor, so you can edit the settings (above) and see the changes on the sample contact form within the form theme editor. 

For advanced users, you can also edit and add custom CSS to a form theme if you need even more control over how the contact form appears on your website. 

Did this answer your question?