Skip to main content
A
Anonymous
October 22, 2014
Question

Adding a second button to a form

  • October 22, 2014
  • 7 replies
  • 2143 views
I have a need to add a second button to a form - we have a situation where someone can order a product now, or save the product configuration they have made and learn more about our product. I'm following the instructions on this page:

http://developers.marketo.com/documentation/websites/forms-2-0/

example #5:
5. Submit a form based on a click event on some other element or event that is not part of the form. View Example
//load the form normally.
MktoForms2.loadForm("//app-sjst.marketo.com", "785-UHP-775", 1057);
 
//find the button element that you want to attach the event to.
var btn = document.getElementById("MyAlternativeSubmitButtonId");
btn.onclick = function(){
  //When the button is clicked, get the form object and submit it.
  MktoForms2.whenReady(function (form){
    form.submit();
  });
};


but it doesn't seem to be working. Here's the page I developed:

http://www.cochlearcommunity.com/build-your-own/n6upgrade/BYO-form.html

I've managed to position the <div> with the "second button" so that it appears to the right of the button in the form, but the code doesn't seem to be working.

Anyone had experience with this? Any examples?

Any help greatly apprecaited.

Thanks

John

*
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

7 replies

A
Anonymous
October 22, 2014
Hey John,
I think I have found the problem.

The script tag is above the button tag in the source code. Thus, the script is looking for the MyAlternativeSubmitButtonId ID before it has been declared. To get around this and retain your formatting, place the second button between the loading of the forms2.js and the second submit script like so:

<script src="//app-sj01.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_2748"></form>

<button id='MyAlternativeSubmitButtonId' style="margin-top:-29px;margin-left:140px;background-color:#999999;padding:7px;width:140px;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#FFFFFF;border:#000 1px solid;">Save and Learn More</button>

<script>MktoForms2.loadForm("//app-sj01.marketo.com", "087-KYD-238", 2748);


var btn = document.getElementById("MyAlternativeSubmitButtonId");
btn.onclick = function(){
  //When the button is clicked, get the form object and submit it.
  MktoForms2.whenReady(function (form){
    form.submit();
  });
};



</script>
 
A
Anonymous
October 23, 2014
Will
That worked! Thanks for your help. Here it is working now:

http://www.cochlearcommunity.com/build-your-own/n6upgrade/BYO-form.html

One other question: I'd like to be able to pass what ever choice they selected on to Marketo, and give them a different email based on if they chose the order now or Save and Learn more buton. Any idea on how to do that? Any help appreciated.

Thanks

John

*
A
Anonymous
October 23, 2014

Hey John,
To do that, I would put a hidden field on your form that we will populate when the Save and Learn More button is pressed. Let's call this field "Order or Save". Put this field on your form as hidden with the default value of "Order". Make sure to also turn prefill off for this field.

Then, adjust the code like so:
btn.onclick = function(){
  //When the button is clicked, get the form object and submit it.
  MktoForms2.whenReady(function (form){
    form.vals({ "Order or Save":"Save"});
    form.submit();
  });
};

This will then submit the value "Save" for this form fill.

Now, we have a field that populates with different values depending on which submit button is clicked. Now create a Smart Campaign as follows:
Smart List:
Fills out Form (trigger)
Flow:
Send Email:
   Choice 1: If "Order or Save" is "Save", then send the "Save" email
   Default Choice: Send the "Order" email

Does that sound like a good plan?

Best,
Will

A
Anonymous
October 23, 2014

Will
Yes, this looks like the right approach. I've set it up, but it only passes the "order" value - doesn't seem to be picking up the "save" value. See anything I'm doing wrong on the page:

http://www.cochlearcommunity.com/build-your-own/n6upgrade/BYO-form.html?aliId=4723035

I've set up the field as hidden and "order" as the default value, and set the autofill to disabled, and set "Get Value from" to "Use Default Value" - always comes thru as "order" - any ideas on how to fix? Thanks for your help so far.
 

Thanks

John

*

A
Anonymous
October 24, 2014
Hey John,
Looking in the source code, it looks like the API name of that field is "saveandlearn". Can you remove the dashes from:
 form.vals({"save-and-learn":"save"});
and try again?

Will
A
Anonymous
October 24, 2014
Will
D'oh! Forgot that the API name was different than the field name - that worked. Thanks for your help.

Thanks

John

*
A
Anonymous
October 24, 2014
Glad we could get it to work!
Terms & ConditionsAccessibility statement

Loading footer...