Get data from one page to another using form submission

Hey everyone!

I have a CMS with multiple events and each event has it’s own URL (to an external website)
After the user click on one event, I show a pop up form
The user enters the information (name, email), submit it and I take him to a “Thank you” page
On the “Thank You” page I show a button with the URL from the event he clicked on the main page

There are several ways of doing this and I think using cookies should work, but I want to know if you can point me in the right direction.

What is the best and simplest way of doing this?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

In this situation I would use sessionStorage.

On your page with the pop-up form, capture the submit event for the form, and save the URL to sessionStorage.

On your thank you page, you can retrieve it and apply it to the button.

Hey Michael! Thanks for your insight. It worked very well.

If anyone needs a similar solution, this is what I did:

Since I have all the events on a CMS, I created an HTML embed inside the form, inside the CMS item. The embed have the hidden field with the URL I need on the next page, like this:

Onte the “value” attribute, I added the field “link” that contains the URL on my CMS, using the “Add field”, inside the HTML Embed configuration window.

Then I created a script to get that hidden value and input on the session storage as memetican indicated, as he clicks to send the form. Like this:

$('form .event').click(function() {
        const url = $(this).siblings('#ty-url').val();        

   	sessionStorage.setItem('my-url', url);

To get this URL and input it on a button on the next page, I used this code on the next page:

const link = document.querySelector('#ty-link');

const url = sessionStorage.getItem('my-url');

link.setAttribute('href', url);

I’m not a code expert, but this made the trick. If you stumble on this thread and need more directions, you can ask me.

Thanks again Michael!

1 Like