At SmartLogic, we often build tools and components that improve business processes and workflows. We recently developed custom form builders for two different clients, Network for Good and FolioCollaborative. We thought it would be interesting to take a look at what the context and business needs were in each case, and how those needs shaped the solutions we built.
The Need
Network for Good is a web-based fundraising platform for nonprofits; one of their tools is an event ticketing service. They wanted to add a customizable form to their checkout workflow, and reached out to us for help with the front-end implementation.
FolioCollaborative is a social professional development platform for educators, currently used at 165 schools around the world. We’ve worked with them on the development and support of their core product for the past several years. They recently wanted to expand their classroom observation forms to be customizable by school administrators; they reached out to us as their ongoing tech partner for the build of this feature.
How we approached the two builds
In the case of Network for Good, their internal team builds and supports their main application, which is built in Ruby on Rails. They provided us with a JSON data format for the incoming data, and our team member Stephanie built a custom dynamic form for them in React. Their internal team integrated the React component into their existing Rails application using React on Rails. In the finished product, clients are now able to build a custom questionnaire into their event ticketing workflow, allowing them to gather information about the guests in attendance at fundraisers.
With FolioCollaborative, we have built a number of customizable forms and components for them over time. As their platform has grown, we’ve added custom fields to existing forms; in this case, a new fully customizable form builder was needed. The new observation form builder allows administrators to build as many forms with as many fields as they want, which supervisors then use when they perform classroom observations. The form builder has a lot of flexibility built in, with an arbitrary number of fields and a templating system that allows for pre-filled form fields.
Differences between the two builds
Both custom form builders used a Rails back end and React front end, though the two implementations do differ.
In the context of the Network for Good app, Stephanie avoided jQuery and other external libraries wherever possible, to keep the component she was building light-weight and performant. In the form-builder for FolioCollaborative, Justus leveraged the Select2 jQuery plugin that was already being used in the app to provide find-or-create (combobox) functionality in the custom form builder component.
The two builds were also different from a process perspective; Stephanie only had access to the front end for her development, while Justus had access to the full FolioCollaborative application. The design process was fairly different in each case as well; Network for Good had a tightly scoped vision for their implementation, where the process with FolioCollaborative was to quickly turn around a prototype for testing and subsequent iteration.
Flexibility to choose the best methods for the business need
In the end, each client got a customizable form builder tool, integrated with the business logic of their existing systems. As a technology-agnostic team, we pride ourselves on using the best tools to meet our customers’ business needs. Likewise, we put the same care and attention into every project we work on, from small discrete support projects to full-scale B2C project launches.
Whatever the scale and scope of your product development needs, we’re well equipped to help you establish a responsible game plan for implementation.
Header photo by Fancycrave on Unsplash
