Mixing
How to post to a WordPress contact form plugin (Custom Contact Forms) from a Vue/Nuxt app
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
- I have built my first VueJS/Nuxt app that pulls content from the
WordPress REST API, the content is all being pulled in nicely and I
would now like to allow visitors to complete a contact form on the
app (website) which will post the data to a WordPress Plugin (Custom
Contact Forms). - I have exposed the API endpoints, etc. I've created the form in
WordPress and added it to the page as shortcode. - The form loads, and once you click submit the page refreshes with a
query string added to the URL, but no success message and when I
check WordPress there are no submissions.
It seems this is not the way to do it.
If I was to instead create a Vue Component with the form in it, with
the IDs on the inputs set to match the form in WordPress, how would I
then get it to submit the data and make use of the plugin to send
notifications?
I can't find anything here on by searching Google on how to make this
work - can anybody point me in the right direction?
javascript vue.js vuejs2 nuxt.js wordpress-rest-api
edited Jan 3 at 9:32
Mahesh Rajput
30310
asked Jan 3 at 8:55
AlxTheRedAlxTheRed
129112
|
show 2 more comments
0
- I have built my first VueJS/Nuxt app that pulls content from the
WordPress REST API, the content is all being pulled in nicely and I
would now like to allow visitors to complete a contact form on the
app (website) which will post the data to a WordPress Plugin (Custom
Contact Forms). - I have exposed the API endpoints, etc. I've created the form in
WordPress and added it to the page as shortcode. - The form loads, and once you click submit the page refreshes with a
query string added to the URL, but no success message and when I
check WordPress there are no submissions.
It seems this is not the way to do it.
If I was to instead create a Vue Component with the form in it, with
the IDs on the inputs set to match the form in WordPress, how would I
then get it to submit the data and make use of the plugin to send
notifications?
I can't find anything here on by searching Google on how to make this
work - can anybody point me in the right direction?
javascript vue.js vuejs2 nuxt.js wordpress-rest-api
edited Jan 3 at 9:32
Mahesh Rajput
30310
asked Jan 3 at 8:55
AlxTheRedAlxTheRed
129112
1
I've installed the plugin and took a look and the form is submitted via an AJAX POST request. The form data ultimately ends up in the tables wp_posts and wp_postmeta. I'm guessing you'll have an easier time if you analyze the database rows that get added and replicate them.
– Chris G
Jan 3 at 9:47
@ChrisG So basically, send a submision through WordPress itself and then look at the JSON output in Postman to see where to post the submission to and use Ajax to submit the form?
– AlxTheRed
Jan 3 at 10:34
You can try to replicate the client-side JS code, yes. Or just implement your own POST endpoint and simply add the form data to the database using ccf's format, so it'll appear in the dashboard. (also, just to make sure this isn't an xy problem: do you really need the Wordpress plugin in the first place? what is the main goal here?)
– Chris G
Jan 3 at 10:53
@ChrisG Well, that's crux of my question, really. It's my understanding that I need the plugin to be able to view the submissions in the WordPress admin. So I'd essentially be using the plugin as a framework to create my own form and submit the data using its structure. Does that make sense? And is that even possible? Love that link by the way! I've been in that situation many times!
– AlxTheRed
Jan 3 at 10:58
I guess it's possible somehow, but I don't think it's the best solution. Adding a basic submission table to the admin interface (or to a password protected website page) is probably easier than the CCF route.
– Chris G
Jan 3 at 11:01
|
show 2 more comments
0
0
0
- I have built my first VueJS/Nuxt app that pulls content from the
WordPress REST API, the content is all being pulled in nicely and I
would now like to allow visitors to complete a contact form on the
app (website) which will post the data to a WordPress Plugin (Custom
Contact Forms). - I have exposed the API endpoints, etc. I've created the form in
WordPress and added it to the page as shortcode. - The form loads, and once you click submit the page refreshes with a
query string added to the URL, but no success message and when I
check WordPress there are no submissions.
It seems this is not the way to do it.
If I was to instead create a Vue Component with the form in it, with
the IDs on the inputs set to match the form in WordPress, how would I
then get it to submit the data and make use of the plugin to send
notifications?
I can't find anything here on by searching Google on how to make this
work - can anybody point me in the right direction?
javascript vue.js vuejs2 nuxt.js wordpress-rest-api
edited Jan 3 at 9:32
Mahesh Rajput
30310
asked Jan 3 at 8:55
AlxTheRedAlxTheRed
129112
- I have built my first VueJS/Nuxt app that pulls content from the
WordPress REST API, the content is all being pulled in nicely and I
would now like to allow visitors to complete a contact form on the
app (website) which will post the data to a WordPress Plugin (Custom
Contact Forms). - I have exposed the API endpoints, etc. I've created the form in
WordPress and added it to the page as shortcode. - The form loads, and once you click submit the page refreshes with a
query string added to the URL, but no success message and when I
check WordPress there are no submissions.
It seems this is not the way to do it.
If I was to instead create a Vue Component with the form in it, with
the IDs on the inputs set to match the form in WordPress, how would I
then get it to submit the data and make use of the plugin to send
notifications?
I can't find anything here on by searching Google on how to make this
work - can anybody point me in the right direction?
javascript vue.js vuejs2 nuxt.js wordpress-rest-api
javascript vue.js vuejs2 nuxt.js wordpress-rest-api
edited Jan 3 at 9:32
Mahesh Rajput
30310
asked Jan 3 at 8:55
AlxTheRedAlxTheRed
129112
edited Jan 3 at 9:32
Mahesh Rajput
30310
asked Jan 3 at 8:55
AlxTheRedAlxTheRed
129112
edited Jan 3 at 9:32
Mahesh Rajput
30310
edited Jan 3 at 9:32
Mahesh Rajput
30310
edited Jan 3 at 9:32
Mahesh Rajput
30310
30310
asked Jan 3 at 8:55
AlxTheRedAlxTheRed
129112
asked Jan 3 at 8:55
AlxTheRedAlxTheRed
129112
asked Jan 3 at 8:55
AlxTheRedAlxTheRed
129112
129112
1
I've installed the plugin and took a look and the form is submitted via an AJAX POST request. The form data ultimately ends up in the tables wp_posts and wp_postmeta. I'm guessing you'll have an easier time if you analyze the database rows that get added and replicate them.
– Chris G
Jan 3 at 9:47
@ChrisG So basically, send a submision through WordPress itself and then look at the JSON output in Postman to see where to post the submission to and use Ajax to submit the form?
– AlxTheRed
Jan 3 at 10:34
You can try to replicate the client-side JS code, yes. Or just implement your own POST endpoint and simply add the form data to the database using ccf's format, so it'll appear in the dashboard. (also, just to make sure this isn't an xy problem: do you really need the Wordpress plugin in the first place? what is the main goal here?)
– Chris G
Jan 3 at 10:53
@ChrisG Well, that's crux of my question, really. It's my understanding that I need the plugin to be able to view the submissions in the WordPress admin. So I'd essentially be using the plugin as a framework to create my own form and submit the data using its structure. Does that make sense? And is that even possible? Love that link by the way! I've been in that situation many times!
– AlxTheRed
Jan 3 at 10:58
I guess it's possible somehow, but I don't think it's the best solution. Adding a basic submission table to the admin interface (or to a password protected website page) is probably easier than the CCF route.
– Chris G
Jan 3 at 11:01
|
show 2 more comments
1
I've installed the plugin and took a look and the form is submitted via an AJAX POST request. The form data ultimately ends up in the tables wp_posts and wp_postmeta. I'm guessing you'll have an easier time if you analyze the database rows that get added and replicate them.
– Chris G
Jan 3 at 9:47
@ChrisG So basically, send a submision through WordPress itself and then look at the JSON output in Postman to see where to post the submission to and use Ajax to submit the form?
– AlxTheRed
Jan 3 at 10:34
You can try to replicate the client-side JS code, yes. Or just implement your own POST endpoint and simply add the form data to the database using ccf's format, so it'll appear in the dashboard. (also, just to make sure this isn't an xy problem: do you really need the Wordpress plugin in the first place? what is the main goal here?)
– Chris G
Jan 3 at 10:53
@ChrisG Well, that's crux of my question, really. It's my understanding that I need the plugin to be able to view the submissions in the WordPress admin. So I'd essentially be using the plugin as a framework to create my own form and submit the data using its structure. Does that make sense? And is that even possible? Love that link by the way! I've been in that situation many times!
– AlxTheRed
Jan 3 at 10:58
I guess it's possible somehow, but I don't think it's the best solution. Adding a basic submission table to the admin interface (or to a password protected website page) is probably easier than the CCF route.
– Chris G
Jan 3 at 11:01
1
1
I've installed the plugin and took a look and the form is submitted via an AJAX POST request. The form data ultimately ends up in the tables wp_posts and wp_postmeta. I'm guessing you'll have an easier time if you analyze the database rows that get added and replicate them.
– Chris G
Jan 3 at 9:47
I've installed the plugin and took a look and the form is submitted via an AJAX POST request. The form data ultimately ends up in the tables wp_posts and wp_postmeta. I'm guessing you'll have an easier time if you analyze the database rows that get added and replicate them.
– Chris G
Jan 3 at 9:47
@ChrisG So basically, send a submision through WordPress itself and then look at the JSON output in Postman to see where to post the submission to and use Ajax to submit the form?
– AlxTheRed
Jan 3 at 10:34
@ChrisG So basically, send a submision through WordPress itself and then look at the JSON output in Postman to see where to post the submission to and use Ajax to submit the form?
– AlxTheRed
Jan 3 at 10:34
You can try to replicate the client-side JS code, yes. Or just implement your own POST endpoint and simply add the form data to the database using ccf's format, so it'll appear in the dashboard. (also, just to make sure this isn't an xy problem: do you really need the Wordpress plugin in the first place? what is the main goal here?)
– Chris G
Jan 3 at 10:53
You can try to replicate the client-side JS code, yes. Or just implement your own POST endpoint and simply add the form data to the database using ccf's format, so it'll appear in the dashboard. (also, just to make sure this isn't an xy problem: do you really need the Wordpress plugin in the first place? what is the main goal here?)
– Chris G
Jan 3 at 10:53
@ChrisG Well, that's crux of my question, really. It's my understanding that I need the plugin to be able to view the submissions in the WordPress admin. So I'd essentially be using the plugin as a framework to create my own form and submit the data using its structure. Does that make sense? And is that even possible? Love that link by the way! I've been in that situation many times!
– AlxTheRed
Jan 3 at 10:58
@ChrisG Well, that's crux of my question, really. It's my understanding that I need the plugin to be able to view the submissions in the WordPress admin. So I'd essentially be using the plugin as a framework to create my own form and submit the data using its structure. Does that make sense? And is that even possible? Love that link by the way! I've been in that situation many times!
– AlxTheRed
Jan 3 at 10:58
I guess it's possible somehow, but I don't think it's the best solution. Adding a basic submission table to the admin interface (or to a password protected website page) is probably easier than the CCF route.
– Chris G
Jan 3 at 11:01
I guess it's possible somehow, but I don't think it's the best solution. Adding a basic submission table to the admin interface (or to a password protected website page) is probably easier than the CCF route.
– Chris G
Jan 3 at 11:01
|
show 2 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54019018%2fhow-to-post-to-a-wordpress-contact-form-plugin-custom-contact-forms-from-a-vue%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54019018%2fhow-to-post-to-a-wordpress-contact-form-plugin-custom-contact-forms-from-a-vue%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
I've installed the plugin and took a look and the form is submitted via an AJAX POST request. The form data ultimately ends up in the tables wp_posts and wp_postmeta. I'm guessing you'll have an easier time if you analyze the database rows that get added and replicate them.
– Chris G
Jan 3 at 9:47
@ChrisG So basically, send a submision through WordPress itself and then look at the JSON output in Postman to see where to post the submission to and use Ajax to submit the form?
– AlxTheRed
Jan 3 at 10:34
You can try to replicate the client-side JS code, yes. Or just implement your own POST endpoint and simply add the form data to the database using ccf's format, so it'll appear in the dashboard. (also, just to make sure this isn't an xy problem: do you really need the Wordpress plugin in the first place? what is the main goal here?)
– Chris G
Jan 3 at 10:53
@ChrisG Well, that's crux of my question, really. It's my understanding that I need the plugin to be able to view the submissions in the WordPress admin. So I'd essentially be using the plugin as a framework to create my own form and submit the data using its structure. Does that make sense? And is that even possible? Love that link by the way! I've been in that situation many times!
– AlxTheRed
Jan 3 at 10:58
I guess it's possible somehow, but I don't think it's the best solution. Adding a basic submission table to the admin interface (or to a password protected website page) is probably easier than the CCF route.
– Chris G
Jan 3 at 11:01