How do i get Never Bounce's javascript to work with Unbounce Forms and do custom errors and validation

  • 3 August 2023
  • 2 replies
  • 50 views
E
Badge

How do we get the Neverbounce javascript interface to work with unbounce forms to stop individuals from clicking the form button when the never bounce widget claims invalid?

 

How do I get CSS to work with a widget so the error message doesn't go on top of the unbounce button? PLEASE see my unbounce page with never bounce interfacing code: https://info.architecturescoe.org/ea-certifications/ 

 

Article I found that got me using never bounce: https://www.neverbounce.com/integrations

 

You can test it using an invalid work email and notice how the form allows the individual to click the CTA button. How do I get it so that unbounce + never bounce stops the cta button from triggering the form - only allowing valid / catchall emails to work?

 

Or looking for an alternative solution to ensuring emails are valid BEFOE the Unbounce form CTA triggers to the follow up page - reduce spam, collect good emails, and have more value out of ad spend.

2 replies

Oliver_Lord
Rank
Userlevel 4
Badge

Hi @Ethan.2023,

 

Thanks for your post here in the Community. I was unaware of the integration built by Neverbounce, so it’s always good to see more tools that are compatible with our platform.

 

Looking at their instructions, I can see that the Javascript snippet from your Neverbounce account needs to be added to the Javascript section at the bottom of the Classic Builder with the placement set to ‘Before Body End Tag’.

 

Would you mind adding the script to your page again so that I can do a test and provide you with the correct CSS?

 

A possible alternative would be to use the custom form validation script as shown in this thread:
 

One of the scripts provided blocks anyone adding in their webmail address - is that primarily what you’re looking to achieve?

 

I hope this helps you out - let me know if you need more assistance with this :-) 

E
Badge

This was NeverBounces Response, but not sure how to implement: 

 

To ensure that the Unbounce form button is disabled when the NeverBounce widget claims an email address as invalid, you can use the following JavaScript code. This code snippet will prevent the form from submitting if the email is marked as invalid by NeverBounce:


```javascript
document.addEventListener("DOMContentLoaded", function () {
  var form = document.getElementById("YOUR_FORM_ID"); // Replace 'YOUR_FORM_ID' with your actual form ID
  var submitButton = document.getElementById("YOUR_SUBMIT_BUTTON_ID"); // Replace 'YOUR_SUBMIT_BUTTON_ID' with your actual submit button ID

  submitButton.addEventListener("click", function (event) {
    var emailInput = document.getElementById("YOUR_EMAIL_INPUT_ID"); // Replace 'YOUR_EMAIL_INPUT_ID' with your actual email input field ID
    var emailValue = emailInput.value.trim();
    var isValidEmail = false; // Flag to check if the email is valid

    // Your NeverBounce verification code goes here
    // If the email is valid, set 'isValidEmail' to true

    if (!isValidEmail) {
      event.preventDefault(); // Prevent the form from submitting
      // Display an error message or handle the invalid email case here
    }
  });
});
```

Regarding the CSS issue with the widget error message overlapping the Unbounce button, you can use custom CSS to adjust the positioning of the error message. Here's an example of how you can do it:

```css
#nb-email-error {
  /* Add custom styles to adjust the positioning of the error message */
  /* For example, you can use 'margin-top', 'padding-top', or 'top' properties to create some space above the error message */
}
```

Please make sure to replace the placeholder IDs ('YOUR_FORM_ID', 'YOUR_SUBMIT_BUTTON_ID', 'YOUR_EMAIL_INPUT_ID') in the JavaScript code with the actual IDs used in your Unbounce form.
 

Reply


Terms & ConditionsCookie settings