react comparison page + tweaks (#146)

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>
This commit is contained in:
Johannes
2022-11-16 04:38:42 -06:00
committed by GitHub
parent 1abd4352ce
commit f575e41063
16 changed files with 316 additions and 313 deletions
+2
View File
@@ -36,3 +36,5 @@ yarn-error.log*
next-env.d.ts
.vscode
public/sitemap*.xml
@@ -58,7 +58,7 @@ function Header({ navigation }: any) {
variant="secondary"
onClick={() => router.push("/")}
size="sm"
className="ml-10 flex justify-center opacity-60">
className="ml-10 hidden justify-center opacity-60 sm:flex">
&larr; Back to Mainpage
</Button>
</div>
@@ -122,7 +122,7 @@ export default function Header() {
"group inline-flex items-center rounded-md text-base font-medium hover:text-slate-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:hover:text-slate-300"
)}>
<span>Bricks</span>
<ChevronDownIcon className="ml-2 h-5 w-5 " aria-hidden="true" />
<ChevronDownIcon className="ml-2 h-5 w-5" aria-hidden="true" />
</Popover.Button>
<Transition
@@ -294,7 +294,7 @@ export default function Header() {
<Popover.Panel
focus
className="absolute inset-x-0 top-0 z-20 origin-top-right transform p-2 transition md:hidden">
<div className="dark:divide-slate divide-y-2 divide-gray-50 rounded-lg bg-gray-100 shadow-lg ring-1 ring-black ring-opacity-5 dark:bg-slate-900">
<div className="dark:divide-slate divide-y-2 divide-gray-100 rounded-lg bg-gray-200 shadow-lg ring-1 ring-black ring-opacity-5 dark:divide-gray-700 dark:bg-slate-800">
<div className="px-5 pt-5 pb-6">
<div className="flex items-center justify-between">
<div>
@@ -308,7 +308,7 @@ export default function Header() {
</div>
</div>
<nav className="relative bg-gray-100 px-5 py-6 dark:bg-slate-900">
<nav className="relative bg-gray-200 px-5 py-6 dark:bg-slate-800">
<div>
<h4 className="mb-3 text-sm text-gray-900 dark:text-gray-300">Form Creation</h4>
{creation.map((brick) => (
@@ -319,7 +319,11 @@ export default function Header() {
brick.status ? "cursor-pointer" : "cursor-default",
"-m-3 flex items-start rounded-lg p-3 py-3"
)}>
<div className="text-brand-dark dark:text-brand-light flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md sm:h-12 sm:w-12">
<div
className={clsx(
brick.status ? "text-brand-dark dark:text-brand-light" : "text-slate-500",
"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md sm:h-12 sm:w-12"
)}>
<brick.icon className="h-6 w-6" aria-hidden="true" />
</div>
<div className="ml-4">
@@ -335,7 +339,7 @@ export default function Header() {
<p
className={clsx(
brick.status
? "text-gray-900 dark:text-gray-300"
? "text-gray-900 dark:text-gray-400"
: "text-gray-400 dark:text-gray-600",
"text-sm"
)}>
@@ -355,7 +359,11 @@ export default function Header() {
brick.status ? "cursor-pointer" : "cursor-default",
"-m-3 flex items-start rounded-lg p-3 py-3"
)}>
<div className="text-brand-dark dark:text-brand-light flex h-10 w-10 flex-shrink-0 items-center justify-center sm:h-12 sm:w-12">
<div
className={clsx(
brick.status ? "text-brand-dark dark:text-brand-light" : "text-slate-500",
"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md sm:h-12 sm:w-12"
)}>
<brick.icon className="h-6 w-6" aria-hidden="true" />
</div>
<div className="ml-4">
@@ -371,7 +379,7 @@ export default function Header() {
<p
className={clsx(
brick.status
? "text-gray-900 dark:text-gray-300"
? "text-gray-900 dark:text-gray-400"
: "text-gray-400 dark:text-gray-600",
"text-sm"
)}>
@@ -391,7 +399,11 @@ export default function Header() {
brick.status ? "cursor-pointer" : "cursor-default",
"-m-3 flex items-start rounded-lg p-3 py-3"
)}>
<div className="text-brand-dark dark:text-brand-light flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md sm:h-12 sm:w-12">
<div
className={clsx(
brick.status ? "text-brand-dark dark:text-brand-light" : "text-slate-500",
"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md sm:h-12 sm:w-12"
)}>
<brick.icon className="h-6 w-6" aria-hidden="true" />
</div>
<div className="ml-4">
@@ -407,7 +419,7 @@ export default function Header() {
<p
className={clsx(
brick.status
? "text-gray-900 dark:text-gray-300"
? "text-gray-900 dark:text-gray-400"
: "text-gray-400 dark:text-gray-600",
"text-sm"
)}>
@@ -432,7 +444,7 @@ export default function Header() {
variant="secondary"
EndIcon={GitHubIcon}
onClick={() => router.push("https://github.com/formbricks/formbricks")}
className="flex w-full justify-center">
className="flex w-full justify-center fill-slate-800 dark:fill-slate-200">
View on Github
</Button>
<Button
@@ -24,7 +24,7 @@ export default function HeadingCentered() {
</Button>
</div>
<div className="flex items-center pt-10">
<div className="flex h-20 w-full items-center justify-between rounded-lg bg-slate-900 px-8 text-gray-100 ">
<div className="flex h-20 w-full items-center justify-between rounded-lg bg-slate-800 px-8 text-gray-100 ">
<p>npm install @formbricks/react</p>
<button onClick={() => navigator.clipboard.writeText("npm install @formbricks/react")}>
<DocumentDuplicateIcon className="h-8 w-8" />
@@ -49,7 +49,7 @@ export function Search() {
<>
<button
type="button"
className="group flex h-6 w-6 items-center justify-center sm:justify-start md:h-auto md:w-80 md:flex-none md:rounded-lg md:py-2.5 md:pl-4 md:pr-3.5 md:text-sm md:ring-1 md:ring-slate-200 md:hover:ring-slate-300 dark:md:bg-slate-800/75 dark:md:ring-inset dark:md:ring-white/5 dark:md:hover:bg-slate-700/40 dark:md:hover:ring-slate-500 lg:w-96"
className="group flex h-6 w-6 items-center justify-center sm:justify-start md:h-auto md:w-60 md:flex-none md:rounded-lg md:py-2.5 md:pl-4 md:pr-3.5 md:text-sm md:ring-1 md:ring-slate-200 md:hover:ring-slate-300 dark:md:bg-slate-800/75 dark:md:ring-inset dark:md:ring-white/5 dark:md:hover:bg-slate-700/40 dark:md:hover:ring-slate-500 xl:w-80"
onClick={onOpen}>
<SearchIcon className="h-5 w-5 flex-none fill-slate-400 group-hover:fill-slate-500 dark:fill-slate-500 md:group-hover:fill-slate-400" />
<span className="sr-only md:not-sr-only md:ml-2 md:text-slate-500 md:dark:text-slate-400">
Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 110 KiB

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 290 KiB

@@ -0,0 +1,222 @@
import LayoutMdx from "@/components/shared/LayoutMdx";
import Image from "next/image";
import { Callout } from "@/components/shared/Callout";
import HeroAnimation from "@/components/shared/HeroAnimation.tsx";
import MdxTryItCTA from "@/components/shared/MdxTryItCTA.tsx";
import HeaderImage from "/images/SEO/Best React Form Library and Builder 2023 to create and build forms surveys easy and fast.png";
import GithubStars from "/images/SEO/Stars - best open source react survey builder 2023 comparison of github repository stars for form builder library.png";
import Winner from "/images/SEO/Winner comparison best React survey Library and Builder 2023 2022.png";
export const meta = {
title: "Best React Form Library 2023 (easy form creation)",
description:
"What is the best form & survey library for React? React forms and surveys can be pretty annoying. We compared three form builder libraries in 2023.",
};
_Building forms in React natively is pretty annoying. Different input mechanisms, validations, data transformations, initial default values... it never ends. Today we will look at tools which makes all of this a whole lot easier. Lets have a look!_
<Image
src={HeaderImage}
alt="Best React form library builder comparison between Formik Formbricks and React Form Builder 2"
className="rounded-lg"
/>
Were bringing you three different solutions with different pros and cons. But first...
<Callout title="What's your objective?" type="note">
Do you want to build a highly customized form optimized to the last millisecond? Do you want a slick,
multi-page survey? Or do you need a visual editor to have your users create forms? Anyways, we've got you
covered!
</Callout>
## What we compare: Ease of form creation, custom styling and additional work required
We have tested 12 different libraries to share the 3 most compelling ones with you. In order to build exactly the form you envision in the shortest amount of time possible, we shine light one these three aspects of the contending React form libraries:
### 1. Ease of building forms
Here we looked at the overall developer experience and the “completeness” of the solution. In other words: Will you be able to build the form you want just with this library? And how fast?
### 2. Ease of custom styling
In many cases forms have to have certain look & feel to match the application you are building. Here we look at how easy it is to get this look & feel done.
### 3. Additional work required to access data
When the form is done the next question comes up: Where do I pipe the submissions to? And how can I or someone else analyze them? Here we look at how quickly you can achieve your ultimate goal which is not creating forms but gathering and accessing qualitative data.
Now that we have this cleared out of the way, lets look at how popular the solutions are:
<Image
src={GithubStars}
alt="Comparison of GitHub Stars of the best react form builder libraries 2023"
className="rounded-lg"
/>
As you can pretty well see, **Formik** plays in a different league. Launched 4 years ago, it has accumulated over 31k stars - kudos!
**React Form Builder 2** is almost as old as Formik but never took off. However, very recently it is more actively developed and starts picking up traction (6k weekly NPM downloads).
**Formbricks** is a pretty new repository which collected 1.1k stars over the past couple of weeks.
Lets have a closer look!
## Closer look: Who is competing?
### 1. Formbricks React Form Library
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.
</Callout>
### 2. Formik
No React form generator comparison post can do without Formik. Formik is alongside React Hook Forms by far the most popular library to build forms in React (5M weekly downloads combined). Its fast, its comprehensive and its battletested. It comes with input validation, formatting, masking, arrays, and error handling.
### 3. React Form Builder 2
The React Form Builder 2 adds a visual builder to the mix. It comes with React Drag and Drop out of the box that interfaces with a JSON endpoint to load and save generated forms via a schema. It contains 16 question types ranging from star rating question to a signature field. The updated version 2 can be extended with custom components easily. It is a hobby project which picked up quite a bit of traction recently.
<Callout title="In development" type="warning">
The Formbricks React Library 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>
##
# Overview
Before we get into the details, here is the overview for you:
| React Library | Ease of building forms | Ease of custom styling | Additional work required |
| -------------------- | ---------------------- | ---------------------- | ------------------------ |
| Formbricks React | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| Formik | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
| React Form Builder 2 | ⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐ |
## Ease of building forms
When you made a decision on which React Library to use, the last thing you want is to go out and look for another package just because your initial choice lacks e.g. a slider component.
**Formbricks React** currently offers 8 question types and keeps adding more in a fast pace. Check out [the repository](https://formbricks.com/github) for more details.
**React Form Builder** comes with 16 questions types out of the box. It includes star-rating questions, NPS questions, etc. Additionally, the second version makes it really easy to add your custom components to it, if you want.
**Formik** only supports standard HTML question types out of the box. Anything non-HTML (like a date picker, sliders, rating questions) you have to build yourself or find compatible packages for.
## Ease of custom styling
When it comes to custom styling, the options differ quiet a bit. Lets start with React Form Builder 2 as it is the most limited:
**React Form Builder 2** uses Bootstrap so within the realms of Bootstrap you are free to make changes. If you dont want to use Bootstrap, youll have a hard time styling your form and form builder.
**Formik** works smoothly with Tailwind, if you know how to set it up. In a nutshell, you can pass predefined tailwind styles from the parent component to avoid repetition and keep our form file tidy. [Here is a tutorial which touches upon it](https://dev.to/przpiw/build-elegant-forms-reactformik-tailwind-54d8). Here is a sneak peak:
```jsx
export const LoginForm = ({styles}) => (
<Formik>
<Form>
<label className={styles.label} htmlFor='Email'>
Email
</label>
<Field className={styles.field} id='email' name='email' />
<ErrorMessage component='a' className={styles.errorMsg} name='email' />
<label className={styles.label} htmlFor='Email'>
Password
</label>
<Field className={styles.field} id='password' name='password' />
<ErrorMessage
component='a'
className={styles.errorMsg}
name='password'
/>
<div className='mt-8'>
<button type='submit' className={styles.button}>
Login
</button>
</div>
</Form>
</Formik>
```
**Formbricks React** was built with a great developer experience in mind. There is a native Tailwind support so you can style your components with “className” like youre used to in React:
```jsx
<FormElement type="text" name="name" label="Your name" className="rounded-sm" />
```
Not using Tailwind? Maybe you should 😛 Jokes aside, you can also pass a custom stylesheet and Formbricks React will apply it to your form. As soon as the React Lib is in public beta, well add a step-by-step tutorial [in our docs](/docs).
## Additional work required
Building your form or survey is only the first step. What happens with the qualitative data after your respondents hit “Submit”?
### React Form Builder
Unfortunately, the data handling is not part of the scope of the React Form Builder 2 package.
### Formik (Formium) & Formbricks
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:
| 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 |
<Callout title="In development" type="note">
The Formbricks Form 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>
Overall, both tools have a very similar set of features. However, Formium has not been further developed over the past two years whereas Formbricks shows quite some ambition to offer a full suite of form and survey solutions on the one open-source platform.
<Callout title="Formium no option for EU-based companies" type="warning">
Since Formium is hosted in the US and operated by a US entity, European companies and institutions cannot use Formium without running the legal risk of violating the data privacy of the respondents.
</Callout>
##
# Results
### 3rd place
[React Form Builder 2](https://github.com/kiho/react-form-builder) has a unique differentiator: A visual form builder. If this is essential for what you're building, this is your choice.7
### 2nd place
[Formik](https://formik.org/) has a lot of strengths - and a few weaknesses. It is very customizable and comes with a powerful validation engine. Many developers are very happy with the reduced complexity compared to building forms natively in React. However, it isn't very easy to get started with for junior developers. Lastly, it causes a lot of rerenders, something that React Hook Form solved better.
### 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.
<Image
src={Winner}
alt="Best React form library builder comparison between Formik Formbricks and React Form Builder 2"
className="rounded-lg"
/>
Follow us on [Twitter](https://twitter.com/formbricks) or [join our Discord community](https://formbricks.com/discord) to stay uptodate on the progress.
<MdxTryItCTA />
export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
+66 -60
View File
@@ -1,6 +1,7 @@
import Layout from "@/components/shared/Layout";
import HeroTitle from "@/components/shared/HeroTitle";
import Button from "../components/shared/Button";
import { useRouter } from "next/router";
import {
CloudIcon,
ArrowPathIcon,
@@ -12,67 +13,72 @@ import {
BuildingLibraryIcon,
} from "@heroicons/react/24/outline";
const GetStartedPage = () => (
<Layout
title="Get started"
description="We offer our open source form & survey software for self-hosters and in our managed cloud. Get started within minutes!">
<HeroTitle headingPt1="How do you want to" headingTeal="run" headingPt2="Formbricks?" />
<div className="mb-32 grid px-6 md:grid-cols-2 md:gap-8 md:px-16">
<div className="mb-6 rounded-lg bg-gradient-to-b from-slate-200 to-slate-300 px-10 py-6 dark:from-slate-800 dark:to-slate-700 md:mb-0">
<CloudIcon className="h-20 w-20 flex-shrink-0 text-slate-600 dark:text-slate-400" />
<h2 className="mt-7 text-4xl font-bold text-slate-800 dark:text-slate-200">Cloud</h2>
<p className="text-sm text-slate-500">Managed hosting by Formbricks core team</p>
<p className="mt-7 font-semibold text-slate-700 dark:text-slate-300">
<span className="font-bold ">Free</span> for 500 submissions/mo
</p>
<p className="text-sm text-slate-500 dark:text-slate-500">then $0.01/submission</p>
<div className="font-medium text-slate-500 dark:text-slate-400">
<div className="mt-7 flex items-center py-1">
<InboxArrowDownIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
<p>Start receiving submissions right away</p>
</div>
<div className="flex items-center py-1">
<ArrowPathIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
<p>Automatic upgrades</p>
</div>
<div className="flex items-center py-1">
<PuzzlePieceIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
<p>All enterprise features included</p>
</div>
</div>
<Button disabled className="mt-7 w-full justify-center text-center font-bold" variant="highlight">
Start FREE on Formbricks Cloud
</Button>
</div>
export default function GetStartedPage() {
const router = useRouter();
return (
<Layout
title="Get started"
description="We offer our open source form & survey software for self-hosters and in our managed cloud. Get started within minutes!">
<HeroTitle headingPt1="How do you want to" headingTeal="run" headingPt2="Formbricks?" />
<div className="rounded-lg bg-gradient-to-b from-slate-200 to-slate-300 px-10 py-6 dark:from-slate-800 dark:to-slate-700 ">
<ServerStackIcon className="h-20 w-20 flex-shrink-0 text-slate-600 dark:text-slate-400" />
<h2 className="mt-7 text-4xl font-bold text-slate-800 dark:text-slate-200">Self-host</h2>
<p className="text-sm text-gray-500">Submission data never leaves your infrastructure</p>
<p className="mt-7 font-semibold text-slate-700 dark:text-slate-300">
<span className="font-bold ">Free</span> for 500 submissions/mo
</p>
<p className="text-sm text-slate-500 dark:text-slate-500">then $0.01/submission</p>
<div className="font-medium text-slate-500 dark:text-slate-400">
<div className="mt-7 flex items-center py-1">
<ShieldCheckIcon className="h- mr-3 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
<p>Easy deploy for most private cloud platforms</p>
</div>
<div className="flex items-center py-1">
<CommandLineIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
<p>Full access to production instance</p>
</div>
<div className="flex items-center py-1">
<BuildingLibraryIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
<p>Full compliance with all data privacy regulation</p>
<div className="mb-32 grid px-6 md:grid-cols-2 md:gap-8 md:px-16">
<div className="mb-6 rounded-lg bg-gradient-to-b from-slate-200 to-slate-300 px-10 py-6 dark:from-slate-800 dark:to-slate-700 md:mb-0">
<CloudIcon className="h-20 w-20 flex-shrink-0 text-slate-600 dark:text-slate-400" />
<h2 className="mt-7 text-4xl font-bold text-slate-800 dark:text-slate-200">Cloud</h2>
<p className="text-sm text-slate-500">Managed hosting by Formbricks core team</p>
<p className="mt-7 font-semibold text-slate-700 dark:text-slate-300">
<span className="font-bold ">Free</span> for 500 submissions/mo
</p>
<p className="text-sm text-slate-500 dark:text-slate-500">then $0.01/submission</p>
<div className="font-medium text-slate-500 dark:text-slate-400">
<div className="mt-7 flex items-center py-1">
<InboxArrowDownIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
<p>Start receiving submissions right away</p>
</div>
<div className="flex items-center py-1">
<ArrowPathIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
<p>Automatic upgrades</p>
</div>
<div className="flex items-center py-1">
<PuzzlePieceIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
<p>All enterprise features included</p>
</div>
</div>
<Button disabled className="mt-7 w-full justify-center text-center font-bold" variant="highlight">
Start FREE on Formbricks Cloud
</Button>
</div>
<Button disabled className="mt-7 w-full justify-center text-center font-bold" variant="highlight">
Get started
</Button>
</div>
</div>
</Layout>
);
export default GetStartedPage;
<div className="rounded-lg bg-gradient-to-b from-slate-200 to-slate-300 px-10 py-6 dark:from-slate-800 dark:to-slate-700 ">
<ServerStackIcon className="h-20 w-20 flex-shrink-0 text-slate-600 dark:text-slate-400" />
<h2 className="mt-7 text-4xl font-bold text-slate-800 dark:text-slate-200">Self-host</h2>
<p className="text-sm text-gray-500">Submission data never leaves your infrastructure</p>
<p className="mt-7 font-semibold text-slate-700 dark:text-slate-300">
<span className="font-bold ">Free</span> for 500 submissions/mo
</p>
<p className="text-sm text-slate-500 dark:text-slate-500">then $0.01/submission</p>
<div className="font-medium text-slate-500 dark:text-slate-400">
<div className="mt-7 flex items-center py-1">
<ShieldCheckIcon className="h- mr-3 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
<p>Easy deploy for most private cloud platforms</p>
</div>
<div className="flex items-center py-1">
<CommandLineIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
<p>Full access to production instance</p>
</div>
<div className="flex items-center py-1">
<BuildingLibraryIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
<p>Full compliance with all data privacy regulation</p>
</div>
</div>
<Button
className="mt-7 w-full justify-center text-center font-bold"
variant="highlight"
onClick={() => router.push("/discord")}>
Sign up for beta test
</Button>
</div>
</div>
</Layout>
);
}
-31
View File
@@ -1,31 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url><loc>https://formbricks.com</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/blog</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/blog/open-source-forms-will-save-the-world</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/blog/snoopforms-becomes-formbricks</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/blog/why-open-source-no-code-is-the-future-of-enterprise-gov-software</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/community</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/core-api</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/data-insights/form-hq</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/data-pipelines/core-api</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/data-pipelines/email-notifications</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/data-pipelines/webhooks</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/introduction/how-to-achieve-this</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/introduction/quick-start</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/introduction/what-is-formbricks</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/introduction/why-formbricks</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/react-form-library/getting-started</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/react-form-library/introduction</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/email</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/form-hq</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/get-started</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/imprint</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/privacy</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/react-form-library</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/visual-builder</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/vs-formspree</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/vs-react-hook-form</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/webhooks</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
</urlset>
-4
View File
@@ -1,4 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap><loc>https://formbricks.com/sitemap-0.xml</loc></sitemap>
</sitemapindex>
-8
View File
@@ -1,8 +0,0 @@
# @formbricks/database
## 1.0.1
### Patch Changes
- Updated dependencies [933be01]
- @formbricks/react@0.0.3
+1 -197
View File
@@ -14,41 +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:*
'@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
next: 13.0.3_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
@@ -885,15 +850,6 @@ packages:
dev: false
optional: true
/@next/swc-android-arm-eabi/13.0.3:
resolution: {integrity: sha512-uxfUoj65CdFc1gX2q7GtBX3DhKv9Kn343LMqGNvXyuTpYTGMmIiVY7b9yF8oLWRV0gVKqhZBZifUmoPE8SJU6Q==}
engines: {node: '>= 10'}
cpu: [arm]
os: [android]
requiresBuild: true
dev: false
optional: true
/@next/swc-android-arm64/13.0.0:
resolution: {integrity: sha512-RW9Uy3bMSc0zVGCa11klFuwfP/jdcdkhdruqnrJ7v+7XHm6OFKkSRzX6ee7yGR1rdDZvTnP4GZSRSpzjLv/N0g==}
engines: {node: '>= 10'}
@@ -903,15 +859,6 @@ packages:
dev: false
optional: true
/@next/swc-android-arm64/13.0.3:
resolution: {integrity: sha512-t2k+WDfg7Cq2z/EnalKGsd/9E5F4Hdo1xu+UzZXYDpKUI9zgE6Bz8ajQb8m8txv3qOaWdKuDa5j5ziq9Acd1Xw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [android]
requiresBuild: true
dev: false
optional: true
/@next/swc-darwin-arm64/13.0.0:
resolution: {integrity: sha512-APA26nps1j4qyhOIzkclW/OmgotVHj1jBxebSpMCPw2rXfiNvKNY9FA0TcuwPmUCNqaTnm703h6oW4dvp73A4Q==}
engines: {node: '>= 10'}
@@ -921,15 +868,6 @@ packages:
dev: false
optional: true
/@next/swc-darwin-arm64/13.0.3:
resolution: {integrity: sha512-wV6j6SZ1bc/YHOLCLk9JVqaZTCCey6HBV7inl2DriHsHqIcO6F3+QiYf0KXwRP9BE0GSZZrYd5mZQm2JPTHdJA==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
requiresBuild: true
dev: false
optional: true
/@next/swc-darwin-x64/13.0.0:
resolution: {integrity: sha512-qsUhUdoFuRJiaJ7LnvTQ6GZv1QnMDcRXCIjxaN0FNVXwrjkq++U7KjBUaxXkRzLV4C7u0NHLNOp0iZwNNE7ypw==}
engines: {node: '>= 10'}
@@ -939,15 +877,6 @@ packages:
dev: false
optional: true
/@next/swc-darwin-x64/13.0.3:
resolution: {integrity: sha512-jaI2CMuYWvUtRixV3AIjUhnxUDU1FKOR+8hADMhYt3Yz+pCKuj4RZ0n0nY5qUf3qT1AtvnJXEgyatSFJhSp/wQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
requiresBuild: true
dev: false
optional: true
/@next/swc-freebsd-x64/13.0.0:
resolution: {integrity: sha512-sCdyCbboS7CwdnevKH9J6hkJI76LUw1jVWt4eV7kISuLiPba3JmehZSWm80oa4ADChRVAwzhLAo2zJaYRrInbg==}
engines: {node: '>= 10'}
@@ -957,15 +886,6 @@ packages:
dev: false
optional: true
/@next/swc-freebsd-x64/13.0.3:
resolution: {integrity: sha512-nbyT0toBTJrcj5TCB9pVnQpGJ3utGyQj4CWegZs1ulaeUQ5Z7CS/qt8nRyYyOKYHtOdSCJ9Nw5F/RgKNkdpOdw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [freebsd]
requiresBuild: true
dev: false
optional: true
/@next/swc-linux-arm-gnueabihf/13.0.0:
resolution: {integrity: sha512-/X/VxfFA41C9jrEv+sUsPLQ5vbDPVIgG0CJrzKvrcc+b+4zIgPgtfsaWq9ockjHFQi3ycvlZK4TALOXO8ovQ6Q==}
engines: {node: '>= 10'}
@@ -975,15 +895,6 @@ packages:
dev: false
optional: true
/@next/swc-linux-arm-gnueabihf/13.0.3:
resolution: {integrity: sha512-1naLxYvRUQCoFCU1nMkcQueRc0Iux9xBv1L5pzH2ejtIWFg8BrSgyuluJG4nyAhFCx4WG863IEIkAaefOowVdA==}
engines: {node: '>= 10'}
cpu: [arm]
os: [linux]
requiresBuild: true
dev: false
optional: true
/@next/swc-linux-arm64-gnu/13.0.0:
resolution: {integrity: sha512-x6Oxr1GIi0ZtNiT6jbw+JVcbEi3UQgF7mMmkrgfL4mfchOwXtWSHKTSSPnwoJWJfXYa0Vy1n8NElWNTGAqoWFw==}
engines: {node: '>= 10'}
@@ -993,15 +904,6 @@ packages:
dev: false
optional: true
/@next/swc-linux-arm64-gnu/13.0.3:
resolution: {integrity: sha512-3Z4A8JkuGWpMVbUhUPQInK/SLY+kijTT78Q/NZCrhLlyvwrVxaQALJNlXzxDLraUgv4oVH0Wz/FIw1W9PUUhxA==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
requiresBuild: true
dev: false
optional: true
/@next/swc-linux-arm64-musl/13.0.0:
resolution: {integrity: sha512-SnMH9ngI+ipGh3kqQ8+mDtWunirwmhQnQeZkEq9e/9Xsgjf04OetqrqRHKM1HmJtG2qMUJbyXFJ0F81TPuT+3g==}
engines: {node: '>= 10'}
@@ -1011,15 +913,6 @@ packages:
dev: false
optional: true
/@next/swc-linux-arm64-musl/13.0.3:
resolution: {integrity: sha512-MoYe9SM40UaunTjC+01c9OILLH3uSoeri58kDMu3KF/EFEvn1LZ6ODeDj+SLGlAc95wn46hrRJS2BPmDDE+jFQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
requiresBuild: true
dev: false
optional: true
/@next/swc-linux-x64-gnu/13.0.0:
resolution: {integrity: sha512-VSQwTX9EmdbotArtA1J67X8964oQfe0xHb32x4tu+JqTR+wOHyG6wGzPMdXH2oKAp6rdd7BzqxUXXf0J+ypHlw==}
engines: {node: '>= 10'}
@@ -1029,15 +922,6 @@ packages:
dev: false
optional: true
/@next/swc-linux-x64-gnu/13.0.3:
resolution: {integrity: sha512-z22T5WGnRanjLMXdF0NaNjSpBlEzzY43t5Ysp3nW1oI6gOkub6WdQNZeHIY7A2JwkgSWZmtjLtf+Fzzz38LHeQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
requiresBuild: true
dev: false
optional: true
/@next/swc-linux-x64-musl/13.0.0:
resolution: {integrity: sha512-xBCP0nnpO0q4tsytXkvIwWFINtbFRyVY5gxa1zB0vlFtqYR9lNhrOwH3CBrks3kkeaePOXd611+8sjdUtrLnXA==}
engines: {node: '>= 10'}
@@ -1047,15 +931,6 @@ packages:
dev: false
optional: true
/@next/swc-linux-x64-musl/13.0.3:
resolution: {integrity: sha512-ZOMT7zjBFmkusAtr47k8xs/oTLsNlTH6xvYb+iux7yly2hZGwhfBLzPGBsbeMZukZ96IphJTagT+C033s6LNVA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
requiresBuild: true
dev: false
optional: true
/@next/swc-win32-arm64-msvc/13.0.0:
resolution: {integrity: sha512-NutwDafqhGxqPj/eiUixJq9ImS/0sgx6gqlD7jRndCvQ2Q8AvDdu1+xKcGWGNnhcDsNM/n1avf1e62OG1GaqJg==}
engines: {node: '>= 10'}
@@ -1065,15 +940,6 @@ packages:
dev: false
optional: true
/@next/swc-win32-arm64-msvc/13.0.3:
resolution: {integrity: sha512-Q4BM16Djl+Oah9UdGrvjFYgoftYB2jNd+rtRGPX5Mmxo09Ry/KiLbOZnoUyoIxKc1xPyfqMXuaVsAFQLYs0KEQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
requiresBuild: true
dev: false
optional: true
/@next/swc-win32-ia32-msvc/13.0.0:
resolution: {integrity: sha512-zNaxaO+Kl/xNz02E9QlcVz0pT4MjkXGDLb25qxtAzyJL15aU0+VjjbIZAYWctG59dvggNIUNDWgoBeVTKB9xLg==}
engines: {node: '>= 10'}
@@ -1083,15 +949,6 @@ packages:
dev: false
optional: true
/@next/swc-win32-ia32-msvc/13.0.3:
resolution: {integrity: sha512-Sa8yGkNeRUsic8Qjf7MLIAfP0p0+einK/wIqJ8UO1y76j+8rRQu42AMs5H4Ax1fm9GEYq6I8njHtY59TVpTtGQ==}
engines: {node: '>= 10'}
cpu: [ia32]
os: [win32]
requiresBuild: true
dev: false
optional: true
/@next/swc-win32-x64-msvc/13.0.0:
resolution: {integrity: sha512-FFOGGWwTCRMu9W7MF496Urefxtuo2lttxF1vwS+1rIRsKvuLrWhVaVTj3T8sf2EBL6gtJbmh4TYlizS+obnGKA==}
engines: {node: '>= 10'}
@@ -1101,15 +958,6 @@ packages:
dev: false
optional: true
/@next/swc-win32-x64-msvc/13.0.3:
resolution: {integrity: sha512-IAptmSqA7k4tQzaw2NAkoEjj3+Dz9ceuvlEHwYh770MMDL4V0ku2m+UHrmn5HUCEDHhgwwjg2nyf6728q2jr1w==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
requiresBuild: true
dev: false
optional: true
/@nodelib/fs.scandir/2.1.5:
resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
engines: {node: '>= 8'}
@@ -1269,6 +1117,7 @@ packages:
/@types/node/18.11.9:
resolution: {integrity: sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==}
dev: false
/@types/node/18.8.3:
resolution: {integrity: sha512-0os9vz6BpGwxGe9LOhgP/ncvYN5Tx1fNcd2TM3rD/aCGBkysb+ZWpXEocG24h6ZzOi13+VB8HndAQFezsSOw1w==}
@@ -4475,51 +4324,6 @@ packages:
- babel-plugin-macros
dev: false
/next/13.0.3_biqbaboplfbrettd7655fr4n2y:
resolution: {integrity: sha512-rFQeepcenRxKzeKlh1CsmEnxsJwhIERtbUjmYnKZyDInZsU06lvaGw5DT44rlNp1Rv2MT/e9vffZ8vK+ytwXHA==}
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.3
'@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.3
'@next/swc-android-arm64': 13.0.3
'@next/swc-darwin-arm64': 13.0.3
'@next/swc-darwin-x64': 13.0.3
'@next/swc-freebsd-x64': 13.0.3
'@next/swc-linux-arm-gnueabihf': 13.0.3
'@next/swc-linux-arm64-gnu': 13.0.3
'@next/swc-linux-arm64-musl': 13.0.3
'@next/swc-linux-x64-gnu': 13.0.3
'@next/swc-linux-x64-musl': 13.0.3
'@next/swc-win32-arm64-msvc': 13.0.3
'@next/swc-win32-ia32-msvc': 13.0.3
'@next/swc-win32-x64-msvc': 13.0.3
transitivePeerDependencies:
- '@babel/core'
- babel-plugin-macros
dev: false
/node-releases/2.0.6:
resolution: {integrity: sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==}