例
最終更新日: 2025年5月14日
- トピック:
- KCS,スクリプトエラー, Javascript
作成対象:
- 管理者
実証的な Forms 2.0 web フォームのセットの例を以下に示します。
送信成功後にフォームを非表示にする
この例では、訪問者をフォローアップページに移動させたり、現在のページをリロードしたりしません。
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;
});
});
ユーザ定義 URL に訪問者を移動させる
この例では、送信成功後に、設定されたサンキューページではなく、JavaScript によって決定された URL へと訪問者を誘導します。
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;
});
});
フォームフィールド値の設定
この例では、フォームフィールドを設定します。
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"});
});
フォーム送信時にフォームフィールド値を読み取る
この例では、フォーム送信時にフォームフィールドを読み取ります。
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));
});
});
フォームクリック以外のイベントでフォームを送信する
この例では、フォームの一部ではない他の要素またはイベントのクリックイベントに基づいてフォームを送信します。
// 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();
});
};
ユーザによるフォームの送信を防止する
この例では、フォームの送信ボタンが機能する前に、クリックカウンターボタンを 3 回以上クリックする必要があります。
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);
});
}
};
フォームの非表示フィールドに値を設定する
この例では、非表示フィールドに値を設定します。
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"});
});
ライトボックスでフォームを表示する
この例では、URL にパラメーター 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();
}
});
カスタムエラーメッセージの表示
この例では、カスタムビジネスロジックに基づいて送信時にカスタムエラーメッセージを表示します。
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);
}
});
});
recommendation-more-help
bb269a6d-047a-4bf7-9acd-23ad9a63dc59