@contensis/forms

Render Contensis Forms in your React projects.

Installation

Install with your project's preferred package manager

npm install --save @contensis/forms

yarn add --save @contensis/forms

Usage

Render a Contensis Form with React

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ContensisForm } from '@contensis/forms';

// Our React App
const App = () => {
  return (
    <div className="content">
      <ContensisForm
        apiUrl="https://api-{yourcms}.cloud.contensis.com"
        projectId="website"
        formId="contactForm" />
    </div>
  );
  // avoid CORS - omit apiUrl prop to make Forms API requests from your root domain (same as Delivery API requests)
};

const element = document.getElementById('root') as HTMLElement;
ReactDOM.createRoot(element).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

Customistion

All customisation options are available in the <ContensisForm> component props.

API

Specify which Form to request from the Forms API

prop	required	comments
apiUrl		The root url for clients to access the Forms API. Omit this prop if your app will be deployed to Contensis Cloud and you currently use a reverse proxy to make requests to the Delivery API.
formId	Y	The API id of the form to render
language		The language variation of the form to render
projectId	Y	The API id of the project containing the form to render
versionStatus		Render the 'latest' or 'published' version of the form (default 'published')

Event Handlers

Handle or override specific form data and events

prop	required	comments
onLoadError		Called when there has been a problem loading the form content type
onPopulate		Populate the form with your own custom default values
onSubmit		Call your own custom actions when a user has completed the form
onSubmitError		Called when there has been a problem submitting a user's completed form
onSubmitSuccess		Call your own custom actions when a user has submitted a form successfully

Render States

You can override built-in fallback components to render when the form is in a particular state

prop	required	comments
disabled		Component to render when the Contensis Form is not enabled render
error		Component to render when the Contensis Form could not be retrieved from the API
loading		Component to render when the Contensis Form is loading

Example project

You try this out with the React example project