Hi!
I am designing a multi-steps form on Wix.
On the first five questions the visitor does not need to type any information, he/she just has to click the correct information and it moves automatically to the next question.
I cannot find how to connect the clicked button text with my dataset.
For example: First question is "Do you own your house?"
2 option buttons : "Yes" or "No"
If the visitor clicks on "Yes" I would like that "Yes" shows up in my dataset board.
Thanks for your help.
The datas are still not showing correctly in the database board and the email I'm receiving after submission are now empty while before I had Name, First, Phone and PostCode that showed up.
Here is the full code I have if it's better for you to see where I get wrong:
Thanks a lot for your help.
Frontend code:
import wixCRM from 'wix-crm'; import {sendEmail} from 'backend/email'; import wixLocation from 'wix-location'; // For full API documentation, including code examples, visit http://wix.to/94BuAAs $w.onReady(function () { //TODO: write your page related code here... }); export function button3_click(event) { $w('#group4').hide(); $w('#group5').show(); } export function button5_click(event) { $w('#group5').hide(); $w('#group6').show(); } export function button6_click(event) { $w('#group5').hide(); $w('#group6').show(); } export function button7_click(event) { $w('#group5').hide(); $w('#group6').show(); } export function button8_click(event) { $w('#group5').hide(); $w('#group6').show(); } export function button9_click(event) { $w('#group6').hide(); $w('#group7').show(); } export function button10_click(event) { $w('#group6').hide(); $w('#group7').show(); } export function button11_click(event) { $w('#group6').hide(); $w('#group7').show(); } export function button12_click(event) { $w('#group6').hide(); $w('#group7').show(); } export function button13_click(event) { $w('#group6').hide(); $w('#group7').show(); } export function button14_click(event) { $w('#group7').hide(); $w('#group8').show(); } export function button15_click(event) { $w('#group7').hide(); $w('#group8').show(); } export function button16_click(event) { $w('#group7').hide(); $w('#group8').show(); } export function button17_click(event) { $w('#group7').hide(); $w('#group8').show(); } export function button18_click(event) { $w('#group7').hide(); $w('#group8').show(); } export function button19_click(event) { $w('#group7').hide(); $w('#group8').show(); } export function button20_click(event) { $w('#group8').hide(); $w('#group9').show(); } export function button21_click(event) { $w('#group8').hide(); $w('#group9').show(); } export function button22_click(event) { $w('#group8').hide(); $w('#group9').show(); } export function button23_click(event) { $w('#group8').hide(); $w('#group9').show(); } //Enregistrement des données boutons cliquées import wixData from 'wix-data'; import wixUsers from 'wix-users'; let userId = wixUsers.currentUser.id; $w.onReady(() => { let toSave = {_id: userId}; $w("#button3, #button4, #button5, #button6, #button7, #button8, #button9, #button10, #button11, #button12, #button13, #button14, #button15, #button16, #button17, #button18, #button19, #button20, #button21, #button22, #button23").onClick(event => { switch(event.target.id){ case "button3": toSave.maisonIndividuelle = "oui"; break; case "button4": toSave.maisonIndividuelle = "non"; break; case "button5": toSave.pieceAIsoler = "Combles et grenier"; break; case "button6": toSave.pieceAIsoler = "Sous-sol et cave"; break; case "button7": toSave.pieceAIsoler = "Garage"; break; case "button8": toSave.pieceAIsoler = "Toute ma maison"; break; case "button9": toSave.foyer = "1"; break; case "button10": toSave.foyer = "2"; break; case "button11": toSave.foyer = "3"; break; case "button12": toSave.foyer = "4"; break; case "button13": toSave.foyer = "5 et +"; break; case "button14": toSave.revenuAnnuel = "- de 19 074€"; break; case "button15": toSave.revenuAnnuel = "19 074€-27 896€"; break; case "button16": toSave.revenuAnnuel = "27 896€-33 547€"; break; case "button17": toSave.revenuAnnuel = "33 547€-39 192€"; break; case "button18": toSave.revenuAnnuel = "39 192€-44 860"; break; case "button19": toSave.revenuAnnuel = "+ de 44 860€"; break; case "button20": toSave.m2 = "-50m2"; break; case "button21": toSave.m2 = "50-100m2"; break; case "button22": toSave.m2 = "100-200m2"; break; case "button23": toSave.m2 = "+200m2"; break; } }) $w("#button24").onClick(event => { let emailEmailData = {info1: toSave.maisonIndividuelle, info2: toSave.pieceAIsoler, info3: toSave.foyer, info4: toSave.revenuAnnuel, info5: toSave.maisonIndividuelle} wixData.save("OneClickForm", toSave) .then(() => sendEmail(emailEmailData)) .then(() => wixLocation.to("/formulaire-valide")); }) }) $w.onReady(function () { $w("#dataset1").onAfterSave(sendFormData); }); function sendFormData() { const subject = `Nouveau lead ${$w("#input1").value}`; const body = `Données du formulaire : ${$w("#input2").value} ${$w("#input1").value} ${$w("#input5").value} ${$w("#input6").value} `; sendEmail(subject, body) .then(response => console.log(response)); }
backend email.jsw:
import {sendWithService} from 'backend/sendGrid'; export function sendEmail(subject, body) { const key = "sendgridAPIthativehidden"; const sender = "myemail@address.com"; const recipient = "myemail@address.com"; return sendWithService(key, sender, recipient, subject, body); }
backend sendGrid.js:
import {fetch} from 'wix-fetch'; export function sendWithService(key, sender, recipient, subject, body) { const url = "https://api.sendgrid.com/api/mail.send.json"; const headers = { "Authorization": "Bearer " + key, "Content-Type": "application/x-www-form-urlencoded" }; const data = `from=${sender}&to=${recipient}&subject=${subject}&text=${body}`; const request = { "method": "post", "headers": headers, "body": data }; return fetch(url, request) .then(response => response.json()); }
Thanks a lot! It is working with Buttons 3, 4 & 5!
Going to add the other buttons and it should be just fine.
Thanks a lot. Yes I want to connect all the answers to the appropriate collection columns.
I just gave it a try (with only buttons #3 #4 & #5) and the datas still not show up in the collection board...
Maybe I am doing something wrong?
Thanks for stopping by.
You can see the form at the following address: https://www.bhenv.fr/form-test
Dataset board is the database board where the form inputs are saved after submission:
For example, in the"Maison individuelle" column I would like the information chosen by the visitor at this step "Oui" or "Non" to appear.
When the customer clicks on "Yes" it then goes to the next question and here again I would like the information chosen by the visitor to appear in the second colum of database board.
I hope it is clearer.
Thanks
The question is not clear. What is "dataset board"? Maybe you can add screenshots with the desired flow.