How to send post request from Wordpress form to REST API url

Question

how can i send a POST request from a WordPress form to a REST API URL? Is there a plugin I can use? I have been requested by a company I work with to submit my requests through a WordPress form, form my website to their REST API through POST method. I have no clue how to do this, can someone please advice on how to go about this or at least recommend a Plugin I can use.

Answer 1

There is a plugin that integrates WordPress websites to external API's and can be used with various different forms plugins. The plugin is WPGetAPI and is available in the WordPress plugin directory.

To be able to collect form data and send it to an external API, you will however need to purchase the Pro version of the plugin, so it is not a free option.

Here is the integration using Contact Form 7

https://wpgetapi.com/docs/using-with-contact-form-7/

Here is the integration that uses WPForms

https://wpgetapi.com/docs/using-with-wpforms/

Answer 2

Maybe the refresh is because of history. I tried running your code by commenting out the history commands in a sandbox and it is working fine.

import React, { useState } from "react";
import { Button, Form } from "react-bootstrap";
// import { useHistory } from "react-router-dom";

function SearchBox() {
  const [keyword, setKeyword] = useState("");

  // let history = useHistory();

  const submitHandler = (e) => {
    e.preventDefault();
    console.log("hello there I am working");
    // if (keyword) {
    //   history.push(`/?keyword=${keyword}&page=1`);
    // } else {
    //   history.push(`/?keyword=${keyword}&page=1`);
    // }
  };
  return (
    <div>
      <Form onSubmit={submitHandler}>
        <Form.Control
          type="text"
          name="keyword"
          onChange={(e) => setKeyword(e.target.value)}
          className="mr-sm-2 ml-sm-5"
        ></Form.Control>

        <Button type="submit" variant="outline-success" className="p-2">
          Submit
        </Button>
      </Form>
    </div>
  );
}

export default SearchBox;