Sending a message from a Vue.js application to Contact Form 7 using the Wordpress REST API - a step-by-step guide

I recently added Contact-Form-7 to my WordPress admin panel, which generated an API Endpoint for me at

http://localhost/wordpress/wp-json/contact-form-7/v1/contact-forms

Attempting to send a POST request to this endpoint using the following code:

data() {
    return {
        form: {
            fullname: '',
            email: '',
            subject: '',
            message: ''
        }
    }
},
methods: {
    sendForm() {
        postRequest('/wp-json/contact-form-7/v1/contact-forms', this.form)
        .then(response => {
            console.log('Success --> ' + response.data)
        })
        .catch(error => {
            console.log('Error --> ' + error)
        })
    }
}

The result of this attempt was:

POST http://localhost:8080/wordpress/wp-json/contact-form-7/v1/contact-forms 403 (Forbidden)
Error: Request failed with status code 403

Answer №1

To access the post URL, you need to use the following code:

/wp-json/contact-form-7/v1/contact-forms/<FORM_ID>/feedback

This form should be created in the admin panel by default. It has worked successfully for me so far.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can we efficiently execute text searches on a large scale by utilizing static index files that are easily accessible online

Looking for a lightweight, yet scalable solution for implementing a full text search index in JavaScript using static files accessible via HTTP? Seeking to make about 100k documents searchable online without breaking the bank on hosting costs like Elastics ...

Unleashing the Power of Aurelia's HTML Attribute Binding

I need to bind the "required" html attribute in my template and model. Along with passing other information like the label value using label.bind="fieldLabel", I also want to pass whether the element is required or not. However, simply using required="tr ...

Does Transclude eliminate tr and td elements from the content?

I'm encountering an issue with my angularjs application where the tr and td tags are mysteriously disappearing. angular.module('transcludeExample', []) .directive('pane', function() { return { restrict: 'E' ...

Is this example showcasing the use of JavaScript closures?

I have a JavaScript query that may be geared towards beginners: var countries = [ "Bangladesh", "Germany", "Pakistan"]; function checkExistence(arr, input) { for (var i = 0; i < arr.length; i++) { if (arr[i] != input) { a ...

What is the best way to set up v-models for complex arrays or nested objects?

I'm looking to efficiently create multiple v-models for random properties within a deep array, where the position of attributes in arrays/objects can change dynamically. While I've managed to achieve my goal with the current setup, I'll need ...

Why isn't the hover function working on the table row element?

When I try to apply a hover effect on tbody and td elements, it works perfectly. However, when I apply the same effect to the tr element, it doesn't work as expected. I am using inline style (js pattern) rather than CSS code and incorporating Radium i ...

Using Typescript to define unions with multiple callback types

While in the process of converting my code to TypeScript, I encountered a dilemma. I created a generic foreach function that can handle arrays and objects, with different types of callbacks for iteration. However, I'm unsure how to specify the type wh ...

Creating a Unique Carousel Design with Ant Design

https://i.sstatic.net/HobMm.jpg Steps to personalize the ant design carousel with these unique features: Use Bullets instead of Boxes Modify Bullet Color Place Bullets outside the image container Sandbox Link https://codesandbox.io/s/trusting-dream-zzjr ...

Sinon respects my intern functions during testing in ExpressJS

At the moment, I am working on incorporating sinon stubs into my express routes. However, I am facing an issue where my functions are not being replaced as expected. I would like my test to send a request to my login route and have it call a fake function ...

Customizing object joining rules in JavaScript arrays

My array consists of different colored items with their respective types and amounts [ { color: 'blue', type: '+', amount: '1' }, { color: 'blue', type: '-', amount: '1' }, { color: 'blu ...

Displaying information before it is fully loaded due to asynchronous calls

Having an issue where data from a JSON file is loading after a function has completed in JavaScript, causing it to not display properly in the browser. I've been researching alternative solutions through this stackoverflow post which offers some worka ...

What's preventing me from using the left click function on my published blog post?

This is my first time creating a blogger template and everything seems to be working correctly. However, I have encountered one problem. For some reason, I am unable to left click on my blog post. I have not installed any right/left click disabler and I&a ...

What is the best way to pass WordPress category as information to ajax?

I am looking for a way to pass the current category of the page to an ajax function. My website is built on WordPress and I need to send the current page's category to infi.php, but I'm not sure how to accomplish this. Here is my ajax code: $.a ...

Tips for troubleshooting the StaleElementReferenceError in selenium automation

Encountering the persistent issue of receiving the error message StaleElementReferenceError: stale element reference: element is not attached to the page document every time I attempt to extract the text from a page body using Selenium. Numerous attempts h ...

React-Redux - Implement a button toggle functionality to display or hide additional information

I am currently working on creating a portfolio. One of the functionalities I am trying to implement is a toggle button that will show or hide the details of a specific work when clicked. I have been learning React and Redux, so this project is a great oppo ...

Iterate through three images using the `background-image` property in my Div

Is there a way to modify a code that loops through images based on an Img source in order to work with the "background-image" property of a div? HTML <div id="section2"></div> CSS #section2 { background-image: 'url(..images/banner1.jp ...

"Enhance your visuals with a rotating light source in combination with a camera and Orbit

In my Three.js scene, I've integrated OrbitControls.js for rotation and panning functionality. However, I'm facing an issue with the lighting setup - I want the lighting to move along with the camera, ensuring that the object is always well-illum ...

Can a universal Save File As button be created for all web browsers?

Currently, I am in the process of developing a music player on the client side and I am seeking a method to save playlists that include mp3 data. Concerns with localStorage The restriction of a 5mb limit for localStorage makes it impractical for my needs. ...

Is it possible for a MySQL loop to only delete the first entry?

My MySQL looping is not working properly when I click the second button to get their id and continue with the rest of the process. Why is this happening? $(document).ready(function() { $("#deleteSchedule").click(function (e) { e.preventDefault(); ...

Reactjs: Tips for precisely cropping an image to a specific aspect ratio using client-side techniques

Looking to crop an image with a minimalist approach to achieve a specific aspect ratio. For instance, if we have an image sized at 3038 x 2014 px, and desire a 1:2 aspect ratio, we would crop it to 3021 x 2014 px. The crop would be made from the center of ...