如何在Unbounce中实现表单提交的条件触发逻辑：输入框值为1时显示确认弹窗，否则跳转至指定网址？

Hey there! Let's break down exactly how to set up this custom behavior for your Unbounce form. It's straightforward once you know the steps, so let's dive in:

Step 1: Disable the Default Submit Action #

• Open your Unbounce page editor and select your "submit" button.
• In the button's settings panel, navigate to the Actions section.
• Remove the default Show Form confirmation dialog action—we'll trigger this manually via custom code instead.

Step 2: Add Custom JavaScript to Your Page #

• At the bottom of the Unbounce editor, click the Javascripts icon (looks like <>).
• Create a new script, set its placement to Before Body End (this ensures it loads after all form elements are rendered).
• Paste the code below, and make sure to update the input selector to match your actual input field (replace #your-input-id with your input's ID or class—you can find this by right-clicking the input in the editor, selecting "Inspect Element", and copying the ID from the HTML):

// Wait for the page to fully load before running code
document.addEventListener('DOMContentLoaded', function() {
  // Grab references to your form, submit button, and input field
  const form = document.querySelector('form');
  const submitBtn = document.querySelector('#submit');
  const inputField = document.querySelector('#your-input-id'); // Update this selector!

  // Add a click handler to the submit button
  submitBtn.addEventListener('click', function(e) {
    e.preventDefault(); // Stop the default form submission behavior

    // Clean up and get the input value
    const inputValue = inputField.value.trim();

    if (inputValue === '1') {
      // Trigger Unbounce's default confirmation dialog
      window.UnbounceForms.showConfirmationDialog(form.id);
    } else {
      // Redirect to Google if input isn't "1"
      window.location.href = 'https://www.google.com';
    }
  });
});

Step 3: Add Optional Form Validation (If Needed) #

If your form has required fields, add this snippet right after e.preventDefault(); to ensure users fill out mandatory inputs before your logic runs:

// Check if form is valid first
if (!form.checkValidity()) {
  form.reportValidity();
  return;
}

Step 4: Test Thoroughly #

• Save your changes and preview the page.
• Enter "1" in the input field and click submit: you should see the confirmation dialog pop up.
• Enter any other value and submit: you'll be redirected to Google immediately.

内容的提问来源于stack exchange，提问作者alerya