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)
  • Add a welcoming statement to greet your users and explain the form’s purpose.
  • Personalize the greeting to make it inviting and encourage engagement.
A warm welcome sets the tone for your form. Make it friendly to encourage users to participate.

​
Adding the Name Field

Next, let’s capture the user’s name:
  • Click Add Question.
Adding a question in Formbricks
  • 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

​
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

​
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
Predefined options help categorize inquiries, making it easier for you to respond appropriately.
  • Add options like “General Inquiry,” “Support,” and “Feedback.”
Single Select question configuration

​
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
  • 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
  • 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: 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.
  • 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!