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

1. You'll need to register to Simply Forms.
2. Verify your email to create a project.
3. 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.
4. Download your config file which is required by Form Component.
5. 🎉 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: {} |

License

MIT © Simply-Development