Dynamic Pages: Track the page a form was submitted on

[parkerhemming2001]

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.

[russian-dima]

Perhaps this one…
https://www.wix.com/velo/reference/velo-package-readmes/find-visitor-location-integration

[parkerhemming2001]

Is there an article referencing how to connect form title to content collection or an article on how to link a pre-filled text module/field (hidden to the submitter of the form) that can connect to content collection?

That article linked is helpful however I’m looking more to connect the page title itself, or some form of title from the site collection to the form to link to the submissions for page tracking rather than the users legitimate location. I think the fact that my page titles are cities may be making it confusing haha!

Parker

[russian-dima]

@parkerhemming2001
Your description is very unclear for me (my english is also not the best)

So i try to understand your issue one more time…

This is your problem:
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.

1) You are working on a → DYNAMIC-PAGE
Let’s first make clear what a DYNAMIC-PAGE is.

A DYNAMIC-PAGE is nothing else as a normal-page including some elements (like dropdowns, textboxes and other elementstuff), which is directly connected to a DATABASE (to different DB-FIELDS). In many cases connected by a → DATASET (if you are not a coder).

2. You will have a → SUBMISSION-BUTTON, which will start a SUBMISSION.
   This should be the triggering start-point for your tracking function.

When the SUBMISSION-BUTTON is clicked → you want to know → on which of the DYNAMIC-PAGES the click was done, right?

If so, than it should be an easy job.

https://www.wix.com/velo/reference/wix-dataset/dataset/getcurrentitem

You click on the SUBMISSION-BUTTON and you get all informations about the current DYNAMIC page → or to be more precise → you get all informations about the current selected ROW of your DATABASE, your DYNAMIC-PAGE (Dynamic-Dataset) is connected to.

[parkerhemming2001]

@russian-dima I think your English is perfect! English is my only language and I don’t speak it very well quite often haha!

From what I read from your response, that is exactly what I was looking for! I will follow the article you sent over and let you know how it goes! Thank you so much for your responses by the way, you have been extremely helpful!

Best,
Parker

[parkerhemming2001]

@russian-dima 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

[parkerhemming2001]

My goal is the get the “link-registration-1-title” for the current site, and send it to the row for the form submission when a user submits.

[russian-dima]

@parkerhemming2001
Ok, copy and paste this one and take a look onto all given OUTPUTS in your → CONSOLE!

Site content collection ID: Registration ← is this the ID of your DATASET, or is it the ID of the COLLECTION?
Place the right ID of the right DATASET into marked PLACEHOLDER!

$w.onReady(function(){
 $w("#myDataset").onReady(() => {
  let currentItem = $w("#myDataset").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("Yeaaaahhhhh! I got my wished--> [" + mySearchedValue + "] value!")
  
  $w('#btnSubmit').onClick((event)=>{console.log(event.target.id+"-clicked!");
    //What do you want to do, when btnSubmit (button-23) was clicked?
    //continue your code here....
    //....
    //...
    //..
    //.
  });  
 });
});

…and send it to the row for the form submission when a user submits.
Your → button-23 is your submit-button → then your button-id also should have a PLAUSIBLE name-ID, for example like → “btnSubmit” now every EXTERN-CODER would know, that the element is a → BUTTON (“btn”) and that this button has a submission-function → “Submit” → Putting them together → “btnSubmit” !

You want to save something?

save - Velo API Reference - Wix.com

But first you want to set some Field-Values?

setFieldValue - Velo API Reference - Wix.com

Also always pay attention → when working with DATASETS → that your DATASET is → READY first, before you use it.

$w("#myDataset").onReady(() => {     ........    });

Good luck!

[parkerhemming2001]

@russian-dima 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:

[parkerhemming2001]

@russian-dima 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;
  } );

  });  
 });
});

[russian-dima]

You have to differ between…

1. Collection or also known as → DATABASE
2. and → DATASET

I gave you the link, where you could find this one…

As you can see, in the example the used element is → DATASET ← and → NOT DATABASE/COLLECTION ←

$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)
        
        //before saving --> first setting FIELD-VALUE(S)...
        //in which DATASET should now the value(s) be updated?
        $w("#secondDatasetIDhere").setFieldValue("title", "New Title");
        $w("#secondDatasetIDhere").setFieldValue("pageSubmitted", mySearchedValue);
        
    
        $w('#btnSubmit').onClick((event)=>{console.log("Submit-Clicked!");
            $w("#secondDatasetIDhere").save() // <-- This ID must be an DATASET-ID !!!!
            //What exactly is --> "multiStepSales" ???
            // an ID of --> DATASET ?
            // an ID of --> DATABASE (COLLECTION) ?
            // how is called your second DATASET where you want to save your data (ID)?
            .then((item)=>{console.log(item);})
            .catch((err)=>{
                let errMsg = err;
            });  
        });

        $w("#secondDatasetIDhere").onAfterSave(()=>{console.log("After-save running!")
            // something happens after save?
        });
    });
});

You also did NOT change the ID of the button like suggested ! → btnSubmit ←
Or you did it on your BUTTON → but not in CODE and this must have caused the ERROR…

Form collection column (The column for the page submitted): pageSubmitted
Form collection ID: multiStepSales

Like i understand → multiStepSales ← is a DATABASE (COLLECTION) ?
And you want to SAVE your → mySearchedValue ← in the → pageSubmitted-DB-FIELD ← of this DATABSE, right?

Is this DATABASE also connected to/with a DATASET???

Yeah, something like that. BTW: Do not forget to connect a second DATASET to your ------> multiStepSales <— DATABASE

Bring it till end, good luck!

[parkerhemming2001]

@russian-dima Yay! I figured out how to change the button23 to btnSubmit!

Here is the code I am using now, I am getting an error in the console. So I tested submitting the form outside the preview mode and checked the submission in the collection, NOT seeing the mySearchedValue show up in the column, Page Submitted (ID pageSubmitted). I had made that column previously by the way, should I have made the column in the collection manually like this, or would it have created the column automatically when the script runs?

Also, I figured out how to add the multiStepSales collection as a dataset. (P.S I added it as a form dataset , is that right or should I have added it as a normal dataset?) Also this form dataset is called #dataset1

Also, again, thank you thank you so much for your help with this! I have downloaded an app on my phone to start learning JavaScript because I am starting to realize how essential it is! You have been a life saver!

I can feel it, we are so close!!!

$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)
        
        //before saving --> first setting FIELD-VALUE(S)...
        //in which DATASET should now the value(s) be updated?
        $w("#dataset1").setFieldValue("title", "Page Submitted");
        $w("#dataset1").setFieldValue("pageSubmitted", mySearchedValue);

        $w('#btnSubmit').onClick((event)=>{console.log("Submit-Clicked!");
            $w("#dataset1").save() // <-- This ID must be an DATASET-ID !!!!
            // how is called your second DATASET where you want to save your data (ID)?
            .then((item)=>{console.log(item);})
            .catch((err)=>{
                let errMsg = err;
            });  
        });

        $w("#dataset1").onAfterSave(()=>{console.log("After-save running!")
            // something happens after save?
        });
    });
});

[russian-dima]

@parkerhemming2001
My fault! Seems like a forgot to add the second onReady()-code-part for the second DATASET.

Every time when you use a page or a dataset → both of them have first to be ready to work with.

And this ERROR is telling you exact this FAILURE!

In the ERROR-Log you can easely find where (at which code-line) the error must be occured… —> setFieldValue

$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("#dataset1").onReady(() => {
            //before saving --> first setting FIELD-VALUE(S)...
            //in which DATASET should now the value(s) be updated?
            $w("#dataset1").setFieldValue("title", "Page Submitted");
            $w("#dataset1").setFieldValue("pageSubmitted", mySearchedValue);

            $w('#btnSubmit').onClick((event)=>{console.log("Submit-Clicked!");
                $w("#dataset1").save() // <-- This ID must be an DATASET-ID !!!!
                
                .then((item)=>{console.log(item);})
                .catch((err)=>{
                    let errMsg = err;
                });  
            });
        });

        $w("#dataset1").onAfterSave(()=>{console.log("After-save running!")
            // something happens after save?
        });
    });
});

I had made that column previously by the way, should I have made the column in the collection manually like this, or would it have created the column automatically when the script runs?

It is better you define the DB-FIELD manualy. It would also work automaticaly and the DB-FIELD would be created by CODE → BUT ← you would still have to choose the TYPE of the DB-FIELD manualy. Surely you would get a yellow, ATTENTION-SIGN/Sysbol in your DB, if a new DB-FIELD (by code), would be created.

[parkerhemming2001]

@russian-dima Okay so its working… Kind of! The pageSubmitted is now sending to the collection which is awesome!! However the pageSubmitted is creating its own new row in the form submission collection rather that adding to the user submitters row

Other than that its working perfect! But how would I go about fixing this? How do I make sure the pageSubmitted is added to the users submission row rather than creating a new row?

[russian-dima]

@parkerhemming2001
Surely you have even 2-submissions with one click? Am i right?

1. First one is done by connected DATASET in property-panel, which submits DATA to wished collection?
2. Second submission is done by code?

If so, do not mix CODE and connections setted in PROPERTY-PANEL → in most cases you will get troubles.

Either go the coding-way, or the non-coding-way.

But for sure the coding way → is the much more FLEXIBLE one.

So you started coding? → Then do it!

And also think about → if you can code everything → why you do need DATASETS at all?
https://www.wix.com/velo/reference/wix-data

But this would be a totaly new chapter.

Your learning journey has just begun😉

[parkerhemming2001]

@russian-dima Oh I see on that link! So I could use the update() function to achieve this?

[russian-dima]

@parkerhemming2001
Yes you could, but be careful, using Wix-Data would mean → recreating the whole code again from scratch!

Advantage → TOTALY-FLEXIBILITY and more DYNAMIC!
You are not binded to DATASETS anymore.
To bringt it to the end-point …

Using Wix-Data , you even do not need dynamic pages (like you know them) anymore, because you can control everything by → CODE (one day you perhaps will forget —> dynamic-datasets).

There are just some rare cases, where DATASETS have ADVANTAGES (but this is just my own opinion).

[parkerhemming2001]

@russian-dima 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?

[russian-dima]

There is always a way to success! You just have to search for it!

So, you have now a problem! Did you test and proove my suggestion?
Perhaps my suggestion was even wrong?

Did you disconnect your dataset from PROPERTY-PANEL ?
Do not disconnect your DATASET copletely. Dot not disconnect your dataset from your databases. But dissconnect all elements from it.

We are talking just about → DATASET1 ← —> do not touch → DYNAMIC-DATASET and it’S connections.

Disconnect the submission-process fired from property-panel.

!!! [first do some testing and proofe my assumtion] !!!

Set all your wished VALUES by CODE, which you want to save inside your second DATABASE (Form-DB or however you called it).

Also pay attention, that going this way with multiple FIELD-VALUES, can make troubles…

$w("#dataset1").setFieldValue("title","Page Submitted");
$w("#dataset1").setFieldValue("pageSubmitted",mySearchedValue);

…instead use the following one, if you want to save MULTIPLE VALUES…

setFieldValues - Velo API Reference - Wix.com

Do you recognize the difference?

[parkerhemming2001]

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??