Reference to use with WP REST API

[eamaral92]

Hi!

I search a lot for some examples or reference to get the forms via REST for displaying with react, but i didn't found anything... Can someone help me with that?

[KaiP-598]

Hi @eamaral92 I am looking for some examples as well. After days of researching, seems like there is no reference on how to use with WP REST API at all. If you found a solution, could you please post it here?

I also have looked into other contact form plugins, but seems like none of them can be used with WP REST API... :(

[tlovett1]

This will be fixed soon guys. Sorry!

[KaiP-598]

@tlovett1 Thanks for the quick reply, I think what @eamaral92 and I want is something like a WP REST API request as http://website.com/wp-json/wp/v2/forms would return the forms in a JSON format :) I have tried to look in the the custom contact form plugin code, but as a new developer, I was not able to do much >.<

[eamaral92]

@tlovett1 Thanks for the quick reply to!

[luandro]

Any updates on this? Docs for use with wp-api is really needed. I'm relying on Rest API Console to point me to the available endpoints.

[lwhiteley]

tried to do a post when i embedded the form in the view using wp-api.

also had the settings set to post without user authenticated

got

{
  "error": "nonce",
  "success": false
}

any updates on how to use ccf with the wp-api ( full practical example.. need to be able to save form data from the view)

[Hrnkas]

You can always get the list of all routes under http://www.website.com/wp-json/. For CCF, you will want to use: http://www.website.com/wp-json/ccf/v1/forms/ to get the list of forms, and http://www.website.com/wp-json/ccf/v1/forms/349/submissions/ to get all the submissions for form with id 349.

[lwhiteley]

i want to do a post action from the client-side. hence the user clicks on submit and the form data is saved to the cms

[jamesryan-dev]

any update on this? 🤔 ❔❓ not too sure how to go about this ifimhonest 😓

[kopepasah]

I can confirm that currently wp-json/ccf/v1/forms and wp-json/ccf/v1/forms/<ID> do not return any data with WordPress 4.7.

Perhaps there is an update in the works?

[lwhiteley]

after some serious struggles i got it working.

so you just need to add the form to the page content as usual inside wordpress admin. See https://github.com/tlovett1/custom-contact-forms#usage

The trick to getting the form to post successfully is adding the following header to all requests you make to the WP-API, including the GET requests. (but most importantly the header should be there when requesting a page with a form generated by CCF)

'X-WP-Nonce': WP_API_Settings.nonce

where WP_API_Settings is added to the global scope by wp-api

it seems this plugin is adding a nonce token to the form based on the request so without that header it doesn't know how to post the form correctly/successfully.

Summary:

• Add form to your page content (inside cms admin)
• add X-WP-Nonce header to your requests
• Make request for page or post (html will be in content.rendered)
• Custom Contact Forms will generate a form with the proper nonce metadata/token
• Fill out your form and hit submit

Hope this helps someone!!

[lwhiteley]

my only issue now is the form action is going to a page that displays json. eg.

{
  "success": true,
  "action_type": "redirect",
  "completion_redirect_url": "#"
}

and not actually doing the redirect. similar if option is show text

[lwhiteley]

I resolved my issue and the form works perfectly now.

In addition to my above post, here is what i did and what my scenario was.

I am using react and it seems there is a setup method that is being called to init the form. By the time the form is in the DOM, the function was already called.

so below is what I did

file: ccf.js

const $ = jQuery;
let timer, count=0;
module.exports = () => {
    const done  = () => {
        clearInterval(timer);
        count = 0;
    };
    timer = setInterval(() => {
         const form = $('.ccf-form');
         const initProp = 'data-initialized';
         if(form.length > 0 && count > 10 && !form.attr(initProp)){
           try{
             form.attr(initProp, true);
            wp.ccf.setupDOM(); // <== CCF setup method (throws an err for some reason but still works)
           }catch(e){
             // <== ignore/handle err
           }
            // as a bonus, this helps to remove duplicated error messages 
            // when you hit submit multiple times and there are still errors
            form.find('.ccf-submit-button').click((e) => {
              e.preventDefault();e.stopPropagation();
              $('.ccf-form-wrapper .error').remove();
              form.submit();
            })
            done();
         }else{
           count++;
         }

         if(count > 30){
            done();
         }
      },100);
};

and then within the component

import ccf from 'ccf.js'
...
componentDidMount(){
      ccf(); // <== may need to call in componentDidUpdate in some cases
    }

and that bootstraps the form and now redirects or showing a message works perfectly 👍

Its a hack yes, but works for now