Creating a Contact Form with Formbricks: A Step-by-Step Guide

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:

1. A welcoming introduction.
2. Fields for collecting the user's name and email.
3. A question to find out why they’re contacting you.
4. A message field for users to share their queries.

Setting Up Your Form

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

1. Head to the Surveys page and click on New Survey.
2. Select Start from Scratch to create a new form.
3. In the form editor, click the three dots next to a question, then select Change Question Type and choose Statement (Call to Action).

4. Add a welcoming statement to greet your users and explain the form's purpose.
5. Personalize the greeting to make it inviting and encourage engagement.

Adding the Name Field

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

1. Click Add Question.
2. Enter the prompts for the name field.
3. Turn off the Long Answer option at the bottom right.
4. 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:

1. Click Add Question again.
2. Select Email as the input type.
3. Enter a prompt for the email field.

Adding a Reason for Contact

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

1. Click Add Question once again.
2. Select Change Question Type and choose Single Select.
3. Add the question "Why are you contacting us today?"

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

Adding a Message Field

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

1. Click Add Question for the last time.
2. Add the question: "Your Message."
3. Set the placeholder text to something like "Please write your message here."

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

Finalizing Your Form

Once your form is complete, follow these final steps:

1. Review and rearrange the questions if necessary.
2. Test the form by filling it out as a user.
3. Customize the Thank You message for submissions.
4. Publish the form to get a shareable link.
5. 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:

1. Copy the Shareable Link

   • Find your form in the Formbricks dashboard, and click Share.
   • Select Embed in a Web Page.
   

2. Embed the Code

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

3. 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!