Once upon a time, the Internet was a glorious display of visuals – like a carnival in the 90s. Over time, the Internet became a place where people began to do real work instead of using basic HTML to build their MySpace pages.
As we marched on and technology advanced, so too have the expectations of users. Users have implicit expectations around what constitutes a good user experience:
- Forms with instant feedback
- Rich and complex content that is truly “what you see is what you get”
- Immediate visual feedback
- Drag and drop technology
Making a truly good user experience is hard, and it’s getting harder.
A few years back, Gutenberg (eventually the Block Editor) became the future of WordPress. It was a massively complex undertaking. The engineers that designed it knew they were building something big. They built dozens of small excellent pieces that come together to make the great interface called the Block Editor.
These pieces are what makeup Gutenberg. If we’re smart, we can use the same functionality to build our own excellent user experience.
The Road to GiveWP 3.0: The Visual Form Builder
At GiveWP we empower people and organizations to create donation forms that maximize their fundraising efforts. At the core of our user experience is the customer’s ability to build a form that fits their specific needs, looks clear to the donor, and just works. Right now our forms work like classic data entry. You use a bunch of settings to describe the form visually and functionally, and then you view it on the front end. It’s how many applications have worked for a long time.
But we wanted to do better.
We had mountains of user feedback that detailed what folks want, need, and expect out of GiveWP donations forms… We knew we couldn’t just keep adding on to how our forms worked – There needed to be a fundamental change.
We also knew we didn’t want to spend three years building it or delivering something that didn’t address those needs. Enter Gutenberg.
The Block Editor has a canvas area where the user can place blocks and move them around freely. It has the concept of blocks to begin with — something you define more of and it just pops up. These blocks have their own settings, and the page (or form?) itself has settings. The user builds exactly what they want with the proper amount of guidance, so the front end is no surprise.
As a whole, the Block Editor did more than we needed; as Gutenberg pieces, it contained just about everything we wanted.
Building Blocks for the Next Generation of WordPress Donation forms
We took to the Gutenberg repository on Github and started testing. In a surprisingly
[…]
This article was written by Jason Adams and originally published on WP Mayor.