Below you can find a set of demonstrative Forms 2.0 web form examples.
Hide Form After Successful Submission
This example does not take the visitor to the follow up page or reload the current page. [View Example]
|
1 2 3 4 5 6 7 8 9 |
MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057, function(form) { // Add an onSuccess handler form.onSuccess(function(values, followUpUrl) { // Get the form's jQuery element and hide it form.getFormElem().hide(); // Return false to prevent the submission handler from taking the lead to the follow up url return false; }); }); |
Take Visitor to User-Defined URL
This example takes the visitor to a URL determined by JavaScript after successful submission, instead of to the configured thank you page. [View Example]
|
1 2 3 4 5 6 7 8 9 |
MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057, function(form) { //Add an onSuccess handler form.onSuccess(function(values, followUpUrl) { // Take the lead to a different page on successful submit, ignoring the form's configured followUpUrl location.href = "https://google.com/?q=marketo+forms+v2+examples"; // Return false to prevent the submission handler continuing with its own processing return false; }); }); |
Set Form Field Values
This example sets form fields. [View Example]
|
1 2 3 4 |
MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057, function(form) { // Set the value of the Phone and Country fields form.vals({ "Phone":"555-555-1234", "Country":"USA"}); }); |
Read Form Field Values on Form Submit
This example reads form fields on form submit. [View Example]
|
1 2 3 4 5 6 7 8 9 10 11 |
MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057, function(form) { // Add an onSubmit handler form.onSubmit(function(){ // Get the form field values var vals = form.vals(); // You may wish to call other function calls here, for example to fire google analytics tracking or the like // callSomeFunction(vals); // We'll just alert them to show the principle alert("Submitted values: " + JSON.stringify(vals)); }); }); |
Form Submit on Non-Form Click Event
This example submits a form based on a click event on some other element or event that is not part of the form. [View Example]
|
1 2 3 4 5 6 7 8 9 10 11 |
// Load the form normally MktoForms2.loadForm("//app-ab00.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(); }); }; |
Prevent a User From Submitting a Form
For the purpose of this example, you must click the click counter button at least three times before the submit button on the form will function. [View Example]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057, function (form) { // Check if the form is submittable if (form.submittable()) { // Set it to be non submittable form.submittable(false); } }); var clickCount = 0; // Wire up the click counter button var clickCounterBtn = document.getElementById("ClickCounter"); clickCounterBtn.onclick = function() { clickCount++; // Update the buttons's text clickCounterBtn.innerHTML = "Click Counter Button ("+clickCount+")"; if (clickCount >= 3) { // Get the form and set it to be submittable MktoForms2.whenReady(function (form) { form.submittable(true); }); } }; |
Set Values on Hidden Fields on the Form
This example sets values on hidden fields. [View Example]
|
1 2 3 4 5 |
MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057, function (form) { // Set values for the hidden fields, "userIsAwesome" and "enrollDate" // Note that these fields were configured in the form editor as hidden fields already form.vals({"userIsAwesome":"true", "enrollDate":"2014-01-01"}); }); |
Show Form in LightBox
This example shows the form in a lightbox style dialog if the url contains a parameter lightboxForm=true. [View Example]
|
1 2 3 4 5 |
MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057, function (form) { if (location.href.indexOf("lightboxForm=true") != -1) { MktoForms2.lightbox(form).show(); } }); |
Show Custom Error Message
This example shows a custom error message on submit based on custom business logic. [View Example]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057, function (form) { //listen for the validate event form.onValidate(function() { // Get the values var vals = form.vals(); //Check your condition if (vals.Country == "USA" && vals.vehicleSize != "Massive") { // Prevent form submission form.submittable(false); // Show error message, pointed at VehicleSize element var vehicleSizeElem = form.getFormElem().find("#vehicleSize"); form.showErrorMessage("All Americans must have a massive vehicle", vehicleSizeElem); } else { // Enable submission for those who met the criteria form.submittable(true); } }); }); |