Is it possible to use "Mirror Input Values" across pages?

General
1

Hey all, just reaching out to see if it’s possible to use “Mirror Input Values” to add an input value across a page. Basically, I want to collect emails on the first page and then the rest on another page.

This is a bit like a multi-step form, I will connect this to an external CRM so that I can give the user a form with low friction and then get the rest of the info added to their CRM record after the fact also.

Thanks in advance for any help given :v:

2

Hello @finsweet , sure it’s possible
You would need to add the typed-in email on the 1st page as a query param to the link of the 2nd page. And on the 2nd page, use our query param attribute to populate the email field using the stored email

On the 1st page you will use this custom script

        function saveAndRedirect(pageTwoURL) {
            const emailInput = document.querySelector('[email-field="email"]');
            const emailValue = emailInput.value;
            
            // Encode the email value to make it URL-safe
            const encodedEmail = encodeURIComponent(emailValue);

            // Redirect to the next page (Step 2) with the email as a query parameter
            window.location.href = `${pageTwoURL}?email=${encodedEmail}`;
        }

        const pageTwoRedirectButton = document.querySelector('[redirect-button="redirect"]');
        pageTwoRedirectButton.addEventListener('click', () => {
               const pageTwoURL = 'https://pagetwo.com';
               saveAndRedirect(pageTwoURL);
        });

Remember to place the attribute email-field="email" on the email input field, redirect-button="redirect" on the redirect button to page 2 and replace https://pagetwo.com with the actual page 2 URL

1 Like
3

What a gent! Cheers, I will implement this.