Esempi

Ultimo aggiornamento: 26 agosto 2024

Creato per:

  • Amministratore

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();
    }
});