Esempi
Di seguito sono riportati alcuni esempi di moduli web dimostrativi di Forms 2.0.
Nascondi modulo dopo l’invio corretto
Questo esempio non porta il visitatore alla pagina di follow-up né ricarica la pagina corrente.
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;
});
});
Porta il visitatore all’URL definito dall’utente
Questo esempio porta il visitatore a un URL determinato da JavaScript dopo l’invio corretto, invece che alla pagina di ringraziamento configurata.
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;
});
});
Imposta valori campo modulo
In questo esempio vengono impostati i campi modulo.
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"});
});
Leggi valori campo modulo all’invio del modulo
Questo esempio legge i campi modulo all’invio del modulo.
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));
});
});
Invio modulo su evento di clic non modulo
In questo esempio viene inviato un modulo basato su un evento clic su un altro elemento o evento che non fa parte del modulo.
// 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();
});
};
Impedire a un utente di inviare un modulo
Ai fini di questo esempio, è necessario fare clic sul pulsante del contatore di clic almeno tre volte prima che il pulsante di invio sul modulo funzioni.
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);
});
}
};
Imposta valori sui campi nascosti del modulo
In questo esempio vengono impostati valori per i campi nascosti.
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"});
});
Mostra modulo in LightBox
Questo esempio mostra il modulo in una finestra di dialogo di stile lightbox se l'URL contiene un parametro 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();
}
});
Mostra messaggio di errore personalizzato
Questo esempio mostra un messaggio di errore personalizzato all’invio basato su una logica di business personalizzata.
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);
}
});
});