As far as your form, there really is no need to create your own form in HTML. Everything you need to create a beautiful form can be easily done right inside of the Wix Editor.
I created 4 text inputs and a submit button. I also created a dataset (I’m not sure that was necessary). I connected all inputs and submit button to the dataset.
I created a backend web module “aModule.js” with the following code:
import {fetch} from ‘wix-fetch’;
export function sendToFlocknote(data) {
fetch(“Flocknote”, {
method: ‘post’,
body: data
});
}
Finally, in the Site Code on the same page as the form, I added an event handler that runs each time a new item is successfully submitted.
import {sendToFlocknote} from ‘backend/aModule.jsw’;
var data = {
"fname":$w("#input1").value,
"lname":$w("#input2").value,
"email":$w("#input3").value,
"mobile_phone":$w("#input4").value
};
sendToFlocknote(data);
}
It’s not working. The form is supposed to do the following:
You mentioned you have a dataset but nor sure if you need it.
$w(" #dataset1 ").onAfterSave only runs when dataset save (to database) is completed. In that case, you should make sure you do save (permission issues probably).
If you don’t really need that to be saved to the site database, I suggest creating a button that upon click, send the dat to the 3rd party app.
See button.onClick .
You are right. I don’t need the data saved in the site databased. I tried your suggestion, but it is still not working. I left the backend web module the same and changed the Site Code on the same page as the form to:
import {sendToFlocknote} from ‘backend/aModule.jsw’;
var data = {
"fname":$w("#input1").value,
"lname":$w("#input3").value,
"email":$w("#input2").value,
"mobile_phone":$w("#input4").value
};
// Process request
sendToFlocknote(data);
I’ve tried inserting the HTML code in the website.
Sign Me Up
It works. When I click on the Submit button, the browser opens a new tab and directs me to Contact Flocknote where I can continue the registration process.
Nothing happens when I run the form I created with Wix using the above Wix Code.
Ok now I get it…
You’re actually redirecting to a page on submission.
Using ‘fetch’ from Wix Code API is used for REST APIs, and not for loading a web page.
This means that you can fetch ’ https://app.flocknote.com/group/198082/addToGroupFromOutside '.
You need to check if flocknote had a REST API (according to this , they do have), and make sure it fits your needs.
I think that REST/fetch is your best option (they do seem to offer support for this), but if you’re having trouble getting that working, you can perhaps embed the external page in your own page using $w.HtmlElement . For more information on how it’s used you can read Working with the HTML Component in Wix Code .
So can I pass the data from the input text fields created with Wix to the HTML component?
I guess I would need to “hide” from view the HTML component. How would I do that?
I’m guessing that I would need to use this code to pass the data from one of the input fields to the HTML component:
export function button3_onClick() {
// send message to the HTML Component
$w(“#html3”).postMessage($w(“#input1”).value);
How do I do the same for the rest of the inputs? How about the Submit button? And how do I match the input field in the Wix form to the HTML fields in the HTML component?
Upon clicking the Submit button, the onClick() function of the Submit button would create an object of input values and do a postMessage to HtmlElement . When the HtmlElement receives these values, it would build the same URL as the form 's post action would and redirect to that URL.
Whether you hide the HtmlElement or not depends on how you want things to look and how they work. You can always hide it when the page is loaded, and show it when needed.
However - I still think your best bet is REST/fetch .
I have the same challenge.
The proposed solution seems awfully complex and convoluted to achieve a pretty standard website functionality. Could anyone at Wix provide an example of how Wix Code and submit data from some input fields added via the Wix Editor, to an external website and redirect to that website? In other words, how to replicate a simple HTML Form submit action via Wix Code?
Create a basic form without writing a line of code. Use input elements, a dataset, and a button to capture and store user input in a database collection.
You can then transfer the form data to an external service using some of the techniques illustrated in some of the Advanced Examples .
