How to make a website contact form

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).

Screenshot showing how to create a new typeform

2. Now give your typeform a name and let us know what you’re creating it for.

Screenshot showing how to name a typeform

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 block 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.

Screenshot showing how to create a welcome screen

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.

Screenshot showing how to add an image to a welcome screen

5. Next, we’ll ask for our respondent’s name. Click on or drag a Short text block 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.

Screenshot showing a short text block

6. If the person’s name is important for you, make this question ‘Required‘ using the option in the Block settings menu.

Screenshot showing how to make a block required

7. Now select the Email block 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.

Screenshot showing how to pipe a person's name into an email block

8. You can capture the reason why someone is getting in touch using a Multiple Choice block.

Screenshot showing how to make a multiple choice block

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 blocks 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 block).

Screenshot showing how to set up a self notification

10. Lastly, we give respondents space to write their message to us. Add a Long text block, again, with a description. We asked respondents to keep it short, but you could add a character limit if you want to be sure.

Screenshot showing a long text block

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.

Screenshot showing how to customize a theme

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.

Screenshot showing how to embed the typeform

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.