Formbricks hq (#154)

* radio docs v1

* update Form HQ to Formbricks HQ

* added redirect

* correct typo
This commit is contained in:
Johannes
2022-11-23 04:05:58 -06:00
committed by GitHub
parent 2a23326dad
commit d20fc9512a
23 changed files with 235 additions and 128 deletions
@@ -15,7 +15,7 @@ const navigation = {
{ name: "Integrations", href: "#", status: false },
],
insights: [
{ name: "Form HQ", href: "/form-hq", status: true },
{ name: "Formbricks HQ", href: "/formbricks-hq", status: true },
{ name: "Reports", href: "#", status: false },
],
other: [
@@ -78,9 +78,9 @@ const pipes = [
const insights = [
{
name: "Form HQ",
name: "Formbricks HQ",
description: "Manage submissions easily",
href: "/form-hq",
href: "/formbricks-hq",
icon: CursorArrowRippleIcon,
cat: "insights",
status: true,
+13 -5
View File
@@ -33,19 +33,27 @@ const navigation = [
},
{
title: "Form Wrapper",
href: "/docs/react-form-library/el-form-wrapper",
href: "/docs/react-form-library/form-wrapper",
},
{
title: "Input: Text",
href: "/docs/react-form-library/el-text",
href: "/docs/react-form-library/input-text",
},
{
title: "Input: Textarea",
href: "/docs/react-form-library/el-textarea",
href: "/docs/react-form-library/input-textarea",
},
{
title: "Input: Radio Button",
href: "/docs/react-form-library/input-radio",
},
/* {
title: "Input: Checkbox",
href: "/docs/react-form-library/input-checkbox",
}, */
{
title: "Input: Submit",
href: "/docs/react-form-library/el-submit",
href: "/docs/react-form-library/input-submit",
},
{
title: "Style with CSS",
@@ -67,7 +75,7 @@ const navigation = [
},
{
title: "Data Insights",
links: [{ title: "Form HQ", href: "/docs/data-insights/form-hq" }],
links: [{ title: "Formbricks HQ", href: "/docs/data-insights/formbricks-hq" }],
},
];
+5
View File
@@ -24,6 +24,11 @@ const nextConfig = {
destination: "https://github.com/formbricks/formbricks",
permanent: false,
},
{
source: "/form-hq",
destination: "/formbricks-hq",
permanent: false,
},
];
},
};
@@ -68,7 +68,7 @@ Lets have a closer look!
The Formbricks [React Library](/react-form-library) is the newests kid on the block. While still early, it looks very promising. It uses the impressive performance of React Hook Forms with the objective to make it faster and easier to use. With a modern developer experience and a growing number of HTML and non-HTML question-types, its a sweet option for most use cases.
<Callout title="No backend needed" type="note">
Even though Formbricks React works as a standalone solution, the full power is unleashed when using it with the [self-hostable dashboard](/form-hq). Setup webhooks, integrations & email notifications or directly view at your data.
Even though Formbricks React works as a standalone solution, the full power is unleashed when using it with the [self-hostable dashboard](/formbricks-hq). Setup webhooks, integrations & email notifications or directly view at your data.
</Callout>
@@ -162,28 +162,28 @@ Unfortunately, the data handling is not part of the scope of the React Form Buil
Not many know that Formik has a commercial counterpart called Formium. Formium offers a versatile submission API where you can pipe your submissions to and take it from there.
Formbricks has a very similar offer called Form HQ which lets you forward form responses via email or integrate with third-party tools. Here is a comparison of their free plans:
Formbricks has a very similar offer called Formbricks HQ which lets you forward form responses via email or integrate with third-party tools. Here is a comparison of their free plans:
| Feature | Formium (free) | Formbricks Form HQ (free) |
| ------------------------- | -------------- | ------------------------- |
| Free submissions / month | 100 | 500 |
| File Uploads | 100MB | 200MB |
| Auto Responder | ✅ | ⚙️ |
| Email forwarding | ✅ | ✅ |
| Custom Email Templates | ✅ | ⚙️ |
| Multiple Email Recipients | ✅ | ✅ |
| Custom Mail Server | ✅ | ⚙️ |
| Webhooks | ✅ | ✅ |
| Airtable Integration | ✅ | ⚙️ |
| Google Sheets Integration | ✅ | ⚙️ |
| Zapier Integration | ✅ | ⚙️ |
| Automated Workflows | ❌ | ⚙️ |
| Easy self-hosting | ❌ | ✅ |
| Can be used in EU? | ❌ | ✅ |
| Last feature shipped | 2020 | Nov 2022 |
| Feature | Formium (free) | Formbricks HQ (free) |
| ------------------------- | -------------- | -------------------- |
| Free submissions / month | 100 | 500 |
| File Uploads | 100MB | 200MB |
| Auto Responder | ✅ | ⚙️ |
| Email forwarding | ✅ | ✅ |
| Custom Email Templates | ✅ | ⚙️ |
| Multiple Email Recipients | ✅ | ✅ |
| Custom Mail Server | ✅ | ⚙️ |
| Webhooks | ✅ | ✅ |
| Airtable Integration | ✅ | ⚙️ |
| Google Sheets Integration | ✅ | ⚙️ |
| Zapier Integration | ✅ | ⚙️ |
| Automated Workflows | ❌ | ⚙️ |
| Easy self-hosting | ❌ | ✅ |
| Can be used in EU? | ❌ | ✅ |
| Last feature shipped | 2020 | Nov 2022 |
<Callout title="In development" type="note">
The Formbricks Form HQ is currently in alpha testing. Most features are still in development. Follow us on
The Formbricks HQ is currently in alpha testing. Most features are still in development. Follow us on
[Twitter](https://twitter.com/formbricks) to stay uptodate on the release!
</Callout>
@@ -207,7 +207,7 @@ Since Formium is hosted in the US and operated by a US entity, European companie
### 1st place
It's still verrry early for [Formbricks](/react-form-library). However, the approach looks promising as it makes working with forms and surveys in React a lot easier. The React Library packs a lot of powerful features which makes it by far the easiest option for coding forms in React. The upcoming Form HQ takes setting up a backend off developers plate completely. The modularity and extendability makes it a future-proof choice.
It's still verrry early for [Formbricks](/react-form-library). However, the approach looks promising as it makes working with forms and surveys in React a lot easier. The React Library packs a lot of powerful features which makes it by far the easiest option for coding forms in React. The upcoming Formbricks HQ takes setting up a backend off developers plate completely. The modularity and extendability makes it a future-proof choice.
<Image
src={Winner}
@@ -94,7 +94,7 @@ The first step is building the React Form Builder into a full-fledged product. W
Alongside the React Form Builder we'll redesign our Core API. You'll be able to:
- Send any form to our API endpoint to view and manage submissions on [formbricks.com](/form-hq)
- Send any form to our API endpoint to view and manage submissions on [formbricks.com](/formbricks-hq)
- Forward your data however you like: [Email](/email), [webhooks](/webhooks), 3rd party integrations
Please [join our Discord](https://discord.com/invite/3YFcABF2Ts) to provide feedback on what's important to you!
@@ -2,7 +2,7 @@ import { Layout } from "@/components/docs/Layout";
import { Fence } from "@/components/shared/Fence";
export const meta = {
title: "Form HQ",
title: "Formbricks HQ",
};
coming soon
@@ -19,7 +19,7 @@ You want to know how respondents interact with your form or survey. How many com
### Data Handling Bricks
Creating a form is only the first step. You need a destination for your submissions. We offer an [API endpoint](/core-api) where you can submit your pre-existing forms to. Within minutes you can start receiving submissions and view them in your [dashboard](/form-hq).
Creating a form is only the first step. You need a destination for your submissions. We offer an [API endpoint](/core-api) where you can submit your pre-existing forms to. Within minutes you can start receiving submissions and view them in your [dashboard](/formbricks-hq).
Additionally, we're offering [email notifications](/email), [webhooks](/webhooks) and integrations into all the great tools you're already using. Control the flow of your qualitative data in one place.
@@ -43,10 +43,8 @@ Here were sending the data to an API endpoint to receive and display out subm
### Props & Attributes
| Prop | Type | Default | Description |
| -------- | -------- | ---------- | --------------------------------------------------------------------------------------------------------------- |
| onSubmit | Function | `() => {}` | Gets passed on object with `{data, schema, event}` and is triggered when the form gets submitted without errors |
| Prop | Type | Default | Description |
| -------- | -------- | -------- | --------------------------------------------------------------------------------------------------------------- |
| onSubmit | Function | `()=>{}` | Gets passed on object with `{data, schema, event}` and is triggered when the form gets submitted without errors |
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
;
@@ -0,0 +1,175 @@
import { Layout } from "@/components/docs/Layout";
import { Callout } from "@/components/shared/Callout";
import Image from "next/image";
import Exp1 from "./radio-boxes-exp-1-form-survey-best-react-library.png";
import Exp2 from "./radio-boxes-exp-2-best-react-library-survey-forms.png";
import Exp3 from "./radio-boxes-exp-3-forms-and-survey-form-builder.png";
import Styling from "./Radio-CSS-custom-styling-react-form-library-survey.png";
export const meta = {
title: "Radio Buttons - Formbricks React Form Library",
};
The radio input uses [HTML's native radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio) inputs to allow a user to select one value from a set of options.
The radio input needs two props:
- `name`
- `options`
## Options attribute
### Options: Array of values
The options attribute can handle an array of values which are interpreted both as label and value.
```jsx
<Radio
name="food"
label="What's your favorite food?"
help="Only choose one"
options={["Sushi", "Pasta", "Pizza"]}
/>
# data output
label: Sushi, value: Sushi,
label: Pasta, value: Pasta,
label: Pizza, value: Pizza
```
<Image src={Exp2} alt="Screenshot of Radio Question built with fast React Form Lib" className="rounded-lg" />
### Options: Array of objects
The options attribute can also handle an array of objects containing label:value pairs. This allows for differences between the label and the data stored. You can also disable options:
```jsx
<Radio
name="germany"
label="What's the capital of Germany?"
help="Find the right one"
options={[
{
label: "Kiel",
value: "kiel",
config: {
disabled: true,
},
},
{
label: "Berlin",
value: "berlin",
},
{
label: "Bonn",
value: "bonn",
},
]}
/>
# data output
label: Kiel, value: kiel,
label: Berlin, value: berlin,
label: Bonn, value: bonn
```
<Image
src={Exp3}
alt="Screenshot of Radio Question built with best React Survey Lib"
className="rounded-lg"
/>
### Options: No Options
You don't have to add options to your radio button. In this case the label of the input field is also used as the label for the only option and the data stored:
```jsx
<Radio name="agree" label="Do you agree?" help="Just a question" />
# data output
label: "Do you agree?", value: "Do you agree?"
```
<Image src={Exp1} alt="Screenshot of Radio Question built with best React Form Lib" className="rounded-lg" />
## Props & Attributes
| Prop | Type | Default | Description |
| ------- | ------ | ------- | ------------------------------------------------------------------------------------------------------- |
| options | Array | - | Contains the options in your radio input |
| label | String | - | The label (often a question) of the radio input. With no `option` attribute it's also the stored value. |
### Universal props all inputs have
| Prop | What is it? | Required? | Shown to respondent? | Comment |
| ----------------- | --------------------------------------- | --------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | name of the field | yes | no | It is not shown to respondents but important as a unique identifier to understand which field holds what content. You cannot have two fields with the same name. |
| label | label of the field | yes | yes | The label above the input |
| help | help text | no | yes | You can add a little help text to each field to provide more detail on how to fill out the field. |
| validation | determines how field input is validated | no | depends on field input | If you want to validate the content of a field before the form is sent, you can do so with the validation prop. [read more](/docs/react-form-library/validation-errors) |
| id | own identifier for input | no | no | To target your input with css or javascript directly |
| outerClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| wrapperClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| innerClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| inputClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| helpClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| messagesClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| messageClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
### Styling with CSS
You can style your form with adding CSS to the pre-assigned classes. This is how the classes are assigned:
<Image
src={Styling}
alt="Styling of Radio Question built with best React Form Library"
className="rounded-lg"
/>
| CSS Class | Description |
| ------------------- | ------------------------------------------------------------------------------------------ |
| formbricks-form | The outermost wrapping element. |
| formbricks-outer | A wrapper around the label input, help text and error messages. |
| formbricks-legend | The legend (often a question) |
| formbricks-help | The help text itself. |
| formbricks-options | A wrapper around all options. |
| formbricks-option | A wrapper around each option. |
| formbricks-wrapper | A wrapper around the label and the input field (no help text). |
| formbricks-label | The label itself. |
| formbricks-inner | A wrapper around the input element. |
| formbricks-input | The input element itself, here the radio button. |
| formbricks-message | The element (or many elements) containing a message — often validation and error messages. |
| formbricks-messages | A wrapper around all the messages. |
### Styling with Tailwind
You can also use Tailwind to extend the classes, like so:
```jsx
<Radio
name="food"
label="What's your favorite food?"
help="Only choose one"
options={["Sushi", "Pasta", "Pizza"]}
legendClassName="font-bold"
optionClassName="bg-gray rounded-sm"
/>
```
### Options-specific props
| Prop | What is it? | Required? | Shown to respondent? | Comment |
| ---------------- | -------------------- | --------- | -------------------- | ---------------------------------------------------- |
| legendClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| optionsClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
| optionClassName | append styling class | no | - | [read more](/docs/react-form-library/style-tailwind) |
Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
+3 -3
View File
@@ -22,7 +22,7 @@ const features = [
{
id: "selfHost",
name: "Self-host or Cloud",
description: "Set your emails up in our Form HQ or self-host the entire solution yourself.",
description: "Set your emails up in our Formbricks HQ or self-host the entire solution yourself.",
icon: ServerStackIcon,
},
];
@@ -30,11 +30,11 @@ const features = [
const EmailPage = () => (
<Layout
title="Email Notifications"
description="In some cases, the good old email is the way to go. In the Form HQ you can setup forwarding submission data to one or more emails.">
description="In some cases, the good old email is the way to go. In the Formbricks HQ you can setup forwarding submission data to one or more emails.">
<HeroTitle headingPt1="Email" />
<FeatureHighlight
featureTitle="Get responses to your inbox"
text="In some cases, the good old email is the way to go. In the Form HQ you can setup forwarding submission data to one or more emails."
text="In some cases, the good old email is the way to go. In the Formbricks HQ you can setup forwarding submission data to one or more emails."
img={<Image src={ImageEmail} alt="react library" className="rounded-lg" />}
isImgLeft
cta="Get started"
@@ -63,7 +63,7 @@ const FormHQPage = () => (
<HeroTitle headingPt1="Form" headingTeal="HQ" />
<Image
src={ImageFormHQ}
alt="Form HQ by Formbricks user interface to create forms, manage submissions open source."
alt="Formbricks HQ user interface to create forms, manage submissions open source."
/>
<HeadingCentered
teaser="You have arrived"
+1 -1
View File
@@ -88,7 +88,7 @@ const FormHQPage = () => (
/>
<FeatureHighlight
featureTitle="Get responses via email or analyze them online."
text={`All survey responses get collected in your Form HQ. View and manage responses in your personal dashboard. \n\n Set up an email notification or send the complete submission data to your email.`}
text={`All survey responses get collected in your Formbricks HQ. View and manage responses in your personal dashboard. \n\n Set up an email notification or send the complete submission data to your email.`}
img={<Image src={ImageEmail} alt="react library" className="rounded-lg" />}
/>
<HeadingCentered
+3 -3
View File
@@ -25,7 +25,7 @@ A form or survey always consists of two parts: The form facing your respondents
### Backend-as-a-Service for forms and surveys
Our [React Form Builder](/react-form-library) makes it super easy to build custom forms rapidly with. Today, well talk about how the Formbricks [Core API](/core-api) + [Form HQ](/form-hq) completely eliminate the need to setup your own backend to receive, manage and analyze submissions from forms and surveys.
Our [React Form Builder](/react-form-library) makes it super easy to build custom forms rapidly with. Today, well talk about how the Formbricks [Core API](/core-api) + [Formbricks HQ](/formbricks-hq) completely eliminate the need to setup your own backend to receive, manage and analyze submissions from forms and surveys.
### How to receive form responses without a backend
@@ -35,7 +35,7 @@ To start off, lets quickly have a look at how this works generally. Its pr
<Form action="https://formbricks.com/f/{form_id}" method="post">
```
If the respondent hits “Send”, your form sends all the collected data to the API endpoint in the “action” tag. The API receives it and displays it in your Form HQ dashboard. Super easy!
If the respondent hits “Send”, your form sends all the collected data to the API endpoint in the “action” tag. The API receives it and displays it in your Formbricks HQ dashboard. Super easy!
## Formbricks vs. Formspree
@@ -74,7 +74,7 @@ Here a detailed overview of both free plans. Its pretty obvious:
| Self-hosting | ✅ | ❌ |
<Callout title="In development" type="warning">
The Form HQ is still in development and not yet available. Follow us on
The Formbricks HQ is still in development and not yet available. Follow us on
[Twitter](https://twitter.com/formbricks) to stay uptodate on the release!
</Callout>
+1 -1
View File
@@ -12,7 +12,7 @@ const WebhooksPage = () => (
<HeroTitle headingPt1="Webhooks" />
<FeatureHighlight
featureTitle="Versatile data handling"
text="Don't be limited by our choice of integrations, pipe your data exactly where you need it. Set up webhooks in our Form HQ with just a few clicks.
text="Don't be limited by our choice of integrations, pipe your data exactly where you need it. Set up webhooks in our Formbricks HQ with just a few clicks.
Don't miss any piece of information by sending partial submissions alongside complete ones."
img={<Image src={ImageWebhooks} alt="react library" className="rounded-lg" />}
isImgLeft
+3 -82
View File
@@ -14,43 +14,6 @@ importers:
tsx: 3.9.0
turbo: 1.6.3
apps/examples:
specifiers:
'@formbricks/react': workspace:*
'@formbricks/tailwind-config': workspace:*
'@formbricks/tsconfig': workspace:*
'@formbricks/ui': workspace:*
'@heroicons/react': ^2.0.13
'@types/node': ^18.11.9
'@types/react': ^18.0.25
'@types/react-dom': ^18.0.8
autoprefixer: ^10.4.12
eslint-config-formbricks: workspace:*
next: latest
postcss: ^8.4.18
react: ^18.2.0
react-dom: ^18.2.0
tailwindcss: ^3.2.2
typescript: ^4.8.4
dependencies:
'@formbricks/react': link:../../packages/react
'@formbricks/ui': link:../../packages/ui
'@heroicons/react': 2.0.13_react@18.2.0
next: 13.0.4_biqbaboplfbrettd7655fr4n2y
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
devDependencies:
'@formbricks/tailwind-config': link:../../packages/tailwind-config
'@formbricks/tsconfig': link:../../packages/tsconfig
'@types/node': 18.11.9
'@types/react': 18.0.25
'@types/react-dom': 18.0.9
autoprefixer: 10.4.12_postcss@8.4.18
eslint-config-formbricks: link:../../packages/eslint-config-custom
postcss: 8.4.18
tailwindcss: 3.2.4_postcss@8.4.18
typescript: 4.8.4
apps/formbricks-com:
specifiers:
'@docsearch/react': ^3.3.0
@@ -5454,6 +5417,7 @@ packages:
/bindings/1.5.0:
resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
requiresBuild: true
dependencies:
file-uri-to-path: 1.0.0
dev: true
@@ -8256,6 +8220,7 @@ packages:
/file-uri-to-path/1.0.0:
resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
requiresBuild: true
dev: true
optional: true
@@ -11308,6 +11273,7 @@ packages:
/nan/2.17.0:
resolution: {integrity: sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==}
requiresBuild: true
dev: true
optional: true
@@ -11421,51 +11387,6 @@ packages:
- babel-plugin-macros
dev: false
/next/13.0.4_biqbaboplfbrettd7655fr4n2y:
resolution: {integrity: sha512-4P0MvbjPCI1E/UPL1GrTXtYlgFnbBbY3JQ+AMY8jYE2SwyvCWctEJySoRjveznAHjrl6TIjuAJeB8u1c2StYUQ==}
engines: {node: '>=14.6.0'}
hasBin: true
peerDependencies:
fibers: '>= 3.1.0'
node-sass: ^6.0.0 || ^7.0.0
react: ^18.2.0
react-dom: ^18.2.0
sass: ^1.3.0
peerDependenciesMeta:
fibers:
optional: true
node-sass:
optional: true
sass:
optional: true
dependencies:
'@next/env': 13.0.4
'@swc/helpers': 0.4.11
caniuse-lite: 1.0.30001418
postcss: 8.4.14
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
styled-jsx: 5.1.0_react@18.2.0
use-sync-external-store: 1.2.0_react@18.2.0
optionalDependencies:
'@next/swc-android-arm-eabi': 13.0.4
'@next/swc-android-arm64': 13.0.4
'@next/swc-darwin-arm64': 13.0.4
'@next/swc-darwin-x64': 13.0.4
'@next/swc-freebsd-x64': 13.0.4
'@next/swc-linux-arm-gnueabihf': 13.0.4
'@next/swc-linux-arm64-gnu': 13.0.4
'@next/swc-linux-arm64-musl': 13.0.4
'@next/swc-linux-x64-gnu': 13.0.4
'@next/swc-linux-x64-musl': 13.0.4
'@next/swc-win32-arm64-msvc': 13.0.4
'@next/swc-win32-ia32-msvc': 13.0.4
'@next/swc-win32-x64-msvc': 13.0.4
transitivePeerDependencies:
- '@babel/core'
- babel-plugin-macros
dev: false
/next/13.0.4_mqvh5p7ejg4taogoj6tpk3gd5a:
resolution: {integrity: sha512-4P0MvbjPCI1E/UPL1GrTXtYlgFnbBbY3JQ+AMY8jYE2SwyvCWctEJySoRjveznAHjrl6TIjuAJeB8u1c2StYUQ==}
engines: {node: '>=14.6.0'}