A plug and play component for parsing GraphQL Gravity Form data. Outputs a component using BEM classes, meaning all you need to do is style it.
To be used alongside wp-graphql-gravity-forms (version 0.12.0 up).
Uses React Hook Forms under the hood for all that good state management.
either:
yarn add next-gravity-formsor
npm i next-gravity-formsAdd the env variable to your project: NEXT_PUBLIC_WORDPRESS_API_URL. Add your domain to it. i.e.
NEXT_PUBLIC_WORDPRESS_API_URL=https://www.YOURWPSITE.com/graphql.
This variable is called internally by the getGravityForm function.
Import the component and use it with the API function. Select the required form using its databaseId.
import GravityFormForm from "next-gravity-forms";
import { getGravityForm } from "next-gravity-forms/server";
const data = await getGravityForm(1);
return <GravityFormForm data={data} />;This package can be used with any React project. We just named it Next, because we use it with Next projects.
To allow it to be flexible, we have added a number of arguments to the main component.
const GravityFormForm = ({
data,
presetValues = () => {},
successCallback = () => {},
errorCallback = {},
navigate,
helperText = {}
customFormFields = {}
})
getGravityForm query.If you are wanting to use a provider like Stellate to cache your form queries, pass the Stellate URL to NEXT_PUBLIC_WORDPRESS_API_URL.
You will then need to pass in a clean URL for the form to submit. This can be passed in with NEXT_PUBLIC_WORDPRESS_FORM_SUBMIT_URL.
Note: If NEXT_PUBLIC_WORDPRESS_FORM_SUBMIT_URL is not passed in, it will fall back to NEXT_PUBLIC_WORDPRESS_API_URL.
Sometimes you will want to conditionally set default values, or pass in data to hidden fields. This could be values for a user ID, or a current page.
This is handled by the presetValues prop.
In addition, you need to pass your query parameters within this prop to make dynamically populating field work. Good to know that the query string takes priority over the field name parameter.
<GravityFormForm
data={form}
presetValues={{ ...queryParams, input_2: "My preset value" }}
/>In the above example input_2 corresponds to the 2nd field added in the WordPress Gravity Forms edit page. This value can be found by clicking on the field and looking at the top right just under Field Settings.
Since package uses some hardcoded strings, we implemented the way how to translate them to your preferable text.
helperText prop should be used to override it. You can find all possible strings here. You can handle your own translations by passing in different strings depending on what is needed, and they will be merged with the existing ones. Alternatively, you can pass an entire object with translations for all strings. See the example below:
<GravityFormForm
data={form}
helperText={{
errors: {
general: "There was a problem with your submission. Check errors",
leastOneField: "At least one field must be filled out.",
required: "Field is required.",
pattern: {
email: "The email address is invalid",
phone: "This is an invalid phone",
},
},
radio: {
otherChoice: "Other", // alternatively you can override only specific field, .i.e. otherChoice_3
},
}}
/>Having CORS issues?
Add the following snippet of code to your WordPress functions.php file.
Make sure to update the 'https://yourfrontendurl.com' to your actual frontend. With no trailing slash.
add_filter( 'graphql_response_headers_to_send', function( $headers ) {
return array_merge( $headers, [
'Access-Control-Allow-Origin' => 'https://yourfrontendurl.com',
'Access-Control-Allow-Methods' => 'POST, GET, OPTIONS, PUT, DELETE',
'Access-Control-Allow-Credentials' => 'true'
] );
} );On your WordPress backend within the Gravity Forms settings set up reCaptcha. Follow the instructions provided by Gravity Forms.
To enable file uploading functionality, your GraphQL server must support the Upload scalar type. In WordPress, this can be easily achieved by installing the WP GraphQL Upload plugin.
If you attempt to add a file upload field to your form without support for the Upload scalar type, your API will return an error. Ensure that your GraphQL server is properly configured to handle file uploads by integrating the WP GraphQL Upload plugin or another equivalent solution that provides support for the Upload type.
When enabling the Enable Multi-File Upload option, it's important to note that files are not uploaded immediately upon being dropped into the upload area. Instead, all files are uploaded together during the form submission process. However, be aware that this can introduce a delay, particularly when users upload large files. Might be good to show spinner while uploading.
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";Additionally, our component allows you to customize the settings of the DatePicker through the helperFieldsSettings prop. This is particularly useful for setting constraints like the maximum year. For instance, to set the maximum year to 2024, you would configure the prop as follows:
<GravityFormForm
data={form}
helperFieldsSettings={{
date: {
dateMaxYear: 2024
},
}}
/>For a complete list of customizable options for the DatePicker, refer to the fieldsSettings.js file available in our repository: fieldsSettings.js.
As you probably know, the Number field has an option to set the currency format. By default, we support only EUR, USD, and GBP currencies. If you would like to add a custom currency, other than set it by gform_currency filter, you also need to pass it as a prop using the helperFieldsSettings prop, as follows:
<GravityFormForm
data={form}
helperFieldsSettings={{
number: {
currencies: {
HKD: {
symbol_left: "HK$",
symbol_right: "",
symbol_padding: "",
thousand_separator: ",",
decimal_separator: ".",
decimals: 2,
}
}
},
}}
/>We expose several react-hook-form methods for flexible form management.
setError(name, error) - Set an error for a field.reset() - Reset the form.getValues(name) - Get the value of a field or all values.setValue(name, value) - Set the value of a field.watch(name) - Watch for changes to a field.const GravityForm = ({ data }) => {
const formRef = useRef();
const handleReset = () => formRef.current.reset();
const handleSetValue = () =>
formRef.current.setValue("exampleField", "new value");
return (
<div>
<GravityFormForm ref={formRef} data={data} />
<button onClick={handleReset}>Reset Form</button>
<button onClick={handleSetValue}>Set Field Value</button>
</div>
);
};
export default GravityForm;Sometimes you may need to render custom markup for specific fields. You can achieve this by using the customFormFields property. See the example below:
<GravityFormForm data={form} customFormFields={{ 1: CustomInputComponent }} />By specifying the field ID that you want to override, you can pass your custom component. Note that your custom component must utilize the methods provided by react-hook-form, as it is registered using the Controller component.
Example of your custom component:
const CustomInputComponent = ({ value, onChange, onBlur, ...rest }) => {
return (
<div className="example">
<input
type="text"
value={value}
onChange={onChange}
onBlur={onBlur}
{...rest}
/>
</div>
);
};Take into account that your field must return the value in the same format as a default field.
Firstly, yes please! Any help would be great.
There are a few steps to get a dev enviroment set up.
You should now be able to run the example repo and see the dev form package running.
Currently whenever you make a change you will need to re-run yarn build. A hot-reload is yet to be added.
{all_fields} is not supported)