Direct to variable pages on form submit

  • 20 August 2020
  • 5 replies
  • 50 views
Charles_Tanner
Badge

I would like to be able to send my users to different URLs depending on a variable in a hidden field after they submit a form.

For example…

I have a landing page: https://pages.peerlessmedia.com/entry-demo-variable-081920/ and it is set up to go to this page on submit: https://www.supplychain247.com/product/company/iam_robotics.

No problem there.

But, I would like to be able to have the same page/form swap out the URL destination with a different one as assigned to a hidden field.

Something like this where the user would be taken to an “alt_page” destination if we pass through the URL to a hidden field called alt_page.

https://pages.peerlessmedia.com/entry-demo-variable-081920/?alt_page=https://www.supplychain247.com/product/mobile_picking_and_transport_robot/iam_robotics

This way I could have one page to handle traffic to multiple destinations instead of having multiple landing pages for each destination page.

5 replies

Josh_berry-jenkins

There use to be a structure for this within window.module.lp.form - but that structure seems to have disappeared. Perhaps the window.ub.hooks.afterFormSubmit would now be the best place to update this?

I’d try removing the native form redirect action within the page builder and trying something along the lines of the following (AIRCODE WARNING!) :

<script>
(function() {
        window.ub.hooks.afterFormSubmit.push(function() {
          var result = document.getElementById("yourFormInput");
          switch(result.value) {
            case "optionA":
              window.location = "www.example.com";
            break;
            case "optionB":
              window.location = "www.example2.com";
           break;
          default:
            window.location = "www.example2.com";
        }
        })
})();
</script>
Charles_Tanner
Badge

Thanks for your thoughtful suggestion John. I’m always amazed by the generosity of this community.

While I’m pretty tech savvy for a marketing guy, I’m not 100% sure how to actually implement your suggestion here.

Charles_Tanner
Badge

Sorry, typed John instead of Josh. lol

Josh_berry-jenkins

No worries, so there is no inbuilt way of doing this without code as far as I’m aware, so this has to get technical. That being said if you want to pursue this route you would need to do the following with the code:

  1. So you would add the whole script section into the javascript section of the builder, changing yourFormInput to the exact ID shown for your input element within the interface (if you intend to base location based on a form field I guess this would be your hidden field).

  2. You would replace the cases (optionA, optionB) with the values you are checking for, so if your form hidden field was either “red” or “yellow” these case statements would need to match, such as
    case "red":

  3. window.location is essentially redirecting the user to another page, so replace www.example.com/www.example2.com with where you want to send them in each case. The default case acts like a backup, if none of the other cases match then do this redirect instead.

Charles_Tanner
Badge

Josh, I think we are getting closer and I’m understanding thanks to your help.

So here is my test page where I have added the script:
https://pages.peerlessmedia.com/entry-demo-variable-081920

The form is set to direct the reader to https://www.supplychain247.com under normal form rules.

So, my hidden field name is “alt_page” can be fed with the variable names like you outlined in the script (optionA, optionB).

When I use optionA, the page goes to the https://www.google.com as expected per the script. Huzzah!

https://pages.peerlessmedia.com/entry-demo-variable-081920/?alt_page=optionA

But, when I try optionB, the page displayed after form submit is not https://www.mmh.com. Instead it goes to the page that the form would normally go to. Bummer.

https://pages.peerlessmedia.com/entry-demo-variable-081920/?alt_page=optionB

<script>

(function() {

        window.ub.hooks.afterFormSubmit.push(function() {

          var result = document.getElementById("alt_page");

          switch(result.value) {

            case "optionA":

              window.location = "https://www.google.com";

            break;

            case "optionB":

              window.location = "https://www.mmh.com";

           break;

          default:

            window.location = "https://www.scmr.com";

        }

        })

})();

</script>`

Reply


Terms & ConditionsCookie settings