How to make a website contact form

Typeforms are an easy way to make a great-looking custom contact form for your website. It’s a simple and secure way to allow your users, readers, or customers to contact you. Collect contact details, comments, and opinions with a minimum of effort.

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 Create a new typeform, and then Start from scratch.

2. 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. It’s a good idea to upload a nice image here, and write a message welcoming people to leave a comment. Think about the tone of your writing, as it should fit the context where people will use the contact form. We’re going for light and friendly.

3. Drag the Welcome screen button on the left panel, into the space on the right. Alternatively, simply click on the Welcome screen button and it will be added right away. Toggle Image/Video to upload the image or video of your choice. Find out more about image sizes here.Welcome screen4. In the Text field, write your welcome message. If you want to add a description, as we have, toggle the Description button and add more text. It will appear as smaller text under your main message. You can also edit the text on the Start button. Use your imagination!

5. Next, we’ll ask for our respondent’s name. Drag a Short text question onto your board. It will open for editing, so add your question in the question box. We’ve added a description – they’re useful for giving additional instructions or encouragement. Short text6. If respondent name is important for you, make this question “Required”.

7. We want to make our contact form feel personal. We pipe the answer to the name question through to this Email question.Email question8. To do this, write your question. But where you would write a name, instead click Add variable. In a drop down menu you’ll see a list of your form questions. Choose your name question, and respondents will see their name magically appear in the email question!

Add variables to your question9. The next question is a Multiple choice. 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:

Go to the Configure tab and click on Self notifications. In the Subject field, you can edit it to include any Variable from your typeform responses, so we have chosen to add the variable from the multiple choice question. Adding variables is always the same: simply choose a question from the drop-down Add variable menu.Set up notifications10. 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:Let users leave a comment! Now that your contact form is built, you can test it out. We recommend spending time in the Design tab to choose colors and fonts that fit with your company or website.

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.

You can integrate your typeform with services like Mailchimp, Zendesk and Bootstrap, using Zapier, so your database of contacts is automatically updated. Find out how to do that here.

Was this article helpful?