Merge branch 'main' of github.com:snoopForms/snoopforms

apps/formbricks-com/components/shared/MdxCTA.tsx

@@ -0,0 +1,35 @@
+import Button from "@/components/shared/Button";
+import { useRouter } from "next/router";
+import HeadingCentered from "./HeadingCentered";
+
+export default function CTA() {
+  const router = useRouter();
+  return (
+    <>
+      <div className="mx-auto py-16 lg:pt-24 lg:pb-40">
+        <p className="text-md text-brand-dark dark:text-brand-light font-semibold uppercase">
+          It&apos;s free & open-source
+        </p>
+        <p className="my-0 text-4xl font-semibold tracking-tight text-slate-800 dark:text-slate-100">
+          Try Formbricks right now!
+        </p>
+        <div className="mt-12 grid grid-cols-1 content-center md:grid-cols-2">
+          <div className="-mb-2 rounded-t-xl bg-gradient-to-br from-slate-300 to-slate-200 text-center text-gray-900 dark:from-slate-800 dark:to-slate-900 dark:text-slate-200 md:mb-0 md:ml-2.5 md:-mr-5 md:rounded-l-xl">
+            <h3 className="text-3xl font-bold">Self-hosted</h3>
+            <p className="mt-2 mb-4 dark:text-slate-400">Run locally with docker-compose.</p>
+            <Button variant="secondary" onClick={() => router.push("/docs")} className="mt-3 mb-8 md:mb-0">
+              Read docs
+            </Button>
+          </div>
+          <div className="rounded-xl bg-gradient-to-br from-slate-400 to-slate-300 pb-10 text-center text-gray-800 dark:from-slate-800 dark:to-slate-700 dark:text-slate-200">
+            <h3 className="text-3xl font-bold">Cloud</h3>
+            <p className="mt-2 mb-4 dark:text-slate-400">Use our free managed service.</p>
+            <Button variant="secondary" onClick={() => router.push("/get-started")} className="mt-3">
+              Get started
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

apps/formbricks-com/components/shared/MdxTryItCTA.tsx

@@ -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-800 px-8 text-gray-100 ">
+        <div className="flex h-20 w-full items-center justify-between rounded-lg bg-slate-300 px-8 text-slate-700 dark:bg-slate-800 dark:text-slate-200 ">
           <p>npm install @formbricks/react</p>
           <button onClick={() => navigator.clipboard.writeText("npm install @formbricks/react")}>
             <DocumentDuplicateIcon className="h-8 w-8" />

apps/formbricks-com/pages/blog/weekly-update-181122/index.mdx

@@ -0,0 +1,93 @@
+import Image from "next/image";
+import LayoutMdx from "@/components/shared/LayoutMdx";
+import Mockup from "./demo mockup for formbricks hq open source form and survey tool.png";
+import NewLogo from "./formbricks new logo mockup community feedback.png";
+import Community from "./community feedback logo and name.png";
+import Storybook from "./storybook for formbricks survey form builder.png";
+import HeaderImage from "./weeklyupdate.png";
+
+export const meta = {
+  title: "Weekly Summary - 18th Nov 2022",
+  description:
+    "Every week, we’ll share an update about all things Formbricks. We’ll look at what we did on the product end as well as what’s new in the community 👋 Let’s get going!",
+  date: "2022-11-18",
+};
+
+_Every week, we’ll share an update about all things Formbricks. We’ll look at what we did on the product end as well as what’s new in the community 👋 Let’s get going!_
+
+<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />
+
+# Product
+
+### Formbricks React
+
+Matti has been working on the first release of the Formbricks React Library. Here are the objectives:
+
+- Make it as easy as possible to build forms in react even with more complex components like ratings or color pickers.
+- Allow component-based approach to building forms like so:
+
+```jsx
+<TextArea name="firstname" label="What's your first name?" validation="required” />
+```
+
+- Keep rerenders at a minimum
+- Keep package size at a minimum while offering more than HTML inputs out of the box
+
+**Challenge**: Tree-shaking has been tricky. We want to offer input types like sliders and date pickers out of the box. To keep the library performant these components should only be included in the build when they are actually used. The tree-shaking has been tricky, but Matti made good progress yesterday.
+
+### Formbricks “HQ”
+
+Since down the line there will be apps running on our platform we decided to call our own application “Formbricks HQ”. Here is a demo of the first iteration, it’ll look like this:
+
+<Image
+  src={Mockup}
+  alt="Mockup of Formbricks HQ to manage form and survey data self hosted open source"
+  className="rounded-lg"
+/>
+
+**In the first version of the HQ you will be able to:**
+
+- Receive form submissions from any form
+- View & manage submissions
+- Webhook submission data where you need it
+- Email submission data where you need it
+
+### SEO
+
+We have created 5 long-taily SEO pages to drive organic traffic to Formbricks in the medium-term. It can take a couple of months to rank high and we want to be up there when the public beta is ready 🚀
+
+If you’re curious you find them [here](/best-react-form-library-2023), [here](/vs-formspree), [here](/vs-google-forms), [here](/vs-ohmyform) and [here](/vs-react-hook-form). We added them to the sitemap but do not yet link to them on our website because the product isn’t there yet.
+
+##
+
+# Community
+
+Shoutout to [@Ari](https://twitter.com/aridutilh) from buildersgroop and Dylan from Canu for sharing feedback on the Logo:
+
+<Image src={Community} alt="Screenshot from Discord with Community Feedback" className="rounded-lg" />
+
+We heard you and Matti and his wife made it their weekend project to come up with a slicker one:
+
+<Image src={NewLogo} alt="Formbricks new and old logo" className="rounded-lg" />
+
+### Exploring Storybook
+
+Johannes is exploring Storybook. In the medium-term we want to provide you guys with a well-documented set of UI components to build your form solutions faster.
+
+Additionally, it will make community contributions a lot easier and more valuable to the rest of the community since the look & feel will be consistent.
+
+Thirdly, in the long-term we want to encourage other builders to build apps to cover specific use cases around working with qualitative data on top of Formbricks.
+
+Setting things up correctly now will save everyone time down the line.
+
+<Image src={Storybook} alt="Formbricks new and old logo" className="rounded-lg" />
+
+### Twitter
+
+We started being more active on Twitter again. [Say Hi 👋](https://twitter.com/formbricks)
+
+Let’s hope Elon doesn’t break it too soon.
+
+## Have a great weekend!
+
+export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;

apps/formbricks-com/pages/vs-formspree.mdx

@@ -2,7 +2,7 @@ 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 MdxCTA from "@/components/shared/MdxCTA.tsx";
 import HeaderImage from "/images/SEO/Formspree open source alternative vs Formbricks FormHQ comparison post for form backend as a service.png";
 
 export const meta = {
@@ -121,6 +121,6 @@ Data ownership is not only important since GDPR, CCPA, HIPAA and other data priv
 
 As of now, Formspree offers a more comprehensive set of features. However, for the really useful functionality you have to pay $18 / month. Formbricks on the other hand is the new kid on the blog with many cool features in development. The option to easily self-host makes the difference for many engineers.
 
-<MdxTryItCTA />
+<MdxCTA />
 
 export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;

apps/formbricks-com/pages/vs-google-forms.mdx

@@ -0,0 +1,232 @@
+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 MdxCTA from "@/components/shared/MdxCTA.tsx";
+import HeaderImage from "/images/SEO/Google Forms Open Source Alternative Comparison with Formbricks Open-source Online Form Builder.png";
+import WhyGoogle from "/images/SEO/GoogleForms GDPR compliant for EU company open source self-hosting alternative.png";
+import ControllerVsProcessor from "/images/SEO/Data Controller vs Data Processor Overview for open source forms and surveys.png";
+import LemonadeExample from "/images/SEO/Example Lemonade Radio Field with Image in React Library Open Source.PNG";
+import GoogleExample from "/images/SEO/Google Form Example Customize and make it comply with GDPR CCPA HIPAA open source alternative.png";
+import CrownGIF from "/images/SEO/who gets the crown of open source forms.gif";
+import HeaderAnimation from "@/components/shared/HeroAnimation.tsx";
+
+export const meta = {
+  title: "Google Forms Open Source Alternative",
+  description:
+    "Google Forms is among the most used form and survey solutions out there. However, the lack of data privacy and old-fashioned look and feel have people look for alternatives.",
+};
+
+_Google Forms is among the most used form and survey solutions out there. It’s native integration into Google Sheets makes it an obvious first choice to run surveys. However, the lack of data privacy and old-fashioned look and feel have people look for alternatives._
+
+<Image
+  src={HeaderImage}
+  alt="Google Forms open source alternative comparison Formbricks survey solution"
+  className="rounded-lg"
+/>
+
+When you’re looking for an alternative to Google Forms you usually have one of the following problems with it:
+
+- **Google Forms is not really GDPR compliant** so you need an alternative when you are an institution based in the EU or process data from EU citizens
+- **Google Forms looks and feels old** and you’d like an alternative which looks more like Typeform
+
+### How will we compare Google Forms vs Formbricks?
+
+To give you a full picture of how Google Forms and Formbricks compare, we will look at these three aspects:
+
+- Data Privacy
+- Features & Functionality
+- Look & Feel
+
+Let's dive in!
+
+<Image src={WhyGoogle} alt="Man facepalming because he sent out a Google Form" className="rounded-lg" />
+
+## Data Privacy
+
+<Callout title="No legal advice" type="note">
+  None of the information here is legal advice. Please consult with an expert before making your decision.
+</Callout>
+
+### Can I use Google Forms compliant with GDPR?
+
+The short answer is: With a lot of additional work you might but there is still legal risk attached to it.
+
+Here are all the measure you have to take to use Google forms when you are based in the EU or there is the possibility that EU citizens fill in one of your Google Forms:
+
+1. Before the Google Form is loaded on your page you need to **collect and document consent** from the visitors. Google always sets non-essential cookies and according to the European Court of Justice (Az. C-673/17) this requires consent. And,
+2. **Sign a Data Processing Agreement (DPA) with Google** because you are forwarding personal data to Google. This DPA has to include what user data Google stores, how long it stores this data, why it stores the data and what rights and obligations companies and Google have.
+3. **Update your Privacy Policy** to inform your respondents why you collect personal data via Google Forms, how long you want to store the data, which legal basis allows you to do so and that you have concluded an DPA agreement with Google for the data transfer
+4. **Check standard contractual clauses.** This is the tricky part because the European Court of Justice decided in July 2020 that the Privacy Shield is not active anymore. In simple terms, the Privacy Shield assured that data transfers between the EU and USA are legal. Without the Privacy Shiel it is your responsibility to prove that. This includes information about when you asked Google about the new standard contractual clauses, what the review of the standard contractual clauses revealed, why the review of the standard contractual clauses turned out the way it did, what type of data is involved (e.g. particularly sensitive data such as health data), which legal provisions apply in the third country - in this case the USA - and whether your respondents can use additional protection measures, such as SSL encryption.
+
+**Good luck 😊**
+
+<Image
+  src={ControllerVsProcessor}
+  alt="Information if you are a data controller or processor"
+  className="rounded-lg"
+/>
+
+### Why open-source **self-hosted** solutions are GDPR compliant
+
+Now, this obviously is a lot to take in. The good news is that **you don’t need any of it** with a self-hosted solution 🎉 Why not?
+
+It is a lot easier to comply with GDPR when you don’t forward your data to a different company or jurisdiction. If you hold your data on your own servers, all you have to do is:
+
+- Inform your respondents that you store their data and for how long
+- Allow them to request what data you have stored about them (an email address is enough)
+- And delete the data when they ask you to (e.g. also via email)
+
+You can cover all of this in a few sentences in your Privacy Policy.
+
+<Callout title="You are the data controller" type="note">
+  In all cases, when you create and share around a survey, you are the data controller. The form and survey
+  provider is only the data processor. This means that you are responsible to comply with the GDPR framework.
+</Callout>
+
+### Why open-source **EU-hosted** solutions are GDPR compliant
+
+If you don’t have the expertise or capacity to self-host a form and survey solution you can use one hosted within the European Union. This also takes out a lot of the complexity because the Privacy Shield issue is taken out of the picture.
+
+We’ve put together a guide on how you can create a form which is compliant with GDPR. Here is a short overview of your tasks:
+
+- Add the form & survey provider as a data processor to your Privacy Policy
+- Collect consent from the respondents with a separate checkbox
+- Link to your Privacy Policy to inform respondents how you’ll handle their data and what rights they have
+- For some tools you have to sign a DPA, here at Formbricks we include it in our Terms of Service to make sure you are covered :)
+
+That's about it! It's pretty straight forward an does not require a lot of additional work.
+
+##
+
+<HeaderAnimation />
+
+## Features & Functionality
+
+Let’s have a closer look at what you can do with Google Forms and Formbricks. Google Forms has been around for years but it has stayed pretty flat in what you can do with it. Formbricks is the new kid on the block with some features shipped and a lot more on the roadmap.
+
+Let’s go through it in detail:
+
+### Question Types
+
+| Question Types          | Google Forms | Formbricks |
+| ----------------------- | ------------ | ---------- |
+| Short Text              | ✅           | ✅         |
+| Long Text               | ✅           | ✅         |
+| Multiple Choice / Radio | ✅           | ✅         |
+| Checkbox                | ✅           | ✅         |
+| Dropdown / Select       | ✅           | ✅         |
+| File Upload             | ✅           | ✅         |
+| Linear Scale            | ✅           | ⚙️         |
+| Multiple Choice Grid    | ✅           | ⚙️         |
+| Checkbox Grid           | ✅           | ⚙️         |
+| Date                    | ✅           | ✅         |
+| Time                    | ✅           | ✅         |
+| Star Rating             | ❌           | ✅         |
+| NPS                     | ❌           | ✅         |
+| Toggle                  | ❌           | ✅         |
+| Payments                | ❌           | ⚙️         |
+| ⚙️ = in development     |              |            |
+
+### Working with your data
+
+Once your responses are in, you want to work with the qualitative data you gathered. Let’s see how Google Forms compares here with Formbricks:
+
+| Export to           | Google Forms | Formbricks |
+| ------------------- | ------------ | ---------- |
+| Google Sheets       | ✅           | ⚙️         |
+| Airtable            | ❌           | ⚙️         |
+| Webhook             | ❌           | ✅         |
+| Email               | ❌           | ✅         |
+| Zapier              | ❌           | ⚙️         |
+| n8n                 | ❌           | ⚙️         |
+| ⚙️ = in development |              |            |
+
+Google wants you to stay in their ecosystem of apps. If you’re familiar with Javascript you can write Google App Scripts to email your data somewhere after every submission.
+
+### Additional functionality
+
+Google brings along a few handy features to change and enhance the user experience. Formbricks is still early, in terms of additional functionality not a lot has been built yet.
+
+Let’s have a look:
+
+| Additional Features          | Google Forms | Formbricks |
+| ---------------------------- | ------------ | ---------- |
+| Turn into quiz               | ✅           | ❌         |
+| Send form data to respondent | ✅           | ✅         |
+| Allow changing form data     | ✅           | ⚙️         |
+| Progress bar                 | ✅           | ❌         |
+| Randomize questions          | ✅           | ❌         |
+| Show results                 | ✅           | ⚙️         |
+| Form Logic                   | ❌           | ⚙️         |
+| Forward to custom URL        | ❌           | ✅         |
+| Welcome & Thank You Page     | ❌           | ✅         |
+| Custom mail server           | ❌           | ⚙️         |
+| Custom mail templates        | ❌           | ⚙️         |
+| Schedule close date          | ❌           | ⚙️         |
+| Close on submission limit    | ❌           | ⚙️         |
+| Survey Templates             | ❌           | ⚙️         |
+| ⚙️ = in development          |              |            |
+
+<Image
+  src={LemonadeExample}
+  alt="Example of a conversion-optimized lead generation form from Lemonade"
+  className="rounded-lg"
+/>
+
+## Look & Feel
+
+Comparing look and feel in many cases comes down to taste. However, things like customizability are very good to compare. Let’s have a look at a standard Google Form, like we have seen many:
+
+<Image
+  src={GoogleExample}
+  alt="Screenshot of Customer Satisfaction Survey on Google Forms"
+  className="rounded-lg"
+/>
+
+On the plus side the Google Forms are very accessible: They’re rich in contrast and can be filled out just with a keyboard easily. Even less tech savy users would know what to do when they see the form. It is a very pragmatic design - if you respondents **have to** fill this out, it’ll get the job done!
+
+On the flip side this isn’t conversion-optimized. Multi-Step forms are possible to build but don’t have a great UX when you do so. You cannot add images in the options of radio buttons which is proven to drive up conversion significantly. It will always look like Google. It very much _feels_ like a form while it would be beneficial if it would feel more like an app.
+
+### Customizability
+
+To make your Google Form align more with your Corporate Design, you have a few options to do so. Here is a list of things you can change:
+
+- Fonts
+- Main Color
+- Header Image
+
+If you have your logo at hand and know how to place it in a 1200 x 400px image you are able to brand your survey with the header image.
+
+<Callout title="Visual Builder in development" type="note">
+  As of now, Formbricks only offer the opportunity to create forms with Code (React.js). The No Code builder
+  is planned to launch in Feburary 2023.
+</Callout>
+
+Formbricks offers two ways to create forms: Code and No Code. If you are willing and able to code your forms, you have maximum freedom to style them. You can import your own CSS stylesheet or use Tailwind CSS to style every pixel of it.
+
+[In our docs you'll find detailed information](/docs) on how to style your forms and surveys.
+
+<Image
+  src={CrownGIF}
+  alt="GIF from the Office showing who gets the crown of form and survey tools OS"
+  className="rounded-lg"
+/>
+
+## Overall Result: Who gets the form crown?
+
+All in all, Google Forms is a good option if you can be sure that no EU citizen will fill out your form and you want to collect data from a group of people which **has to** fill out your form.
+
+Formbricks on the other hand, at the current state of development, is only an option if you are able to code your own form or survey with React. If this is an option for you, we prepared an [in-depth comparison](/best-react-form-library-2023) of Formbricks React with other popular React libraries.
+
+If need to build your forms visually, we ask you for a little bit of patience. We plan to roll out the No Code editor early 2023.
+
+<Callout title="Looking for a Typeform Alternative?" type="note">
+  If you are looking for a Typeform alternative, we can highly recommend using Tally. Tally has a generous
+  free plan, can be used with GDPR compliance (it’s a Belgium startup) and will most likely server all your
+  needs. [Tally is great! 👏](https://tally.so)
+</Callout>
+
+<MdxCTA />
+
+export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;

apps/formbricks-com/pages/vs-ohmyform.mdx

@@ -2,7 +2,7 @@ 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 MdxCTA from "@/components/shared/MdxCTA.tsx";
 import HeaderImage from "/images/SEO/OhMyForm Typeform Alternative comparison Formbricks open source forms and survey library builder.png";
 
 export const meta = {
@@ -23,26 +23,50 @@ _OhMyForm always pops up when you’re looking for open source forms - it seems
 
 To answer the question of how good OhMyForms actually is, we tested it extensively. When you get it to run, it does a few things well. Here is an overview of what we liked and what we missed:
 
-| OhMyForm                               | Really Good | Decent | Potential to improve | Formbricks   |
+<<<<<<< HEAD
+| | OhMyForm | Formbricks |
+| -------------------------- | --------------- | ---------- |
+| Multi-Language Support | ✅ | ❌ |
+| Modern UI | 🟨 | ✅ |
+| 11 possible question types | 🟨 | 🟨 |
+| Editable start / end pages | 🟨 | ✅ |
+| Export Submissions | XLS, JSON & CSV | CSV |
+| Analytics | 🟨 | ❌ |
+| Embeddable Forms | ✅ | ❌ |
+| Forms API | 🟨 | ✅ |
+| Customizable Notifications | 🟨 | ⚙️ |
+| Web Hooks | ✅ | ✅ |
+| Modern Tech Stack | 🟨 | ✅ |
+| 3rd party integrations | ❌ | ⚙️ |
+| Email Responder | ❌ | ⚙️ |
+| Custom Mail Server | ❌ | ⚙️ |
+| Conditional Logic | ❌ | ⚙️ |
+| Self-hosting | ✅ | ✅ |
+| Documentation | ❌ | ✅ |
+| Last Feature shipped | Aug 2020 | Nov 2022 |
+=======
+| OhMyForm | Really Good | Decent | Potential to improve | Formbricks |
 | -------------------------------------- | ----------- | ------ | -------------------- | ------------ |
-| Multi-Language Support                 | ✅          |        |                      | ❌           |
-| Modern UI                              |             | 🟨     |                      | ✅           |
-| 11 possible question types             |             | 🟨     |                      | 🟨           |
-| Editable start / end pages             |             | 🟨     |                      | ✅           |
-| Export Submissions to XLS, JSON or CSV | ✅          |        |                      | only CSV     |
-| Analytics                              |             | 🟨     |                      | ❌           |
-| Embeddable Forms                       | ✅          |        |                      | ❌           |
-| Forms API                              |             | 🟨     |                      | ✅           |
-| Customizable Notifications             |             | 🟨     |                      | ⚙️           |
-| Web Hooks                              | ✅          |        |                      | ✅           |
-| Modern Tech Stack                      |             | 🟨     |                      | ✅           |
-| 3rd party integrations                 |             |        | ❌                   | ⚙️           |
-| Email Responder                        |             |        | ❌                   | ⚙️           |
-| Custom Mail Server                     |             |        | ❌                   | ⚙️           |
-| Conditional Logic                      |             |        | ❌                   | ⚙️           |
-| Self-hosting                           | ✅          |        |                      | ✅           |
-| Documentation                          |             |        | ❌                   | ✅           |
-| **Last Feature shipped**               | **2020**    |        |                      | **Nov 2022** |
+| Multi-Language Support | ✅ | | | ❌ |
+| Modern UI | | 🟨 | | ✅ |
+| 11 possible question types | | 🟨 | | 🟨 |
+| Editable start / end pages | | 🟨 | | ✅ |
+| Export Submissions to XLS, JSON or CSV | ✅ | | | only CSV |
+| Analytics | | 🟨 | | ❌ |
+| Embeddable Forms | ✅ | | | ❌ |
+| Forms API | | 🟨 | | ✅ |
+| Customizable Notifications | | 🟨 | | ⚙️ |
+| Web Hooks | ✅ | | | ✅ |
+| Modern Tech Stack | | 🟨 | | ✅ |
+| 3rd party integrations | | | ❌ | ⚙️ |
+| Email Responder | | | ❌ | ⚙️ |
+| Custom Mail Server | | | ❌ | ⚙️ |
+| Conditional Logic | | | ❌ | ⚙️ |
+| Self-hosting | ✅ | | | ✅ |
+| Documentation | | | ❌ | ✅ |
+| **Last Feature shipped** | **2020** | | | **Nov 2022** |
+
+> > > > > > > main
 
 <Callout title="Hobby project" type="note">
   OhMyForms is a hobby project and we are thankful for the team to develop and open source it 🤍 We in no way
@@ -84,6 +108,6 @@ On the flipside, the lack of documentation and community activity makes it quite
   want to dunk on OhMyForm and appreciate their work 🤍
 </Callout>
 
-<MdxTryItCTA />
+<MdxCTA />
 
 export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;