Problem Statement

Before our marketing teams can try new trends, they’re at the mercy of our engineering team.

Solution

I want to detach core code from the creative’s work and convert it into lightweight widgets. This allows the marketing content to be created with any tool with little to no knowledge of how these widgets work.

The video was recorded after the initial prototype was built.

Background

While working at a digital marketing agency, our engineering team has taken on an enormous amount of technical debt. It’s largely influenced by:

• How we create content.
• Our compliance requirements.
• How media buyers work and track events actions.

To put it simply, scaling our current methods will come at a cost. We are a small team. By design, we are lean and mean. I know there’s a better way.

So why do this?

• It’s a passion project.
• To get my reps in with my developer hat on.
• I want to build one tool that will add utility to my day-to-day.
• Two leads were recommended to me to help build a lead-generation landing page with a survey.

Why would I choose to not do this?

• There is likely a tool out there that does what I’m looking for.
• There are TONS of form and survey builders out there- both open-source and SaaS.
• There may be no one out there asking for this exact problem to solve.

Products Considered

There are hundreds, possibly thousands, of tools on the market that can help solve this very problem. So why even build this? Well, here’s a list of tools that I have used or evaluated to solve this specific problem.

WordPress

WordPress is one of the top Content Management Systems on the internet. It serves a high % of all content. It has a rich community and a mature ecosystem for developers. Between the premium plugins and themes, there are tons of options.

Cost-wise- there are affordable specialty hosting providers for WP, or you can go self-managed on your favorite cloud provider.

The downside? WordPress has a rough history with security. Not all plugins and themes are maintained. There have been breaking updates recently for theme support. Plus, the experience of launching my new website using WordPress has not been as smooth as I’d like.

TypeForm

When looking at options for creating web forms, TypeForm has a beautiful product. Creating forms is straightforward with their editor. You can expect the forms to be designed well. The touches of animation are delightful. Just about any service you can think of can be integrated with TypeForm.

The downside? Pricing and TCPA compliance for our lead generation forms. The level of customization I need isn’t there.

Proprietary with PHP

PHP has been around for a long time and has been battle-tested. A lot of open-source web projects are built in PHP. There are frameworks that accelerate development, but there can be a learning curve to adopt these frameworks.

One company I’ve worked for has a large codebase in PHP. It is full of tons of features. If you’re familiar with what tech stack, you can build new sites and pages fast.

The downside? As powerful as the tech stack is, there’s a lot of duplication and

Another company has its flagship site built in PHP. Most experimental features and tests are done with the flagship site first, then syndicated out to other sites when possible. The site is lean and mean.

The downside? It’s not built to act as a framework for multiple sites. It’s a single-purpose project.

Overall, PHP isn’t a great choice for what I have in mind since it requires a server to run the code. Packaging it up to run on any device within any site isn’t possible.

Proprietary with NextJS

The NextJS project is great for getting a full-stack application running and deployed.

The downside? We’re having a hard time streamlining our process between the content creators, engineering, and publishing. Content is exchanging too many hands before going live.

Similar to PHP, I can’t easily ship this into any website that I encounter.

Decision

After working closely with a big tech company, I learned about Preact Habitat. Their use case for it was to build a lightweight toolkit that could be embedded into any web application. It had to be small. They evaluated Preact first, then found Preact Habitat and committed to it. Ever since it has become a go-to tool for small projects.

Given the environment I’m operating in, Preact Habitat checks off a lot of boxes for me.

• It is lightweight
• The boilerplate code can be embedded into any HTML page
• The build can be uploaded to a CDN (S3 + CloudFront)
• I enjoy developing software with React

Let’s get ready for the launch! 🚀

Project Scope

To validate the idea, the first experiment will be a lightweight form widget. It will be built in Preact Habitat.

Must-Have Features:

• Form Inputs must be configurable and support the most common types: text, radio, checkbox, textarea, select box
• Form Text Input type support: text, password, email, tel
• HTML5 Form Validations with Pattern attribute
• Option to configure the Action attribute of the form
• Must be hosted on CDN (ie. S3 + CloudFront / CloudFlare)

Nice to Have Features:

• A User Experience like TypeForm (multi-step survey format)
• Real-time
• A live sandbox to play within a browser
• Automated Continuous Integration and Delivery Pipeline
• Embedded widget CSS must not collide with the host page

Out of Scope FEATURES:

• Animations
• Database
• Multi-user support
• Nothing AI related
• No methods for monetization (it’s free)

Measuring Success

Outcome	Supporting Metrics
Simple to use	Can I add a snippet of code to a landing page? Yes/No
High Google Lighthouse Scores: 95+	Performance: Accessibility: Best Practices: SEO:
Responsive Design	iPhone: Android: Tablet: Desktop:

Milestones

Every week there will be a shippable deliverable.

	Milestone	Deadline	Status
Week 1	The first week will be a round of provisioning resources needed for the project. What’s needed? – Public GitHub Repo with the initial code base – A documented plan of attack and requirements (this page) – A place to track progress (this page and GitHub Issues) – Automatic code quality reports – Code linting and formatting (prettier)	09.03.2023	Done
Week 2	Build the widget Note: Finished a day late. Was able to use a Zapier hook to create new records in Google Sheets. 🚀	09.10.2023	Done
Week 3	Seek out volunteers for peer review Test & Iterate through improvements	09.17.2023	Done
Week 4	A landing page – Who, What, Why? – How? (demo its use cases) – Newsletter sign-up	09.24.2023	Pending

Milestone Changelog

Sep 2, 2023
I added Codebeat, Husky, and Prettier to the project to objectively monitor the quality of the code. In a perfect world, I would rely on peer code reviews. In the event I can’t find a volunteer to code review upcoming changes, these tools will act as a backup.

Sep 5, 2023
I created a new branch new/release-1.0.0 to keep all of the latest work. Later this week changes will be merged into develop.

Sep 9, 2023
Had a conversion with a colleague about the alpha version of the form. He gave a lot of recommended use cases for this widget.

Sep 10, 2023
Pushed the latest v1.0.0 to GitHub. Checkboxes are not working and radio boxes are missing. The necessary AJAX code missing as well.

Sep 12, 2023
Feedback from friends:

• The utility could be useful in Contextual Advertisement / Search Arbitrage.
• Conditional logic for displaying questions based on provided answers.

What did I learn?

Sep 5, 2023
While trying to add keyboard controls with keyup events, I was not able to reference the most recent useState values. A transition to useReducer has corrected this problem and is now stable.
While troubleshooting validations with forward and back buttons, I found the need to have an optional multi-step vs single-step form. For now, there’s a boolean flag to customize it.

Sep 10th, 2023
TypeScript has a lot of cool features, but it can be a major pain and can add a lot of overhead to a project.

Sep 12th, 2023
ChatGPT is a great co-pilot for code reviews and optimizations.

Sep 16th, 2023
A buddy familiar with what I’m working on shared a product with me. It’s really cool. The team behind it approached the problem very similarly to what I had in mind, and THEN some (surveyjs).

Sep 21st, 2023
There is no shortage of form builders out there. 🥴

Resources

Preact
Preact Habitat
GitHub Repository for Prototype

Heros

SurveyJS
SurveyMonkey
TypeForm
Google Forms
Unbounce
Instapage
Leadpages
ClickFunnels

Code Health