FormPress: Open Source form builder which lets you safely collect data through custom forms

Related tags

Form Logic FormPress
Overview

FPLogo

Open Source Form Builder With Safe Data Collection

FormPress is an innovative, and open source form builder which lets you safely collect data through custom forms. Awesome!

Features

  • Simple yet modern UI
  • Drag and drop elements
  • File submission

Technologies

FormPress is a combination of;

  • node.js - the ubiquitous JS framework for backend chores
  • Express - convenient Node.js web app framework
  • React - quite popular JS library for the frontend
  • MySQL - for the database management

Installation

Docker

Deployment of FormPress is fairly easy. So as to create the required images and run the containers:

cd formpress
docker-compose up

And that's it. To verify that the process ran smoothly, in your browser, please navigate to:

http://localhost:3000

Environment Variables

To get the full experience of FormPress in terms of its features, a number of environment variables has to be set. Nevertheless, the app will run just fine but with fewer features.

Environment variables are added by adding lines to .env file in formpress root directory. Open .env file (if it does not exist, you can create one) with your favourite text editor and add the following lines:

1. JSON Web Token

This variable is essential for the login. It can be set to anything, in this example we've set it to SOMESUPERHARDTOGUESSSECRET. Seriously.

JWT_SECRET=SOMESUPERHARDTOGUESSSECRET

2. SendGrid

For the time being, FormPress uses SendGrid fot the mail delivery.

SENDGRID_API_KEY=SENDGRIDAPIKEY

Features disabled if this variable is unset:

  • Verification e-mail during sign-up
  • Password reset e-mail
  • Submission notification e-mail to the form owner

3. Google Service Account Credentials

This variable is the path to the local OAuth2 credentials file. This is required to authenticate Google Cloud Platform.

GOOGLE_SERVICE_ACCOUNT_CREDENTIALS=base64encodedserviceaccountjsonfile

Features disabled if this variable is unset:

  • File upload element in forms

4. Google Service Client ID

FormPress login page offers Google Sign-In as an alternative (which will be discontinued as of March 31, 2023.)

GOOGLE_CREDENTIALS_CLIENT_ID=googleLoginClientID

Features disabled if this variable is unset:

  • Google Sign-In

5. File Upload Bucket

File uploads in forms are stored in Google Cloud Storage. This variable is required for

FILE_UPLOAD_BUCKET=BUCKET

Features disabled if this variable is unset:

  • File upload

6. Admin Account Credentials

These are the environment variables for admin account as the name suggests.

ADMINEMAIL=someid
ADMINPASSWORD=somepassword

Unless these variables are set, default credentials for the initial admin account will be:

License

FormPress is licensed under GPLv3

A form input builder and validator for React JS

formsy-react A form input builder and validator for React. Quick Start API 1.x API Background christianalfoni wrote an article on forms and validation

Formsy 736 Jan 14, 2022
A bare minimal React form library for quick & simple forms.

React library using React Hooks to build forms & let you switch in & out Bootstrap 4 styling. React Bare Forms aka RBF aims to be the easiest to use f

Joe Gasewicz 17 Nov 8, 2021
React Hook Form Validation example with react-hook-form 7 and Bootstrap 4

React Hook Form Validation example with react-hook-form 7 and Bootstrap 4 Project setup In the project directory, you can run: npm install # or yarn i

JS-IT 3 Nov 20, 2021
This Login Form made using React hooks , React Js , Css, Json. This form have 3 inputs, it also validate those inputs & it also having length limitations.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Yogesh Sharma 0 Jan 3, 2022
The most compact reactive form controller (including Validation) that you'll ever see.

Svelte Use Form A svelte form library that is easy to use and has no boilerplate. It helps you control and validate forms and their fields and check o

Noah Versace Salvi 106 Jan 11, 2022
Clone this folder to your react app. This will help you with generic form validations.

Clone this folder to your react app. This will help you with generic form validations.

Justin K Joseph 7 Jan 5, 2022
React library for rendering forms.

Data Driven Forms is a React library used for rendering and managing forms with a lot of provided features based on React Final Form. ❓ Why to use Dat

Data driven forms 170 Jan 14, 2022
A simple and easy way to control forms in React using the React Context API

A simple and easy way to control forms in React using the React Context API Getting Started Install With npm npm install --save formcat With yarn yar

Guilherme Louro 109 Jan 14, 2022
Build forms in React, without the tears 😭

Build forms in React, without the tears. Visit https://formik.org to get started with Formik. Organizations and projects using Formik List of organiza

Formium 29.4k Jan 14, 2022
📋 React Hooks for forms validation (Web + React Native)

Performant, flexible and extensible forms with easy to use validation. English | 繁中 | 简中 | 日本語 | 한국어 | Français | Italiano | Português | Español | Рус

React Hook Form 25.5k Jan 20, 2022
A React component for building Web forms from JSON Schema.

react-jsonschema-form A simple React component capable of using JSON Schema to declaratively build and customize web forms. Explore the docs » View Pl

null 11k Jan 13, 2022
A React library for building forms from any schema.

A set of React libraries for building forms from every schema.

Vazco 1.5k Jan 18, 2022
Zero-Configuration Reactive forms for Svelte

Formula + Beaker Δ→ Reactive Forms for Svelte Documentation Changelog svelte-formula is a Library for use with Svelte that super-charges your ability

Tane Piper 102 Jan 2, 2022
Simply create a forms, without having to write state management logic on your own.

Create React forms just with a pure JSX and let the react-standalone-form manage its state for you. A themeable form library based on Context API with a selection of user friendly inputs and wide customization abilities to match your design and functionality.

Michał Kokociński 31 Jan 10, 2022
Country / region React select boxes for your forms.

react-country-region-selector About Features Gotchas Demo Installation Usage List of component options Command-line Changelog Tests Thanks! License (s

country-regions 245 Jan 7, 2022
Handling forms in React Native using Formik and Yup.

##Handling forms in React Native using Formik and Yup. Usage # install dependencies yarn install # run bundler yarn run serve # run on Android devic

Rômulo Gadelha 1 Jul 8, 2021
Reactive forms for react and react native, using hooks and [email protected]

Reactive forms for react and react native, using hooks and [email protected] Installation: npm install -s react-fluid-form mobx mobx-react yup lodash // or: yarn

Misael dos Santos 6 Dec 22, 2021
A dynamic form component for react using JSON-Schema.

ATTENTION! THIS PROJECT IS NO LONGER ACTIVE. A maintained fork can be found at react-json-editor (h/t @ismaelga). plexus-form A dynamic form component

Department of Applied Mathematics, RSPE, ANU 133 Jan 28, 2021
🏁 High performance subscription-based form state management for React

You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of React Final Form.

Final Form 6.8k Jan 14, 2022