formzillion / formzillion.com

The open-source form infrastructure for everyone

Formzillion

The open-source form infrastructure for everyone.

Technologies Used

1. NextJS - Frontend & Backend Components
2. React - Frontend & Backend Components
3. TailwindCSS - Atomic CSS Framework
4. Postgres - Storage
5. Supabase Auth - Authentication
6. React Hook Form - Forms
7. Zod - Schema Validation
8. Tremor - Charts & Dashboard
9. Stripe - Billing & Invoice
10. Resend - Transactional Mails
11. Convertkit/Sendgrid - Marketing Mails
12. Vercel - Hosting
13. TurboRepo - Mono repository administration

Local Setup

1. Clone the code from the zs-website repository

git clone https://github.com/formzillion/formzillion.com.git

2. Install node modules using pnpm in the root folder

pnpm install

3. Add the following envs in .env file

SENDGRID_API_KEY=
RESEND_API_KEY=
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
LOCAL_AUTH_URL=

4. Start the dev server

pnpm run dev

This will start all the apps like website, webapp and docs. If you wanted to run only one of that use the following command.

pnpm run dev --filter=webapp

formzillion.com's Issues

Add a features section to website

Redesign the alignment for navbar

Add a resources dropdown
align the github stars to right

[FOR-32] Features page redesign for spam filtering page

null

_FOR-32

[FOR-37] Add a 'Not Found' page for non-existent or error pages.

null

_FOR-37

Redesign a footer section

Working on ConvertKit Integration

Integrate your forms with ConvertKit. Seamlessly integrate your forms to effortlessly add new submissions to your mailing lists. Deliver personalized email campaigns and cultivate meaningful connections with your subscribers.

[FZ-38] Formzillion CLI

_{From SyncLinear.com | FZ-38}

[FOR-31] Change the footer link and text.

Change the redirection url in the footer of [formId]/settings/thank-you-page to "[docs-domain]/features/thank-you-page" and also url text to "Thank you page". Change the page title to "Thank you page"

_FOR-31

Docs: Download the Spam Protection images assets

Currently the image under the spam protection are displayed using external urls

Webhooks Integration

By using webhooks, you can establish real-time communication between your forms and other systems or applications. This opens up endless possibilities for integrating with custom-built solutions, databases, CRMs, or any other external services you rely on. Automate data synchronization and ensure a seamless flow of information across platforms.

https://docs.formzillion.com/integrations/webhooks

[FZ-40] Create a schedule a call using a cal.com

Need to add "Schedule call" CTA button in the https://formzillion.com home page hero section to this meeting invite link.

https://cal.com/thirunavukkarasu/formzillion-demo

/* First make sure that you have installed the package */

/* If you are using yarn */
// yarn add @calcom/embed-react

/* If you are using npm */
// npm install @calcom/embed-react

import Cal, { getCalApi } from "@calcom/embed-react";
import { useEffect } from "react";
function MyComponent() {
  useEffect(()=>{
    (async function () {
      const cal = await getCalApi();
      cal("ui", {"styles":{"branding":{"brandColor":"#000000"}},"hideEventTypeDetails":false});
    })();
  }, [])
  return <Cal calLink="thirunavukkarasu/formzillion-demo" style={{width:"100%",height:"100%",overflow:"scroll"}} />;
};

_{From SyncLinear.com | FZ-40}

Add ZOD Validation for ENV

Sendgrid Integration

Integrating your forms with SendGrid allows you to automate email notifications to your subscribers, clients, or team members. Deliver personalized messages, transactional emails, or follow-ups directly from your form submissions. Keep everyone informed and engaged effortlessly.

https://dev-docs.formzillion.com/integrations/sendgrid

Airtable Integration

Connect your forms to Airtable, a versatile cloud-based database tool. Automate the creation of new records in your Airtable bases directly from form submissions. Organize and manage your data efficiently, collaborate with team members, and gain valuable insights.

Create a confirmation modal for deleting a form & submissions

[FZ-48] Implement Formzillion Worker Code

_{From SyncLinear.com | FZ-48}

[FZ-47] Add Zod Validation for ENVs

_{From SyncLinear.com | FZ-47}

[FZ-42] Add SEO meta tags title, description & keywords for a website, app & docs

null

_FZ-42

Add Faq for pricing page

Fix search functionality for forms list

[FOR-36] Design a blog page

Design a blog page for the Formzillion which can help us to share the progress of the product.

_{From SyncLinear.com | FOR-36}

[FZ-41] Create a Formzillion playground

To explore the features of Formzillion if there is a playground app like Vercel 13 playground it will very easy and useful for the users.

https://app-dir.vercel.app/

_FZ-41

[FOR-33] Add Loading Skeletons for the formsList page

null

_FOR-33

Typeform Integration

With our Typeform integration, you can create dynamic and interactive forms and surveys. Capture form responses in real-time and trigger actions based on the submitted data. Automate follow-ups, segment your audience, or perform custom actions based on user input. Create engaging experiences that drive meaningful interactions.

Slack Integration

Slack is a messaging app for business that connects people to the information they need. By using slack, you can receive email notifications whenever a user submits a form on your website. This can be a useful way to stay informed about new submissions and respond to them quickly.

https://dev-docs.formzillion.com/integrations/slack

[FZ-43] Redesign a readme file

null

_FZ-43

Move platform page to a server component

[FZ-45] Add the Contributing Documentations

The Contributing Documentation is a set of guidelines and instructions that provide information on how developers and contributors can contribute to the Formzillion project.

_FZ-45

Change the formzillioin Layout

Create a design for integration page & sub pages

main page
banner section
integrations cards

slug pages:

Banner section
How to connect section
popular use cases section

[FZ-49] Replace Knex with Prisma Client in Worker

Since we have included the worker code inside formzillion.com itself now we can utilize the PrismaClient

_{From SyncLinear.com | FZ-49}

Settings going undefined

Update Team collaboaration documentation

Replace Knex with Prisma Client in Worker

Since we have included the worker code inside formzillion.com itself now we can utilize the PrismaClient

[FZ-39] Create See it in Action section

We have to create a "See it in Action" section below the Hero Section of the page.

Something similar to the Features section with tabbed layout, so that we have more than one usecase demo section. For example:

1. Personal Blog - Newsletter Form
2. Agency Website - Request Quotation Form
3. Agency Website - Contact Us Form

_{From SyncLinear.com | FZ-39}

Design fix for team settings page

Alternative pages for formspree, usebasin, formspark, GetForm, etc

Mailerlite Integration

Integrate your forms with Mailerlite, a feature-rich email marketing platform. Automatically add new form submissions to your mailing lists, send personalized email campaigns, and engage with your subscribers effortlessly. Nurture leads and build strong customer relationships with ease.

https://dev-docs.formzillion.com/integrations/mailerlite

Freshdesk Integration

Integrate your forms with Freshdesk, a popular customer support software. Automatically create support tickets or trigger specific actions based on form submissions. Streamline your support processes, provide timely responses, and ensure exceptional customer service.

Fix Navbar in responsive, Add a Disclosure button

Add the Documentation for the Convertkit Integration

Added Documentation for Convertkit Integration

https://docs.formzillion.com/integrations/automate-subscriber-addition-to-convertKit

[FOR-34] Add a videos/screenshot in the docs how to setup a spam filter

null

_FOR-34

[FOR-35] Design a 404 page for the website

null

_FOR-35

[FZ-44] Mailchimp Integration

Seamlessly integrate your forms with Mailchimp, a popular email marketing platform. Automatically add new form submissions to your mailing lists, segment your audience based on form responses, and nurture leads effectively. Maximize your marketing efforts with minimal manual intervention.

_FZ-44

Update the Intergrations Action Names in Sidemenu

Updated the Names for the Integration Sidemenu for Documentations

Get real time count for github stars & contributors

Add a How Formzillion Works section

Create a CTA section design

Add footer for cards in settings page & And add a documentation link in footer

Add the Local Development Guide under the Contributing Guide