Why Does it Exist?
One of the more popular features of Ontraport is SmartForms. They offer an easy way for clients to collect leads and contact information for their prospects. Though Ontraport’s SmartForm Editor is very powerful, it can’t always provide the necessary style tweaks to seamlessly integrate the form into a user’s site design without tweaking the CSS and/or JavaScript. If all goes according to plan, the tweaks shouldn’t have any effect on the form’s style and functionality… but sometimes this isn’t the case!
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`.
Ontraport offers several ways to add SmartForms to a website: JavaScript Bootstrap Injection (quickest and easiest), LightBox (fancy pop modal/dialog), Iframe (compatibility), and an HTML version (copy/paste the assets and their dependencies). The HTML version is the most problematic of the four because of dependency conflicts, which are difficult to debug.
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.
When the SmartForm Editor was released a couple of years ago, the average site didn’t have as many scripts and/or 3rd party code, making integrations much more simple and consistent. But as more cool, innovative, and complex JavaScript widgets with dependencies upon dependencies became more common, integrating our forms consistently on websites of all shapes and sizes has become much more tricky. The advent of these widgets ultimately made the process of finding the problem in the code much more difficult and time consuming.
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.
Demo
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!
