Examples
- Topics:
- Javascript
CREATED FOR:
- Admin
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.
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.
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.
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.
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.
// 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.
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.
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
.
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.
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);
}
});
});