docs: added contact form article#3558
docs: added contact form article#3558jobenjada merged 4 commits intoformbricks:mainfrom Aditya-PS-05:writing/add-contact-form
Conversation
WalkthroughThe changes introduce a new guide for creating a contact form using Formbricks, detailed in a new Markdown file Changes
Assessment against linked issues
Possibly related PRs
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
hacktoberfest
|
@Aditya-PS-05 is attempting to deploy a commit to the formbricks Team on Vercel. A member of the Team first needs to authorize it. |
|
Thank you for following the naming conventions for pull request titles! 🙏 |
![coderabbitai[bot]](proxy.php?url=https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (3)
apps/docs/app/link-surveys/contact-form/page.mdx (3)
16-28: LGTM: Clear introduction and feature list.The introduction effectively sets the context for the guide, and the "What We'll Build" section provides a concise list of features. This helps users understand what to expect from the tutorial.
Consider adding a brief mention of the expected time to complete this tutorial or the skill level required. This could help set user expectations.
89-131: LGTM: Comprehensive instructions for contact reason and message fields.Steps 4-5 provide clear guidance on adding the reason for contact (single-select) and message fields. The instructions are easy to follow, and the included images enhance understanding.
In Step 4, consider providing examples of common reasons for contact to help users customize their form effectively. For example:
4. Add relevant options such as "General Inquiry", "Support", "Feedback", "Partnership Opportunities", "Press Inquiry", etc. Tailor these options to your specific use case.This addition would provide more value to users who might be unsure about what options to include.
1-144: Excellent guide that meets PR objectives.This comprehensive guide on creating a contact form using Formbricks aligns perfectly with the PR objectives. It provides clear, step-by-step instructions with helpful visuals, making it accessible for both beginners and experienced users. The content covers all aspects of form creation, from setup to finalization, and includes valuable tips for creating an effective contact form.
The guide successfully addresses the requirements outlined in issue #3200, providing detailed instructions on integrating a contact form into a website and guidance on receiving notifications. The inclusion of screenshots enhances the quality of the technical article, as requested in the issue.
To further enhance the guide and align it even more closely with the PR objectives:
- Consider adding a section on how to embed the created form into a website. This would fully address the "add a contact form to any website" part of the objective.
- Expand on the notification process, explaining in detail how users can customize their notification preferences to ensure they receive form submissions.
- If possible, include information on any data privacy considerations or GDPR compliance aspects of using Formbricks for contact forms.
These additions would make the guide even more comprehensive and valuable to users.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- apps/docs/app/link-surveys/contact-form/page.mdx (1 hunks)
- apps/docs/lib/navigation.ts (1 hunks)
🧰 Additional context used
🔇 Additional comments (3)
apps/docs/app/link-surveys/contact-form/page.mdx (2)
1-14: LGTM: Imports and metadata are well-structured.The imports for the MdxImage component and various images are appropriate for the content. The metadata export provides a clear title and description for the guide, which is good for SEO and user understanding.
142-144: LGTM: Positive and informative conclusion.The conclusion effectively wraps up the guide with a congratulatory note and a valuable tip about balancing detail and simplicity in form design. This reinforces the key principles of good form creation.
apps/docs/lib/navigation.ts (1)
33-33: LGTM! The new navigation link is correctly placed and formatted.The addition of the "Contact Form" link under the "Features" section of "Link Surveys" is appropriate and follows the existing structure and naming conventions. This change aligns well with the PR objective of creating an article on how to add a contact form to any website.
To ensure the new page exists and is properly linked, run the following script:
✅ Verification successful
Verified! The
contact-form.mdxpage exists, and the "Contact Form" link is correctly added toapps/docs/lib/navigation.tsat line 33. All changes align with the PR objectives and maintain the existing structure and conventions.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the existence of the contact form page and its correct linking in the navigation. # Test 1: Check if the contact form page file exists fd -t f "contact-form.mdx" apps/docs # Test 2: Verify the correct linking in the navigation file grep -n "Contact Form" apps/docs/lib/navigation.ts grep -n "/link-surveys/contact-form" apps/docs/lib/navigation.ts # Expected results: # - Test 1 should return the path to the contact form page file # - Test 2 should show two matching lines (title and href) in the navigation fileLength of output: 306
| ### Finalizing Your Form | ||
|
|
||
| Once you've added all the elements, your contact form is almost ready. Follow these final steps: | ||
|
|
||
| 1. Review and rearrange the questions if needed. | ||
| 2. Test the form by going through it as a user. | ||
| 3. Customize the "Thank You" message for form submissions. | ||
| 4. Publish the form to get a shareable link that you can use across platforms. | ||
| 5. You'll be notified each time a user submits the form. | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
LGTM: Comprehensive finalization steps.
The "Finalizing Your Form" section provides a good overview of the final steps needed to complete and publish the contact form. It covers important aspects like review, testing, and customization.
Consider adding more detail about the notification process. For example:
5. You'll be notified each time a user submits the form. To ensure you receive these notifications:
- Go to your Formbricks account settings
- Verify your email address is correct
- Check the notification preferences to ensure "Form Submission" notifications are enabledThis addition would help users set up their notification preferences correctly and ensure they don't miss any form submissions.
| ### Step 1: Setting Up Your Form | ||
|
|
||
| To begin, let's create the structure for your form: | ||
|
|
||
| 1. Head to the Surveys page and click on "New Survey." | ||
| 2. Select "Start from Scratch" to begin 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). | ||
|
|
||
| <MdxImage | ||
| src={ToggleButton} | ||
| alt="Toggle button for Statement (Call to Action)" | ||
| quality="100" | ||
| className="max-w-full rounded-lg sm:max-w-3xl" | ||
| /> | ||
|
|
||
| 4. This will let you add a welcoming statement that greets the user and briefly explains the form’s purpose. | ||
| 5. Personalize the greeting to make it inviting and encourage users to start. | ||
|
|
||
| <Note> | ||
| The welcome sets the tone for your form. Make it friendly and inviting to encourage users to engage with | ||
| your form. | ||
| </Note> | ||
|
|
||
| ### Step 2: Adding the Name Field | ||
|
|
||
| Next, let’s add a field to capture the user’s name: | ||
|
|
||
| 1. Click the Add Question button. | ||
| <MdxImage | ||
| src={AddQuestion} | ||
| alt="Adding a question in Formbricks" | ||
| quality="100" | ||
| className="max-w-full rounded-lg sm:max-w-3xl" | ||
| /> | ||
| 2. Fills the prompts. | ||
| 3. In the right-bottom, off the long-answer button. | ||
| 4. Configure any additional settings for this field, such as making it required. | ||
|
|
||
| <MdxImage | ||
| src={NameField} | ||
| alt="Name field configuration" | ||
| quality="100" | ||
| className="max-w-full rounded-lg sm:max-w-3xl" | ||
| /> | ||
|
|
||
| ### Step 3: Adding the Email Field | ||
|
|
||
| Next, we'll add a field to collect the user's email address. | ||
|
|
||
| 1. Click "Add Question" again. | ||
| 2. This time, choose "Email" as the input type. | ||
| 3. Enter your text to ask for the user email in your way. | ||
|
|
||
| <MdxImage | ||
| src={EmailField} | ||
| alt="Email field configuration" | ||
| quality="100" | ||
| className="max-w-full rounded-lg sm:max-w-3xl" | ||
| /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
LGTM: Clear instructions with helpful visuals.
Steps 1-3 provide clear, step-by-step instructions for setting up the form and adding name and email fields. The inclusion of relevant images enhances the user's understanding of the process.
Consider adding alt text to the MdxImage components that describe the specific content or purpose of each image, rather than just repeating the image filename. This would improve accessibility for users relying on screen readers. For example:
<MdxImage
src={NameField}
- alt="Name field configuration"
+ alt="Screenshot showing the configuration options for the Name field in Formbricks"
quality="100"
className="max-w-full rounded-lg sm:max-w-3xl"
/>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ### Step 1: Setting Up Your Form | |
| To begin, let's create the structure for your form: | |
| 1. Head to the Surveys page and click on "New Survey." | |
| 2. Select "Start from Scratch" to begin 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). | |
| <MdxImage | |
| src={ToggleButton} | |
| alt="Toggle button for Statement (Call to Action)" | |
| quality="100" | |
| className="max-w-full rounded-lg sm:max-w-3xl" | |
| /> | |
| 4. This will let you add a welcoming statement that greets the user and briefly explains the form’s purpose. | |
| 5. Personalize the greeting to make it inviting and encourage users to start. | |
| <Note> | |
| The welcome sets the tone for your form. Make it friendly and inviting to encourage users to engage with | |
| your form. | |
| </Note> | |
| ### Step 2: Adding the Name Field | |
| Next, let’s add a field to capture the user’s name: | |
| 1. Click the Add Question button. | |
| <MdxImage | |
| src={AddQuestion} | |
| alt="Adding a question in Formbricks" | |
| quality="100" | |
| className="max-w-full rounded-lg sm:max-w-3xl" | |
| /> | |
| 2. Fills the prompts. | |
| 3. In the right-bottom, off the long-answer button. | |
| 4. Configure any additional settings for this field, such as making it required. | |
| <MdxImage | |
| src={NameField} | |
| alt="Name field configuration" | |
| quality="100" | |
| className="max-w-full rounded-lg sm:max-w-3xl" | |
| /> | |
| ### Step 3: Adding the Email Field | |
| Next, we'll add a field to collect the user's email address. | |
| 1. Click "Add Question" again. | |
| 2. This time, choose "Email" as the input type. | |
| 3. Enter your text to ask for the user email in your way. | |
| <MdxImage | |
| src={EmailField} | |
| alt="Email field configuration" | |
| quality="100" | |
| className="max-w-full rounded-lg sm:max-w-3xl" | |
| /> | |
| ### Step 1: Setting Up Your Form | |
| To begin, let's create the structure for your form: | |
| 1. Head to the Surveys page and click on "New Survey." | |
| 2. Select "Start from Scratch" to begin 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). | |
| <MdxImage | |
| src={ToggleButton} | |
| alt="Toggle button for Statement (Call to Action)" | |
| quality="100" | |
| className="max-w-full rounded-lg sm:max-w-3xl" | |
| /> | |
| 4. This will let you add a welcoming statement that greets the user and briefly explains the form's purpose. | |
| 5. Personalize the greeting to make it inviting and encourage users to start. | |
| <Note> | |
| The welcome sets the tone for your form. Make it friendly and inviting to encourage users to engage with | |
| your form. | |
| </Note> | |
| ### Step 2: Adding the Name Field | |
| Next, let's add a field to capture the user's name: | |
| 1. Click the Add Question button. | |
| <MdxImage | |
| src={AddQuestion} | |
| alt="Adding a question in Formbricks" | |
| quality="100" | |
| className="max-w-full rounded-lg sm:max-w-3xl" | |
| /> | |
| 2. Fills the prompts. | |
| 3. In the right-bottom, off the long-answer button. | |
| 4. Configure any additional settings for this field, such as making it required. | |
| <MdxImage | |
| src={NameField} | |
| alt="Screenshot showing the configuration options for the Name field in Formbricks" | |
| quality="100" | |
| className="max-w-full rounded-lg sm:max-w-3xl" | |
| /> | |
| ### Step 3: Adding the Email Field | |
| Next, we'll add a field to collect the user's email address. | |
| 1. Click "Add Question" again. | |
| 2. This time, choose "Email" as the input type. | |
| 3. Enter your text to ask for the user email in your way. | |
| <MdxImage | |
| src={EmailField} | |
| alt="Email field configuration" | |
| quality="100" | |
| className="max-w-full rounded-lg sm:max-w-3xl" | |
| /> |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
apps/docs/app/link-surveys/contact-form/page.mdx (2)
30-88: LGTM: Clear instructions with helpful visuals.The steps for setting up the form and adding name and email fields are well-explained and supported by relevant images. The note about the welcome message adds valuable context.
There's a minor grammatical issue to address:
In the email field section, step 3 should be rephrased for clarity. Consider changing:
- 3. Enter your text to ask for the user email in your way. + 3. Enter your text to ask for the user's email address in your preferred way.This change improves the grammar and clarity of the instruction.
146-171: LGTM: Comprehensive instructions for form integration.The "Integrating the Contact Form into Website" section provides clear and detailed steps for embedding the form on a website. The inclusion of an image to illustrate the embed process is helpful.
There's a minor grammatical issue to address:
In the last sentence of the section, there's a preposition error. Consider changing:
- Congratulations! You've successfully created a comprehensive contact form with Formbricks and integrated in the website. + Congratulations! You've successfully created a comprehensive contact form with Formbricks and integrated it into the website.This change corrects the grammar and improves the clarity of the sentence.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
apps/docs/app/link-surveys/contact-form/images/embed.pngis excluded by!**/*.png
📒 Files selected for processing (1)
- apps/docs/app/link-surveys/contact-form/page.mdx (1 hunks)
🧰 Additional context used
🪛 LanguageTool
apps/docs/app/link-surveys/contact-form/page.mdx
[grammar] ~173-~173: The usual collocation for technology is “on”, not “in”.
Context: ...act form with Formbricks and integrated in the website. This form will help you gather valuabl...(IN_THE_INTERNET)
🔇 Additional comments (6)
apps/docs/app/link-surveys/contact-form/page.mdx (6)
1-15: LGTM: Imports and metadata are well-structured.The import statements and metadata export are correctly implemented. The title and description in the metadata provide a clear overview of the guide's content.
17-29: LGTM: Clear introduction and feature overview.The introduction effectively sets the context for the guide, and the "What We'll Build" section provides a concise list of features to be implemented in the contact form.
90-132: LGTM: Well-structured instructions for contact reason and message fields.The steps for adding the reason for contact (single-select question) and message field are clearly explained and supported by relevant images. The note about predefined options adds valuable context for users.
133-145: LGTM: Comprehensive finalization steps with improved notification instructions.The "Finalizing Your Form" section provides clear steps for reviewing, testing, and publishing the form. The added instructions for setting up notifications address the previous feedback effectively, ensuring users understand how to receive form submissions.
172-175: LGTM: Effective conclusion with valuable tip.The conclusion successfully wraps up the guide and provides a useful tip about balancing detail and simplicity in contact forms. This final advice adds value to the overall guide.
🧰 Tools
🪛 LanguageTool
[grammar] ~173-~173: The usual collocation for technology is “on”, not “in”.
Context: ...act form with Formbricks and integrated in the website. This form will help you gather valuabl...(IN_THE_INTERNET)
1-175: Excellent guide that meets PR objectives.This comprehensive guide for creating a contact form using Formbricks effectively addresses the objectives outlined in the PR summary and linked issue #3200. The article provides detailed instructions, clear visual aids, and valuable tips throughout, making it accessible for both beginners and experienced users.
Key strengths of the guide:
- Step-by-step instructions with supporting images
- Coverage of form creation, finalization, and website integration
- Helpful notes and tips to enhance user understanding
- Clear explanation of features and their benefits
The guide successfully delivers on the requirement for a high-quality technical article with good instructions and visual aids. It provides a thorough walkthrough of adding a contact form to any website and setting up notifications, as requested in the linked issue.
To ensure the guide's completeness, please run the following script to check for any missing critical keywords or concepts:
This script will help verify that all critical concepts are covered and that each step has supporting visuals, ensuring the guide meets the high-quality standards requested in the linked issue.
🧰 Tools
🪛 LanguageTool
[grammar] ~173-~173: The usual collocation for technology is “on”, not “in”.
Context: ...act form with Formbricks and integrated in the website. This form will help you gather valuabl...(IN_THE_INTERNET)
|
The /assign command can only be used on issues, not on pull requests. |
|
/assign |
|
The /assign command can only be used on issues, not on pull requests. |
|
hey! pls move this to the Best Practices section |
jobenjada
left a comment
jobenjada
left a comment
There was a problem hiding this comment.
pls move to Best Practices and run through GPT to avoid typos - thanks! :)
|
@jobenjada , |
|
The /assign command can only be used on issues, not on pull requests. |
|
/assign |
|
The /assign command can only be used on issues, not on pull requests. |
The changes done and the format of the article is also made like it's described. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
apps/docs/app/link-surveys/contact-form/page.mdx (2)
51-113: LGTM: Clear instructions for adding various field types.The sections for adding name, email, and reason for contact fields provide clear and consistent instructions. The use of images effectively supports the text, enhancing user understanding.
Minor grammatical correction needed.
On line 94, there's a missing comma after "Select" in the sentence "Select Change Question Type and choose Single Select."
Consider adding a comma for better readability:
-2. Select **Change Question** Type and choose **Single Select**. +2. Select **Change Question** Type, and choose **Single Select**.🧰 Tools
🪛 LanguageTool
[uncategorized] ~94-~94: Possible missing comma found.
Context: ...nd choose Single Select. 3. Add the question "Why are you contacting us today?" <Md...(AI_HYDRA_LEO_MISSING_COMMA)
166-176: LGTM: Effective conclusion with call to action and references.The Conclusion effectively summarizes the tutorial's achievements, while the Call to Action encourages community engagement. The References section provides valuable additional resources.
Consider expanding the References section.
To provide even more value to readers, consider adding more specific references related to contact form best practices or Formbricks documentation. For example:
## References - Formbricks Documentation: [https://formbricks.com/docs](https://formbricks.com/docs) - Formbricks Contact Form Guide: [https://formbricks.com/docs/contact-form-guide](https://formbricks.com/docs/contact-form-guide) - Best Practices for Web Forms: [https://www.nngroup.com/articles/web-form-design/](https://www.nngroup.com/articles/web-form-design/) - Contact Form Accessibility Guidelines: [https://www.w3.org/WAI/tutorials/forms/](https://www.w3.org/WAI/tutorials/forms/)These additional references would provide readers with more resources for deepening their understanding of contact forms and Formbricks.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- apps/docs/app/link-surveys/contact-form/page.mdx (1 hunks)
🧰 Additional context used
🪛 LanguageTool
apps/docs/app/link-surveys/contact-form/page.mdx
[uncategorized] ~94-~94: Possible missing comma found.
Context: ...nd choose Single Select. 3. Add the question "Why are you contacting us today?" <Md...(AI_HYDRA_LEO_MISSING_COMMA)
🔇 Additional comments (5)
apps/docs/app/link-surveys/contact-form/page.mdx (5)
1-15: LGTM: Imports and metadata are well-structured.The imports are correctly set up, and the metadata provides a clear title and description for the page. This section sets a good foundation for the tutorial.
17-28: LGTM: Clear introduction and well-defined objectives.The introduction effectively sets the context for the tutorial, and the "What We'll Build" section provides a clear outline of the contact form's features. This helps users understand what to expect from the guide.
29-49: LGTM: Comprehensive setup instructions with visual aid.The "Setting Up Your Form" section provides clear, step-by-step instructions enhanced by a relevant image. The use of the Note component effectively emphasizes the importance of a welcoming statement.
114-143: LGTM: Comprehensive instructions for message field and form finalization.The "Adding a Message Field" section provides clear instructions with a helpful image and a valuable tip about setting a minimum character count. The "Finalizing Your Form" section offers a comprehensive checklist for completing and publishing the form, including important steps like testing and enabling submission notifications.
144-165: LGTM: Clear instructions for form integration.The "Integrating the Contact Form into Your Website" section provides comprehensive steps for embedding the form, including copying the shareable link, embedding the code, and testing the integration. The inclusion of an image effectively illustrates the embed process, enhancing user understanding.
jobenjada
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
apps/docs/app/best-practices/contact-form/page.mdx (3)
132-143: LGTM: Comprehensive form finalization steps. Consider adding a note on data handling.The steps for finalizing the form are clear and cover important aspects such as testing, customizing the thank you message, and enabling notifications.
Consider adding a brief note about data handling or GDPR compliance, as this is crucial when collecting user information through contact forms.
144-164: LGTM: Clear instructions for form integration. Consider adding a note on styling.The steps for integrating the form into a website are clear and comprehensive, covering copying the shareable link, embedding the code, and testing the integration.
Consider adding a brief note about potential styling adjustments that might be needed to ensure the embedded form matches the website's design.
1-169: Excellent guide on creating a contact form with Formbricks.This comprehensive guide effectively walks users through the process of creating and integrating a contact form using Formbricks. The content is well-structured, clear, and enhanced with helpful visual aids. It successfully achieves the objective outlined in the PR and linked issue.
To further improve this excellent guide, consider:
- Adding a brief note about data handling or GDPR compliance in the form finalization section.
- Including a mention about potential styling adjustments that might be needed when integrating the form into a website.
These additions would provide users with a more complete understanding of the considerations involved in implementing a contact form.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
apps/docs/app/best-practices/contact-form/images/embed.pngis excluded by!**/*.png
📒 Files selected for processing (2)
- apps/docs/app/best-practices/contact-form/page.mdx (1 hunks)
- apps/docs/lib/navigation.ts (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/docs/lib/navigation.ts
🧰 Additional context used
🔇 Additional comments (5)
apps/docs/app/best-practices/contact-form/page.mdx (5)
1-15: LGTM: Imports and metadata are well-structured.The imports are appropriate for the content, including the necessary images for the guide. The metadata provides a clear title and description for the article.
17-49: LGTM: Clear introduction and setup instructions.The introduction effectively outlines the guide's purpose and what users will achieve. The setup instructions are clear, well-structured, and include helpful visual aids. The use of the Note component adds valuable insight for users.
51-86: LGTM: Comprehensive instructions for name and email fields.The instructions for adding name and email fields are clear, concise, and well-illustrated with relevant images. The mention of configuration options like making fields required is helpful for users.
88-130: LGTM: Well-explained reason for contact and message field sections.The instructions for adding the single select question and message field are clear and detailed. The use of images effectively illustrates the process, and the Note component provides valuable insight for users.
166-169: LGTM: Effective conclusion to the guide.The conclusion effectively wraps up the guide, congratulating the user and reinforcing the achievement of creating a professional contact form. It also highlights the importance of balancing necessary details with simplicity.
|
Awarding Aditya-PS-05: 750 points 🕹️ Well done! Check out your new contribution on oss.gg/Aditya-PS-05 |
4 participants
What does this PR do?
Fixes #3200
How should this be tested?
Checklist
Required
pnpm buildconsole.logsgit pull origin mainAppreciated
Images
Summary by CodeRabbit
New Features
Documentation