react-gravity-form

    1.0.12 • Public • Published

    React Gravityform

    Version

    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

    Install

    npm i react-gravity-form

    DownloadsWeekly Downloads

    188

    Version

    1.0.12

    License

    ISC

    Unpacked Size

    535 kB

    Total Files

    65

    Last publish

    Collaborators

    • gohike.nl