Simply-react-forms NPM

simply-react-forms

Add Serverless forms to your React Application

Install

This library needs the tailwindcss stylesheet and react toastity to work

npm install --save simply-react-forms tailwindcss react-toastify

Usage

You'll need to register to Simply Forms.
Verify your email to create a project.
Inside the project you want, create a form. Here is we're you define the validations which is going to be required at client an server before the response of the form creates.
Download your config file which is required by Form Component.
🎉 Enjoy!

import { Form } from 'simply-react-forms'
import 'tailwindcss/dist/tailwind.min.css';
import 'react-toastify/dist/ReactToastify.css'
import { ToastContainer } from 'react-toastify'
import formConfig from './contact-form-config.json'

export default function App() {
  return (
    <>
      <Form {...formConfig} />
      <ToastContainer />
    </>
  )
}

Components

By now there's only one single Component which is a basic implementation for Simply Forms, if you wan't to contribute this project, feel free to do it, I'll appreciate it so much.

Form

This allow you to create a whole form (including validations) only passing a basic form config file (or passing all props required) and personalizing it.

import { Form } from 'simply-react-forms'
import 'tailwindcss/dist/tailwind.min.css';
import 'react-toastify/dist/ReactToastify.css'
import { ToastContainer } from 'react-toastify'
import formConfig from './contact-form-config.json'

export default function App() {
  return (
    <>
      <Form
        {...formConfig}
        title="Contact Us"
        message="Tell Us how We can help You"
        labels={{
          name: 'Name',
          message: 'Message'
        }}
        placeholders={{
          name: 'Elon Musk',
          message: 'Your problem here...'
        }}
        onCompleted={data => console.log(data)}
        onError={error => console.error(error)}
        button={{
          label: 'Send'
        }}
      />
      <ToastContainer />
    </>
  )
}

Properties

Name	Type	Description
projectID	String	ID from the project, you can find this in your project config at Simply Forms
formID	String	ID from the form, same as projectID, you can find it in your form config at Simply Forms
title	String	Display a simple title for your form
message	String	Be descriptive about what is the goal of respond to your form. Default: undefined
fields	Array	This is an array of objects with the configuration of every input which is going to be rendered on the form
labels	Object	Here you can set the input labels, by example: if You have a name field, the you have to pass a key name with the label as value. Default: {}
placeholders	Object	Same as labels. Default: {}
onCompleted	Func	This function will be called if the response is created successfully. Default: () => {}
onError	Func	And this function will be called if there's an error on response creation. Default: () => {}
errors	Object	By now, you can only set a general error for a field, so this works same as labels or placeholders. Default: {}
colors	Object	Here you can set the color of the title, message and label. Default: undefined
input	Object	Here you cant personalize the Input component like the background, color, border. Default: {}