Ejemplos
- Temas:
- Javascript
Creado para:
- Administrador
A continuación, se puede encontrar un conjunto de ejemplos de formularios web demostrativos de Forms 2.0.
Ocultar formulario tras envío correcto
Este ejemplo no lleva al visitante a la página de seguimiento ni vuelve a cargar la página actual.
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;
});
});
Llevar al visitante a la URL definida por el usuario
Este ejemplo lleva al visitante a una dirección URL determinada por JavaScript después del envío correcto, en lugar de a la página de agradecimiento configurada.
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;
});
});
Establecer valores de campo de formulario
Este ejemplo establece los campos de formulario.
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"});
});
Leer valores de campos de formulario al enviar el formulario
En este ejemplo se leen los campos de formulario al enviarlos.
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));
});
});
Enviar formulario en evento de clic que no sea de formulario
En este ejemplo se envía un formulario basado en un evento de clic de otro elemento o evento que no forma parte del formulario.
// 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();
});
};
Impedir que un usuario envíe un formulario
Para este ejemplo, debe hacer clic en el botón del contador de clics al menos tres veces antes de que funcione el botón de envío del formulario.
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);
});
}
};
Definir valores en campos ocultos del formulario
En este ejemplo se establecen valores en campos ocultos.
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"});
});
Mostrar formulario en LightBox
Este ejemplo muestra el formulario en un cuadro de diálogo de estilo lightbox si la dirección URL contiene un parámetro 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();
}
});
Mostrar mensaje de error personalizado
Este ejemplo muestra un mensaje de error personalizado en el envío basado en la lógica empresarial personalizada.
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);
}
});
});