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

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

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

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.

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?”

Predefined options help categorize inquiries, making it easier for you to respond appropriately.

  • Add options like “General Inquiry,” “Support,” and “Feedback.”

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

  • 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

  • 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!