Typeforms can help you create a great-looking contact form for your website. It’s a simple way to allow your users, readers, or customers to contact you. You can collect contact details, comments, and opinions with a minimum of effort.
This tutorial explains how to create a personalized contact form with Typeform. If you prefer to get started straight away with an out-of-the-box form, simply download our free Contact Form template, here.
For this contact form, we’re going to ask for name, email address, and leave space for a message from the respondent.
1. Open your Workspace, click the New typeform button, and then Start from scratch (select the Contact Form template if you want to use our prebuilt typeform).
2. Now give your typeform a name and let us know what you’re creating it for.
3. For our contact form, we’ll start with a Welcome screen. This is the first thing people will see, whether the typeform is embedded in your site or reached via a direct link. Click the Welcome Screen question and write some text to encourage people to leave a comment. Here, we’re going for light and friendly. You can add more context by flicking on the ‘Description‘ button and typing a summary.
4. You can add an image to your Welcome Screen by clicking ‘Add’ from the ‘Image‘ section. We’ve gone for a simple animated GIF.
5. Next, we’ll ask for our respondent’s name. Click on or drag a Short text question into the editor and add your question text. Again, we’ve added a description and an animated GIF here to make things a bit friendlier.
6. If the person’s name is important for you, make this question ‘Required‘ using the option in the question settings menu.
7. Now select the Email question so we can capture the contact details. We want to make our contact form feel personal. We can pipe the person’s name into the question to add a personal touch. Do this by clicking on the ‘Add‘ button next to the Variables option.
8. You can capture the reason why someone is getting in touch using a Multiple Choice question.
9. We’ll put this answer in a Self notification email as the subject, so we can easily see what the respondent is asking. We’ve given respondents four subject choices.
Click the notifications icon and switch on ‘Self notifications’ using the button. You can add a Variable to the Subject line from any of your questions by clicking the ‘+’ button or typing ‘@’. Just choose which answer you want to add from the drop-down list (in this case, from the Multiple Choice question).
10. Lastly, we give respondents space to write their message to us. Add a Long text question, again, with a description. We asked respondents to keep it short, but you could add a character limit if you want to be sure.
11. Now that your contact form is built, you can test it out. We recommend spending time customizing the theme to choose colors and fonts that fit with your company or website.
12. It’s easy to embed typeforms wherever you want. Go to the Share tab, and read this article for more details. We also have a plugin that makes it even easier if you’re a WordPress user, which you can read about here.
What to do with the contacts you collect
You can integrate your typeform with your company’s lead generation software, CRM, or support solution. This lets you add new contacts to your database automatically. For example, you can connect the typeform to HubSpot or MailChimp using our native integrations, or to Zendesk via a Zapier integration.
{[{article.replace}]}
{[{video.duration}]}