---
title: "Contact form"
icon: "address-book"
description: "A step-by-step guide to creating a contact form using Formbricks."
---

Welcome to this comprehensive guide on creating a contact form using Formbricks. Whether you're just starting out or you're a seasoned developer, this tutorial will walk you through every step of building an engaging and effective contact form.

## What We’ll Build

By the end of this tutorial, you'll have created a simple contact form featuring:

- A welcoming introduction.

- Fields for collecting the user's name and email.

- A question to find out why they’re contacting you.

- A message field for users to share their queries.

### Setting Up Your Form

First, let's lay the groundwork for your form:

- Head to the Surveys page and click on **New Survey**.

- Select **Start from Scratch** to create a new form.

- In the form editor, click the three dots next to a question, then select **Change Question Type** and choose **Statement (Call to Action)**.

![Toggle button for Statement (Call to Action)](/images/xm-and-surveys/xm/best-practices/contact-form/welcome1.webp)

- Add a welcoming statement to greet your users and explain the form's purpose.

- Personalize the greeting to make it inviting and encourage engagement.

<Note>
  A warm welcome sets the tone for your form. Make it friendly to encourage
  users to participate.
</Note>

### Adding the Name Field

Next, let's capture the user's name:

- Click **Add Question**.

![Adding a question in Formbricks](/images/xm-and-surveys/xm/best-practices/contact-form/add-question.webp)

- Enter the prompts for the name field.

- Turn off the **Long Answer** option at the bottom right.

- Adjust any **settings**, such as making the field required.

![Name field configuration](/images/xm-and-surveys/xm/best-practices/contact-form/name-field.webp)

### Adding the Email Field

Now, let’s add a field to collect the user's email address:

- Click **Add Question** again.

- Select Email as the input type.

- Enter a prompt for the email field.

![Email field configuration](/images/xm-and-surveys/xm/best-practices/contact-form/email-field.webp)

### Adding a Reason for Contact

Let’s now understand why the user is contacting you:

- Click **Add Question** once again.

- Select **Change Question** Type and choose **Single Select**.

- Add the question "Why are you contacting us today?"

![Single Select question configuration](/images/xm-and-surveys/xm/best-practices/contact-form/single-select-questionare.webp)

<Note>
  Predefined options help categorize inquiries, making it easier for you to
  respond appropriately.
</Note>

- Add options like "General Inquiry," "Support," and "Feedback."

![Single Select question configuration](/images/xm-and-surveys/xm/best-practices/contact-form/query-form.webp)

### Adding a Message Field

Finally, let’s provide a space for the user’s message:

- Click **Add Question** for the last time.

- Add the question: "Your Message."

- Set the placeholder text to something like "Please write your message here."

![Message field configuration](/images/xm-and-surveys/xm/best-practices/contact-form/message-field.webp)

- Consider setting a minimum character count to ensure detailed messages.

### Finalizing Your Form

Once your form is complete, follow these final steps:

- Review and rearrange the questions if necessary.

- Test the form by filling it out as a user.

- Customize the **Thank You** message for submissions.

- Publish the form to get a shareable link.

- Enable submission notifications:

   * Go to your Formbricks account settings.

   * Verify your email address.

   * Ensure that **Survey** notifications are enabled.

### Integrating the Contact Form into Your Website

After publishing the form, follow these steps to integrate it into your site:

- **Copy the Shareable Link**
   
![Embed Image configuration](/images/xm-and-surveys/xm/best-practices/contact-form/embed.webp)

   * Find your form in the Formbricks dashboard, and click Share.

   * Select Embed in a Web Page.

- **Embed the Code**

   * Copy the provided code and paste it into your website where you want the form to appear.

<Note>
  Note: There is an options toggle button called "Embed Mode." When enabled, it
  updates the `src` to `"?embed=true"` and displays your survey in a minimalist
  design, removing padding and background for a cleaner look.
</Note>

- **Test the Integration**

   * Check if the form displays correctly on your site.

   * Submit a test entry to ensure everything works and notifications are received.

## Conclusion

Congratulations! You’ve successfully created and integrated a professional contact form using Formbricks. This form will help you collect valuable information from your visitors in an efficient, user-friendly way.

A great contact form strikes the balance between collecting necessary details and being simple enough to encourage submissions. **You’ve achieved just that!**