Note: This feature is only available on the Pro and Studio plans
There are two ways to get a contact form on your website:
- Link directly to the contact form from your website.
- Embed the contact form on your website.
How to link directly to your contact form from your website
To link directly to your contact form from your website, simply get the URL for the contact form by clicking the "View Live" button underneath 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 underneath your 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 onto 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 > Business & 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 form 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 that is 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 a 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 on how the contact form shows up on your website.