Multiple form submit buttons - same form - no user input required

  • 11 June 2020
  • 8 replies
  • 83 views
Barry_Elk
Badge +1

Anyone have any experience/luck in building a page that has a form that only has hidden fields and has multiple CTAs that all submit the form?

Use case - we have a non-lead conversion page (selling page) that we currently capture several command line parameters into our leads table (because the actual conversion site is not customizable ATM).

We want to have multiple calls to action on the page. We can put additional buttons on the page that point to the same page - but then they do not submit the hidden form field to our leads table.

I’ve got reasonable JS experience but am not sure where to start. I’ve tried to change the button “TYPE” to “submit” by setting the button attribute with JS, but that does not work.

Help? Thanks in advance.

PS - my current solution is to make the secondary CTAs link to an anchor at the top of the page that has the real form submit button. It works but it is sort of clunky and a bit confusing from a UX perspective. They don’t know why they have to hit “UPGRADE” twice.

8 replies

Stefano
Userlevel 7
Badge +4

Hi Barry!

Interesting use case.

Should all CTAs submit the same hidden fields?

I think we can get this to work with some simple JS if all buttons need to submit the same ‘form’.

Let me know!

Barry_Elk
Badge +1

Correct. All CTAs submit the same hidden fields. Just giving the users multiple options to act. No difference between or need to know what button they pushed.

Stefano
Userlevel 7
Badge +4

Give this a whirl 💡:

<script type="text/javascript">
    // Get the true submit button.
    var trueSubmitButton = document.getElementById('true-submit-button-id');
    // Get the other submit buttons.
    var otherSubmitButtons = document.getElementsByClassName('submit-form');
    // Go through the submit buttons.
    for (var x = 0; x < otherSubmitButtons.length; x = x + 1) {
        // Set a click event binder.
        otherSubmitButtons[x].onclick = function (e) {
            // Prevent default behaviour.
            e.preventDefault();
            // Simulate a click on the true form submit button.
            trueSubmitButton.click();
        }
    }
</script>

  1. Change “true-submit-button-id” to the ID of your submit button.

  2. Give all other buttons the class “submit-form”

Let me know if that works for you!

Barry_Elk
Badge +1

Sweeeeeeeeeeet!

You are my hero. Worked perfectly right out of the box.

Thank you so much!!

Stefano
Userlevel 7
Badge +4

Fantastic, Enjoy!

:man_superhero:

Charles_Tanner
Badge

This is a great option that I would like to try as well. Sadly, I’m not having any luck.

Here is my page. It has a script that pulls in my info from our database. When I submit the first asset, the info that is pulled from the database that I’m placing in hidden fields works as expected. I see the lead being collected in the “Leads” tab of the form.

But when I click on the second asset on the page, there is no record of this form submit on the Leads tab.

Your java script instructions are pretty clear and I think I set this up as you instructed, but maybe I’m missing something?

I appreciate your feedback.

https://pages.peerlessmedia.com/wp-demo-061320/?r=7132C7715701G1B

Barry_Elk
Badge +1

Looks like you have a syntax problem in your JS.

image
image1546×788 88.7 KB

It is barfing out the JS instead of executing it b/c it thinks it is text.

Charles_Tanner
Badge

Yes, that was the problem, duh! Thank you so much for coaching me up on that.

Now that it IS working, I’m wondering if I understood the function. Ideally I’d like to be able to allow the user to download different assets, but when I click on the second asset button now, it delivers the first asset to the reader, so maybe my needs are a bit different.

Again, thanks for helping me out on a weekend like that Barry. Very nice.

Reply


Terms & ConditionsCookie settings