How to send data from Gatsby to Gravity Forms in Wordpress

#gatsby #graphql #wordpress

I have been struggling with this problem for around two weeks now. I am building a Jamstack application with Gatsby on the Frontend and WordPress on the backend and I wanted to use Gravity Forms for my form component since it's compatible with Graphql.

The right way to actually do this is with Netlify functions. You send a post request to your function and then your function sends a request to WordPress. This is actually how I would have preferred to do this but I just couldn't get my functions to work properly. I discovered this little hack after a lot of trials and I felt like sharing it out there. I am still working on getting my functions to work and would put up another article when it's done.

The first thing I would do to get Gravity forms to work with WordPress is to download the gatsby form component by rob marshall from https://github.com/robmarshall/gatsby-gravityforms-component/tree/master/src. I would download the whole folder and place it right into my component folder for my frontend and then just follow the instructions the readme file with getting the right graphql query for the component. With the form component in your folders. You can easily style them or use any design system(Material UI, Chakra UI, Rebass, etc) components to override the components there to give your forms a really nice look. You won't be able to do this if you install it as an NPM package and it ships the ugly barebones styles from WordPress.

Set up your environment variables. The document recommends that you just create a .env file and create a GATSBY_LAMBDA_ENDPOINT in the file. The problem with that is that gatsby will never read your endpoints on the client-side. To get Gatsby to read your endpoints you create your environment variables in the this structure: For Development, .env.development and For Production, .env.production. You can then define your variables and endpoints in those files.

The next thing I would do would be to create a route in wordpress. You do this in the functions.php file of the activated theme.

Just paste the code below to your functions.php

add_action( 'rest_api_init', 'form_submit_endpoint');

function form_submit_endpoint() {
    register_rest_route('formsubmit/v1', 'submit', array(
        'methods' => 'POST',
        'callback' => 'form_submit_func',
    ) );
}

function form_submit_func( WP_REST_Request $request ) {
    //echo('hello world');
    $data = (array) $request->get_params();
    $form = $data['formid'];
    $payload = $data['payload'];
    return GFAPI::submit_form($form, $payload);
}

You can then define your GATSBY_LAMBDA_ENPOINT to point to your wordpresssite/formsubmit/v1/submit and then pass those environment variables to the lambda of the form component and it works. You can then send form data directly from Gatsby to Wordpress.

You can always reach out if you have any questions and I would be more than glad to help you out.