Hi, I am needing help figuring out a way to track the page a form was submitted on. "Page" referring to the site content shown on a dynamic page.
Context: We host hundreds of IT events across 22 cities each year, and in order to get information on our attendees to communicate important info, we send landing pages which contain event details, location, and a *form submission*.
In the past I have created all these pages manually one by one but every page is practically identical except for what the text/images etc. are. The layout itself is identical across all pages which is why I've been transitioning over to Dynamic Pages.
Problem: I have created a dynamic page that contains all elements described above, shown based on a site content collection, but the issue I'm running into is regarding form submissions. I am trying to find a way to track the page (Page being in regards to what site content is shown, top right on image, whether it is "Nashville or Phoenix") the form was submitted on.
Ideas: I am curious to see what people think but some ideas I've come up with that would work that I just don't know how to setup:
P.S I have a Zapier subscription too, in case that influences any ideas.
#1 Some sort of text box linking to the site content collection which would receive a title different for each page that could link to the form submission and add to the contacts data. The part I am struggling with on that idea is linking the text box to the form submission to add to the contacts data.
#2 Setting up the form title itself to link to the site content collection. The part that I struggle with here is the possibility of having to manually recreate the form as code. (I am a code noob 😆, I only know HTML, CSS, some Python. JavaScript is now on my to-do list for sure!)
#3 Or if there's a way to dynamically add forms to a page from the content collection itself.
Please, if you know how to accomplish one of the ideas above or have an idea of your own, I am in need of help with this and would greatly appreciate it!
Parker Hemming
National IT Manager | C10 Inc.
@Velo-Ninja Yes, re-adding, but hiding the submit button just solved everything! It is all working perfect!
THANK YOU SO MUCH! For all you help with this! I definitely couldn't have accomplished this without you! I know it's probably not the cleanest method to achieve this but all I need is for it to work and it does! I will be continuing my JavaScript/coding journey more outside this project! I have learned so much talking with you!
To any one trying to accomplish this same task here is the code (Thanks to @Velo-Ninja):
#dynamicDataset is the site content
link-registration-1-title is the ID for the URL in site content
#dataset2 is the collection where the form submissions are stored (You will want to change these to your desired fields)
#btnSubmit is the new submit button, the real submit button is hidden (To preserve required fields being required etc.)
dataToBeSaved is where the fields in the form are saved to
P.S I am using a multi-step form for this, hence the states being called for the new submit button (To preserve Thank you Page)
$w.onReady(function() { $w("#dynamicDataset").onReady(() => { let currentItem = $w("#dynamicDataset").getCurrentItem(); console.log("ITEM: ", currentItem); let title = currentItem.title; console.log("Title: ", title); let ID = currentItem._id; console.log("ID: ", ID); let mySearchedValue = currentItem["link-registration-1-title"]; console.log(mySearchedValue) $w("#dataset2").onReady(() => { $w('#btnSubmit').onClick((event) => { console.log("Submit-Clicked!"); let dataToBeSaved = { "title": "Executive Registration", "pageSubmitted": mySearchedValue, "firstName": $w('#fName').value, "lastName": $w('#lName').value, "position": $w('#title').value, "company": $w('#company').value, "email": $w('#email').value, "personalEmail": $w('#personalEmail').value, "phone": $w('#workPhone').value, "phone2": $w('#cellPhone').value, "copyOfCopyOfAddAnswerHere": $w('#hobby').value, "copyOfWeLikeToGetToKnowThePersonBehindTheTitleSoThatWeCanBetterConnectYouWithPeersWhatAreSomeOfYourHobbiesPassionsOutsideOfWor": $w('#charity').value, "copyOfOurTeamAtC10NeedsHelpBecomingBetterConnectedWithTrustedVendorsAndBusinessPartnersInTheCommunityWhoAreSomeVendorsThatYouWorkW": $w('#vendors').value, "copyOfToBetterHelpExecutivesConnectWithPeersWithSimilarChallengesWhatTopicsOfConversationOrInitiativesAreMostImportantToYouRightNow": $w('#topics').value } $w("#dataset2").setFieldValues(dataToBeSaved); $w("#dataset2").save() .then((item) => { console.log(item); }) .catch((err) => { let errMsg = err; }); $w("#statebox1").changeState("stateboxFormState1"); }); }); $w("#dataset2").onAfterSave(() => { console.log("After-save running!") }); }); });Hi Parker, I encountered the same challenge. I have a multi-step form (5 pages) and wish to collect entries after every submission/page. However, I lack coding skills (if any). Would you or somebody reading this help me out?
@Velo-Ninja
Here is what I see, I am not seeing any green connector for the submit button.
Also, when using
let dataToBeSaved = { "title": "Page Submitted", "pageSubmitted": mySearchedValue, "anotherDB_FIELD": anotherVALUE, "anotherDB_FIELD": anotherVALUE, "anotherDB_FIELD": anotherVALUE, "anotherDB_FIELD": anotherVALUE, "anotherDB_FIELD": anotherVALUE, } $w("#dataset1").setFieldValues(dataToBeSaved);How would I reference the form fields? Currently I have
let dataToBeSaved = { "title": "Executive Registration", "pageSubmitted": mySearchedValue, "firstName": #fName, "lastName": #lName, "position": #title, "company": #company, "email": #email, "personalEmail": #personalEmail, "phone": #workPhone, "phone2": #cellPhone, "copyOfCopyOfAddAnswerHere": #hobby }But I am getting many errors on the parts I highlighted
I see, so use
$w("#dataset1").setFieldValues( { "title": "Page Submitted", "pageSubmitted": mySearchedValue } );Instead of,
$w("#dataset1").setFieldValue("title","Page Submitted"); $w("#dataset1").setFieldValue("pageSubmitted",mySearchedValue);Also I do not see an option to disconnect a dataset in the Properties & Events panel, unless I'm looking in the wrong place? I tried googling what is Properties panel and didn't find a different area for this.
OH AND I THINK I GET IT!
So instead of having the form submitted separate from the code, setup a similar process to what we did for the mySearchedValue but for all the fields in the form and that will all save to the same row??
@Velo-Ninja Dang it! So there's no way to do this except having to recreate the whole code? We're so close, I just wish there was a way to update the row easily. I read the update() function, not sure I understood it very well but it looks like manually updating each item rather than dynamically updating based on a submission? I cannot wait to understand code I just need to get this form setup asap. My deadline is this afternoon to have this form working properly and I really have no clue what I'm doing in regards to this code. What do you think my best option would be? You said choose between no code or code, is this achievable without code on my end? I just feel bad because we spent all this time getting to this point, how would I go about updating a row rather than creating 2 rows? How do I merge the two?
@Velo-Ninja Okay I'm really having no luck adding my own code. I'm not exactly sure what I'm doing.
Here is what I have:
multiStepSales is the Content ID for the form submission collection
pageSubmitted is the ID of the Field I added in the form submission collection
My hope is to send "currentItem" to "multiStepSales" under the "pageSubmitted" column. multiStepSales is where the form submissions go.
On the parts I've added, I am getting the error "An element with the ID '#multiStepSales' does not exist on this page. Select another element and view or edit its ID in the Properties & Events panel."
$w.onReady(function(){ $w("#dynamicDataset").onReady(() => { let currentItem = $w("#dynamicDataset").getCurrentItem(); console.log("ITEM: ",currentItem); let title = currentItem.title; console.log("Title: ", title); let ID = currentItem._id; console.log("ID: ", ID); let mySearchedValue = currentItem["link-registration-1-title"]; console.log(mySearchedValue) $w('#button23').onClick((event)=>{console.log(event.target.id); $w("#multiStepSales").save() .then( (item) => { let pageSubmitted = item.fieldName; } ) .catch( (err) => { let errMsg = err; } ); }); }); });@Velo-Ninja Ah gotcha, I see now that the dataset and site content collection are different. Looks like my dataset name is #dynamicDataset. One issue I'm anticipating is my form submission collection, I am curious, will I need to add this as a dataset to the page to send the mySearchedValue to the form submission data?
Also I am following those articles you linked. I will try this on my own to gain some experience. I'll touch back if I can't get it to send it to the row for the form submission when a user submits.
Here is the log after using that code:
@Velo-Ninja This is the code I'm using, found it from a similar forum however it's not working. I am as brand new as they come when it comes to JavaScript so I'm sure this code is hilariously wrong. Would you mind taking a look? Again thank you so much for your help!
export function button23(event, $w) { $w("Registration").getCurrentItem()["link-registration-1-title"]; wixLocation.to('/dynamicPage/'+targetID) }
That is all the code and I put it in the Page Code Tab
Also here are the ID's for each of my elements
Submit button: #button23
Site content collection ID: Registration
Site content collection column containing URL: link-registration-1-title
Form collection column (The column for the page submitted): pageSubmitted
Form collection ID: multiStepSales
Perhaps this one...
https://www.wix.com/velo/reference/velo-package-readmes/find-visitor-location-integration