diff --git a/apps/formbricks-com/pages/blog/react-form-library-launch/index.mdx b/apps/formbricks-com/pages/blog/react-form-library-launch/index.mdx new file mode 100644 index 0000000000..caeb09ff37 --- /dev/null +++ b/apps/formbricks-com/pages/blog/react-form-library-launch/index.mdx @@ -0,0 +1,62 @@ +import Image from "next/image"; +import LayoutMdx from "@/components/shared/LayoutMdx"; +import LaunchDay from "./launch react library form builder survey with multi-step form open-source.png"; +import MdxTryItCTA from "@/components/shared/MdxTryItCTA.tsx"; +import Styling from "../../docs/react-form-library/style-css/HTML classes of Formbricks React Form Library to custom style surveys and forms.png"; +import CodeExample from "./v2 developer experience best react library 2023 forms and surveys open source.png"; + +export const meta = { + title: "React Form Library launched! 🚀", + description: "We are pumped to announce that the Formbricks React Form Library is ready to be used!", + date: "2022-11-22", +}; + +Robin Hood Meme + +### Why a React Library? + +We have built form and survey solutions for companies in different stages. Even though forms have been around for a long while, we kept finding ourselves writing custom code for basic functionality over and over again. Formbricks React will provide all form functionality out of the box and speed up writing forms and surveys in React significantly. + +### How is the developer experience better? + +We want to make forms in React more accessible. To achieve that, we work with: + +- **Component-based approach:** Import HTML and non-HTML questions types with one line of code +- **Props:** Specify every aspect of each form field like name, label, placeholder and validation with props in each component +- **Styling:** Give your form a native look & feel in minutes. We natively support Tailwind and regular CSS style sheets. + +Robin Hood Meme + +### What does it come with? + +In version 0.1 we layed the foundation for performant, easy to build forms. The library includes: + +- Text Input +- Textarea Input +- Submit Button +- Validation +- Tailwind Support +- Standard CSS Support + +Robin Hood Meme + +### Whats on the roadmap? + +- All HTML input types (checkbox, phone, email, address, etc) +- Common non-HTML question types (Slider, star-rating, NPS, toggle, etc.) +- Easy multi-step forms +- Easy form logic +- Easy internationalization (i18n) +- Accessibility out of the box (a11y) + +### Suggest a feature + +We run open source and community-centered. If you’d like a specific feature, [just ask for it in our Discord :)](https://formbricks.com/discord) + +### Documentation + +You’ll find a lot more [information in the Docs.](/docs) + + + +export default ({ children }) => {children}; diff --git a/apps/formbricks-com/pages/blog/react-form-library-launch/launch react library form builder survey with multi-step form open-source.png b/apps/formbricks-com/pages/blog/react-form-library-launch/launch react library form builder survey with multi-step form open-source.png new file mode 100644 index 0000000000..2d6730b36b Binary files /dev/null and b/apps/formbricks-com/pages/blog/react-form-library-launch/launch react library form builder survey with multi-step form open-source.png differ diff --git a/apps/formbricks-com/pages/blog/react-form-library-launch/v2 developer experience best react library 2023 forms and surveys open source.png b/apps/formbricks-com/pages/blog/react-form-library-launch/v2 developer experience best react library 2023 forms and surveys open source.png new file mode 100644 index 0000000000..648f05013b Binary files /dev/null and b/apps/formbricks-com/pages/blog/react-form-library-launch/v2 developer experience best react library 2023 forms and surveys open source.png differ diff --git a/apps/formbricks-com/pages/docs/react-form-library/el-form-wrapper/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/el-form-wrapper/index.mdx index 6847b5ef61..36fe914788 100644 --- a/apps/formbricks-com/pages/docs/react-form-library/el-form-wrapper/index.mdx +++ b/apps/formbricks-com/pages/docs/react-form-library/el-form-wrapper/index.mdx @@ -48,3 +48,5 @@ Here we’re sending the data to an API endpoint to receive and display out subm | onSubmit | Function | `() => {}` | Gets passed on object with `{data, schema, event}` and is triggered when the form gets submitted without errors | export default ({ children }) => {children}; + +; diff --git a/apps/formbricks-com/pages/docs/react-form-library/el-submit/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/el-submit/index.mdx index 535590fba8..4d8a4f56c3 100644 --- a/apps/formbricks-com/pages/docs/react-form-library/el-submit/index.mdx +++ b/apps/formbricks-com/pages/docs/react-form-library/el-submit/index.mdx @@ -35,6 +35,6 @@ To keep it working make sure that there is **only one Submit button** per form. | 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) | -| | +| | export default ({ children }) => {children}; diff --git a/apps/formbricks-com/pages/docs/react-form-library/getting-started/data output console for open source form made with react library for free.PNG b/apps/formbricks-com/pages/docs/react-form-library/getting-started/data output console for open source form made with react library for free.PNG new file mode 100644 index 0000000000..c1e4daab4e Binary files /dev/null and b/apps/formbricks-com/pages/docs/react-form-library/getting-started/data output console for open source form made with react library for free.PNG differ diff --git a/apps/formbricks-com/pages/docs/react-form-library/getting-started/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/getting-started/index.mdx index 03faad02d7..30587e9c85 100644 --- a/apps/formbricks-com/pages/docs/react-form-library/getting-started/index.mdx +++ b/apps/formbricks-com/pages/docs/react-form-library/getting-started/index.mdx @@ -41,6 +41,10 @@ For a simple sign up form we import the following: ```jsx import { Form, Text, Textarea, Submit } from "@formbricks/react"; +# or +yarn add @formbricks/react +# or +pnpm add @formbricks/react ``` diff --git a/apps/formbricks-com/pages/docs/react-form-library/link-formbricks-hq/image 1 formspree free alternative open source.png b/apps/formbricks-com/pages/docs/react-form-library/link-formbricks-hq/image 1 formspree free alternative open source.png new file mode 100644 index 0000000000..88a01ea1cd Binary files /dev/null and b/apps/formbricks-com/pages/docs/react-form-library/link-formbricks-hq/image 1 formspree free alternative open source.png differ diff --git a/apps/formbricks-com/pages/docs/react-form-library/link-formbricks-hq/image 2 formspree alternative for free and open source.png b/apps/formbricks-com/pages/docs/react-form-library/link-formbricks-hq/image 2 formspree alternative for free and open source.png new file mode 100644 index 0000000000..1b751c3195 Binary files /dev/null and b/apps/formbricks-com/pages/docs/react-form-library/link-formbricks-hq/image 2 formspree alternative for free and open source.png differ diff --git a/apps/formbricks-com/pages/docs/react-form-library/link-formbricks-hq/image3 formspree open source alternative for free opensorce.png b/apps/formbricks-com/pages/docs/react-form-library/link-formbricks-hq/image3 formspree open source alternative for free opensorce.png new file mode 100644 index 0000000000..14f1501045 Binary files /dev/null and b/apps/formbricks-com/pages/docs/react-form-library/link-formbricks-hq/image3 formspree open source alternative for free opensorce.png differ diff --git a/apps/formbricks-com/pages/docs/react-form-library/style-css/HTML classes of Formbricks React Form Library to custom style surveys and forms.png b/apps/formbricks-com/pages/docs/react-form-library/style-css/HTML classes of Formbricks React Form Library to custom style surveys and forms.png new file mode 100644 index 0000000000..310454ab89 Binary files /dev/null and b/apps/formbricks-com/pages/docs/react-form-library/style-css/HTML classes of Formbricks React Form Library to custom style surveys and forms.png differ diff --git a/apps/formbricks-com/pages/docs/react-form-library/style-css/simple styling for best react from builder library to make open source surveys and forms.PNG b/apps/formbricks-com/pages/docs/react-form-library/style-css/simple styling for best react from builder library to make open source surveys and forms.PNG new file mode 100644 index 0000000000..db27f50380 Binary files /dev/null and b/apps/formbricks-com/pages/docs/react-form-library/style-css/simple styling for best react from builder library to make open source surveys and forms.PNG differ diff --git a/apps/formbricks-com/pages/docs/react-form-library/validation-errors/styling of validation errors form react library open source best and fastest way to build forms react.png b/apps/formbricks-com/pages/docs/react-form-library/validation-errors/styling of validation errors form react library open source best and fastest way to build forms react.png new file mode 100644 index 0000000000..385abb5c3c Binary files /dev/null and b/apps/formbricks-com/pages/docs/react-form-library/validation-errors/styling of validation errors form react library open source best and fastest way to build forms react.png differ diff --git a/apps/formbricks-com/pages/docs/react-form-library/validation-errors/validation errors form react library open source best way to build forms react.png b/apps/formbricks-com/pages/docs/react-form-library/validation-errors/validation errors form react library open source best way to build forms react.png new file mode 100644 index 0000000000..081ab452fe Binary files /dev/null and b/apps/formbricks-com/pages/docs/react-form-library/validation-errors/validation errors form react library open source best way to build forms react.png differ