Building a custom form builder with Replit
1. Building a custom form builder with Replit
Okay, so we have our admin panel with our updated export functionality, and now we're gonna make a big leap, we're gonna add in our form builder that's gonna allow us to customize those questions on the front end. So we're gonna do a few things before we send our message to the chat, and that is first we're gonna create a new chat. Why we're creating a new chat is because the old chat has all the context of all the messages we'd sent before, so we wanna create a new chat to clear that out for a new phase of work. Next, we're gonna toggle from build mode to plan mode, and that's because we're gonna be making some pretty sweeping, expansive changes to our application, so we really want agent to plan out that work before it starts. Finally, we're gonna add in our prompt. I'm gonna break this one down cause it's a bit more complex. So I'm saying 'Now, I want to add the ability to customize the form questions on the main page. For this, we'll need to rethink the data structure of our application since the form questions might change. I'd also like a simple drag and drop interface for adding form questions. For now, focus on short and long form text options with field validation, we can expand the scope later. Your focus should be on expanding the form to be customizable in the simplest and most direct way possible, as well as creating our form builder MVP in a way that is user friendly.' So I'm gonna send this and we're gonna talk about it. What are we doing? Well, we're minimizing the scope of the changes that we're making. For example, focusing on short and long form text options only with field validation. That's just to make sure Agent stays focused, and then we're asking for a plan that involves changing our data structure. Why are we changing our data structure? Because if we look at our database and we go into our data tables, the form submission field actually assumes the same data structure. And what we'll see here is that name, email, message, and status are all static, they're in a single column. Now if we're changing the questions in our form builder, that means that we need to be able to change the data structure as those questions change. And so prompting agent like: "Hey, I'm realizing that this thing might be different," is going to trigger it to reflect and come up with an alternative data strategy whereby we're going to support changing data fields. So what we're seeing streaming on the left is that Agent is rethinking our data model. It's rethinking how our app should work, and whenever we're adding on some expansive functionality, it can be beneficial to step into plan mode and go back and forth with agent to make a plan. And so what we'll see is that agent has some proposed tasks on the left that are going to be changes to our application that are gonna allow us to implement this more advanced functionality. I'm going to accept those changes by clicking start building and we're gonna see what we get. So we ran our plan prompt and then there were a couple follow ups because things broke, so I'm gonna walk through exactly what I did so you can follow along, and we're gonna talk about how this is similar or dissimilar from a typical vibe coding experience. So our initial prompts ran pretty well and we got our form builder, but there was an error reordering fields. All we had to do was say: “Hey, error reordering fields” and agent fixed it. Is that the optimal prompt? Probably not, but it was a pretty straightforward error. From there, we had an error where our Kanban board wasn't displaying form data information. The reason was that in our database we have the original columns that were migrated out that our board was still displaying, so we just needed to prompt agent that that wasn't working and now it uses the actual form data that we submitted. And we get this nice custom form field app where we can ask custom questions: What's your name? What's your favorite flavor of ice cream? Additionally, rather, we can add fields to our form, we can say like, hobby, what's your favorite hobby? Make it something cool, Matt's hobby. So we can specify placeholders as well as whether that question's required or not. We can add the field and it will flow through to our form. And then we can take it and reorder that form dynamically so that what people are seeing appears different. So we go to our application now, see what's your name? We'll say Matt. We'll continue. What's your favorite hobby? I like to hike. Continue. What's your favorite flavor of ice cream? Don't say vanilla: Vanilla. Now we can submit our form and what we should see in our database is that, if we refresh the table here, there'll be a new row with our name, hobby and ice cream. Perfect. So our App's working exactly as we'd expect. It's actually a really complex, dynamic application that can handle different types of inputs and then surface them to us on the Admin dashboard dynamically. So I like to hike, Matt. Dynamic, we can move that over to In Progress. We're handling different data structures, we're building complex applications. This has been the next feature that we wanted to add to our app, and it took a couple follow-up prompts, a couple things broke, but we got there. So you need some patience. You need to be able to tinker a little bit, but we will get to a working application and that's the important thing.2. Let's practice!
Create Your Free Account
or
By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.