Why Does it Exist?
By default Ontraport SmartForms bootstrap:
- HTML5 form validation with jQuery Tools Validator.
- Adds support for html5 form validation for browsers that don’t support it natively.
- Adds the novalidate attribute to the form preventing the default built-in validation. This is done to add our custom error messages.
- A placeholder attribute polyfill.
- A search to see if a reCAPTCHA and/or Product Grid is on the form and binds methods to the submit handlers.
- Binds the jQuery form conditions plugin.
- Adds a mutator for show outcomes.
- Detects if the form is running in the iframe version of the markup.
- Sets the target to `_top`.
This difficulty created the need for a tool to help our engineers get to the root of the problem with the Form Integrity Bookmarklet.
When the HTML version of a form drops on some sites, things can go awry. A typical case is when jQuery is linked on the page two or three times, which causes the plugins needed to run the form to get overridden in memory. When the form scripts are loaded, we decide whether we need to load jQuery and/or jQueryUI by looking at the assets already loading on the site. But sometimes these assets are not compatible with the versions required by the plugins that power our SmartForms… ultimately creating conflicts and broken forms.
As such, customers would contact Ontraport’s Customer Support stating that their Forms were broken. In some cases these were legitimate bugs, but more often than not the root of the problem involved identifying one of these dependency conflicts.
As such, in true Ontraport fashion, we created an automated tool for verifying a given SmartForm’s integration on any website. This bookmarklet can be injected onto any website and help identify dependency issues, missing or conflicted assets, and missing or conflicted fields (perhaps caused by user error via botched copy/paste). Additionally, it becomes particularly useful when there is more than one SmartForm on the page, by isolating it’s integrity checks on a per form basis.
Created an iframe here with the demo: https://cdn.rawgit.com/Ontraport/form-integrity-check/master/tests/index.html
We welcome all Pull Requests and contributions. You can get the code here: https://github.com/Ontraport/form-integrity-check
What Problems Does it Solve?
Ontraport’s Form Integrity Bookmarklet allows anyone to run through the same checklist that one of our engineers would run through when looking at a form that doesn’t appear to be working correctly. It also cuts down on the amount of training needed around published forms because it focuses our efforts by eliminating potential issues with the form’s integration. Before this tool, we would follow the same steps over and over — an inefficient process — but now, the Bookmarklet allows anybody (not just engineers) to test our forms on their site.
While we’re always trying to make SmartForms smarter, the potential for things to go awry with integrations is ever mounting. Our suggestion: the next time you want to make a site with Ontraport’s SmartForms in mind, link in form-integrity-check.js during development. This way, you’ll be able to spot potential conflicts from a mile away… then simply remove it from the page when your site goes live!