Recently, we had a client who required a lead generation form with a superb UX. However, the HubSpot form builder does not support type of form that our client needed. Our client also needed submissions to post into HubSpot for it’s analytics and marketing goodness. We came up with a solution using the SurveyJS library. We also used some fancy CSS and Javascript to solve the problem.
This lead generation form, or “lead gen,” is designed to guide potential customers into giving our client information. Our client then uses this information to see whether or not the potential “lead” can be served by the company.
This is the SurveyJS Builder UI
This innovative solution allows our client to attract potential customers, and allows potential customers to provide necessary information. How does this service work though? Does the survey need to be coded in JavaScript “from-scratch”? Thankfully, no. With the SurveyJS library, a UI is used to build a survey question by question.
For our needs, different questions lead to different “branches” of questions, adding complexity to the lead-gen build. Fortunately, the SurveyJS survey builder allows users to make branches of questions “visible” when a certain answer is given for a previous question. For example, depending on the answer to question A, the user will be lead to branch B or C, and so on. See the figure below for a visual of the survey structure. There were several of these “branching” points in the survey.
An example of Survey Branching
However, I won’t dive into too much detail with the actual survey questions. The point is, SurveyJS allows programmers, web developers, and marketers an embeddable survey form with a decent UI. Honestly, there were some hiccups along the way building the form. Some of the logic in surveyJS was a little confusing, like choosing between using a “visibleIf” statement or a “trigger” statement. That being said, it was definitely easier than coding this form ourselves.
Custom code can trigger other questions in SurveyJS
In addition, surveyJS allows users to embed the survey and produces the raw code necessary to do so. In our case, we only needed to grab a JSON object and our developers Gary and Jon programmed the rest of the styling and interface for our purpose.
SurveyJS allows users to embed code very easily
And maybe the best part of all? SurveyJS is open-source with licensure for commercial purposes.
Back to our story, though. What is the outcome? Did the survey end up working for our client? Yes! Success! SurveyJS allowed us to take a Sketch of a survey and convert it into an embeddable lead-generator. SpinGroup’s form is currently being used in our clients brand-new website.
If you want to check out SurveyJS, they have a website here. It’s definitely worth a look!
Here is a quick .gif showing the lead-gen in action
