react-gravity-form
v1.1.5
Published
A component for including Gravity Forms on React apps via the Wordpress API
Downloads
1,941
Maintainers
Readme
React Gravityform
This module includes a react component for dropping Gravity Forms from your Wordpress site into your react applications. If you are considering using this package please use the new next-gravity-forms package since this one will be deprecated in the near feature.
Installation
$ npm install --save react-gravity-form
testing
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;
}
The Date Picker
functionality in our form utilizes the react-datepicker
package. Please note that this package does not include default styles. To ensure proper styling of the date picker, you must either provide your own custom styles or import the default styles from the package. To use the default styles, include the following import statement in your code:
import "react-datepicker/dist/react-datepicker.css";
Captcha
We use recaptcha package
To make it work pass sitekey
as property to GravityForm component
confirmation redirects
When you configure a confirmation redirect to a url or page GF will redirect the submission api call to that page thus causing the submission to fail. you can fix this by adding the following snippit to your wordpress theme.
add_filter( 'rest_post_dispatch', function ( $response, $server, $request ) {
if ( $response->get_status() !== 200
|| $request->get_method() !== 'POST'
|| empty( $request['form_id'] )
|| $request->get_route() !== "/gf/v2/forms/{$request['form_id']}/submissions"
) {
return $response;
}
$headers = $response->get_headers();
unset( $headers['Location'] );
$response->set_headers( $headers );
return $response;
}, 10, 3 );
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