react-gravity-form

React Gravityform

This module includes a react component for dropping Gravity Forms from your Wordpress site into your react applications.

Installation

$ npm install --save react-gravity-form

Backend

Make sure to create a custom GF endpoint to fetch the form. See example

Usage

The GravityForm Component

Import component:

import GravityForm from "react-gravity-form";

Include the component anywhere inside your own components:

<GravityForm
	backendUrl="https://www.example.com/wp-json/glamrock/v1/gf/forms/1"
	formID="1"
	onChange={someFunction} // optional - keep all entered values as parameter
	onSubmitSuccess={someFunction} // optional - calls after form has been submitted successfully
	onError={handlerFunction} // optional - fires on GF error (gform_validation hook)
	styledComponents={{Button, Loading, Input...}} // optional
	populatedFields={{parameterName: "Value"}}
	jumpToConfirmation={false} // optional, default is equal to true
	submitComponent={Component} // optional - pass your <Component/> (like loading, another button...) to render in front of the submit button
	getParams={{}} // optional - pass an Object with your params to send the GF request with query string included
/>

Custom component

import ComponentName from 'ComponentName';

...

<GravityForm
  ...
  customComponents={{
    3: ComponentName,
  }}
/>

File upload - Dropzone

• To use a dropzone inside your file upload field you have to add a dropzone class name in an Appearance tab of the field
• To change the dropzone text pass it as a prop:

<GravityForm dropzoneText="Drag here or browse to upload" {...props} />

DatePicker

If Date Input Type is datepicker we use a React DatePicker module. If you want to pass your own props to the component use gform_pre_render hook and pass this options using datepickerOptions key. Example:

<?php
add_filter( 'gform_pre_render', 'adjust_date_field' );
function adjust_date_field($form){
	foreach( $form['fields'] as &$field )  {
					if ( $field->type == 'date' ) {
						$field['datepickerOptions'] = array(
          		'minDate' => date("Y/m/d"),
							'dateFormat' => 'MM/dd/yyy'
        		);
					}
	}
	return $form;
}

Change validation messages from backend

Y

<?php
add_filter( 'gform_pre_render', 'change_error_messages' );
function change_error_messages( $form ) {

		function setErrorMsg($fields, $customMessage) {
			$errorMgs = [
							'custom' => $customMessage,
							'required' => esc_html__('This field is required', 'gravityforms')
			];

			if($fields === 'required') {
				return $errorMgs;
			} else {
				$data = [];
				foreach ($fields as $fieldName) {
					$data[$fieldName] = $fieldName === 'mismatch' ? esc_html__('Mismatch', 'gravityforms') : esc_html__('Enter a valid ' . $fieldName, 'gravityforms');
				}
				return array_merge($errorMgs, $data);
			}
		}

		foreach( $form['fields'] as &$field )  {
			switch ($field['type']) {
				case 'date':
					$field['errorMessage'] = setErrorMsg(['date', 'month', 'year'], $field['errorMessage']);
					break;
				case 'email':
					$field['errorMessage'] = setErrorMsg(['email', 'mismatch'], $field['errorMessage']);
					break;
				default:
					$field['errorMessage'] = setErrorMsg('required',  $field['errorMessage']);
			}
		}
		return $form;
	}

Roadmap

• Extended the validation functionality with validating attribute values (for example min and max amounts.
• Allow fields to be prepopulated