All Collections
Settings
Creating and embedding a contact form
Creating and embedding a contact form

How to create, edit, customize, link to and embed a contact form to automatically create new leads.

Justin Morabito avatar
Written by Justin Morabito
Updated over a week ago

Note: The Lite and Basic plans come with 1 Contact Form.

A Contact Form is an online form that you can link to or embed on your website and that when filled out, will create a new lead in Sprout Studio.

You can create as many contact forms as you want, and each one can be customized to capture specific information. Any number of the following fields can be included in a contact form:

  • Text Field, which is a single-line text field for collecting basic responses and information such as "Where are you getting married?"

  • Paragraph Text, which is a multi-line text field for collecting more detailed responses and information, such as "What is most important to you about your wedding photography?"

  • Date, which is a date-picker for collecting a date such as "What is the wedding date?"

  • Radio Button, which is a multiple-choice question that allows only one answer. This is great for collecting an answer to an either-or question, such as "Are you getting married outdoors, yes or no?"

  • Checkbox, which is a multiple-choice question that allows multiple answers. This is great for collecting an answer to a "select all that apply" type question, such as "What are you looking for out of your wedding photography?"

  • Dropdown List, which is similar to a radio button in that it is a multiple-choice question with one answer, except it lists all the answers in a dropdown instead of showing them all on the page.

  • Instructions, which is a text field you can use to leave directions for anyone filling out the contact form, such as "Please answer every question to the best of your ability".

In addition to the above standard questionnaire fields, contact forms allow you to add special fields, too:

  • First name, which is assigned to the primary client for the lead.

  • Last name, which is assigned to the primary client for the lead.

  • Email address, which is assigned to the primary client for the lead.

  • Phone number, which is assigned to the primary client for the lead.

  • Event type dropdown, which is assigned as the initial shoot type for the lead.

  • Event date date-picker, which is assigned as the initial shoot date for the lead or left as TBD.

  • How did you hear about us dropdown, which is assigned to the lead source for the lead

All of the answers to the questions on your contact form are added to a note within the lead when the lead is created.

How to create a contact form

To create a new contact form, go to Settings > Communication > Contact Forms and click the "New Contact Form" button. By default, a contact form starts off with the 7 special fields listed above.

Specifying settings for your contact form

You can customize the following settings for a contact form:

  • Title, which is the text that is displayed at the top of the contact form.

  • Instructions, which is the description text that is displayed at the top of the contact form.

  • Submit button text, which is the text that is displayed on the "submit" button at the bottom of the contact form, such as "Get in Touch".

  • Message or Redirect, which is what happens after visitors submit the contact form (either display a message or redirect them to a different URL).

You can customize these settings for a contact form while editing the contact form by clicking the sections on the left sidebar.

How to embed a contact form on your website

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.

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.

Note: Linking to your contact form from your website means that visitors to your website will be redirected to the contact form once they click the link. Please ensure that you have http:// infront of the URL.

How to embed your contact form on your website

There are three ways you can embed your contact form on your website:

  1. Embedding the <script> tag (recommended).

  2. Embedding the <iframe> tag.

  3. 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 options on your Contact Form. Choose one of the three embed code 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.

When embedding a contact form, 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.

Did this answer your question?