Corporate Synergy Solutions Form Builder

Hey there.

so I wanted to walk you through a component, that I built.

And, it's based off of a component that allows you to build forms.

And so, as you see here, I have a question.

and this is super easy.

You know, we can adjust it to say, you know, how are you feeling today?

Right.

and then what we can do is say, okay, well, I want it to be, a range.

Right.

You know, let's see.

And I'm just expanding these so you can be able to see it.

But let's say, like a rating scale, right?

is probably how I want this to be.

And I think I can change that.

Yeah, I can change that here.

I can go rating, right?

And then, now it's a rating scale.

and you can obviously change it to stars or smileys.

and I think that's good.

another question we can always ask is, maybe, a file upload is good, but like dynamic panel, for instance.

And let's say, add your vehicle.

And let's say when we add a vehicle, we want to know the make, the model and the year.

we'll go, sorry, year perfect.

And let's say we wanted to move these, around.

So it's kind of like that, make it really easy for people.

And so now, you know, let's say we're done with our form, obviously, we can go multiple pages, etc.

We can do conditional.

so let's, let's do that real quick.

So let's say, if the make.

Or.

Sorry, if the.

Yeah, if the make is, Subaru, then we want to show them, do you like your Subaru?

now we can, conditionally make, this question visible by coming over here and doing conditions.

And we can say, hey, make this question visible.

If, And what here, Sorry, what I need to do is come back over here.

And, in general, I can give the question a name or a key, right?

So we can go, vehicle, make, Vehicle, model, vehicle, year, right?

And then we can say filling.

Okay, so now when we're back down here, we can say, Subaru, Liking.

Right?

And then maybe instead of text, we can do, a ranking.

Right?

or, you know, and.

And we can go, And actually, let's evolve this question.

Let's say, what are your favorite Subaru features?

Right?

We can say, heads up display.

We can say, the power windows.

or we can say, the engine.

Right.

Whatever it is.

now we want to be Able to show this specific question here.

When we want to make it visible when the vehicle make equals Subaru, right?

now if it doesn't equal and then we want to also require it, right?

So make it required.

Now if it doesn't then let's say we want to be able to show a checkbox.

Did you like our form?

Right.

And then we say yes, no and then let's say man, I don't want to you know type these out.

I can always come up here to choices and you'll see item one and then yes, item one is going to be the value.

That's what goes back to the back end and yes is what the the front end user will see.

Right?

So let's say on the back end I want everything lowercased.

So it's going to say yes, no and then let's go maybe and then I apply and now you'll be able to see that.

Right?

and you can select, you know, something is required or how many options someone should choose etc.

we'll say form liking.

Right?

Something easy.

Okay, so let's say we're done with that now.

for instance if we save it up here, then what that does is in our component we have a form, we have a prop that's called form config output.

And this basically just saves our entire schema.

And you can see that schema over here in the JSON editor.

So this is the schema of the form which is great because now when we preview it this is what it looks like.

Right?

So how are you feeling?

I'm feeling great.

We can add a new vehicle, right?

And we can add as many vehicles as we want.

Right?

let's say we want to go ahead and add Subaru.

Then we say Preza in year 2020 and then we can go next because we had Subaru now we see this question but let's say we didn't have Subaru, we had Toyota.

Then we're not going to see that question.

That's how that conditional will work.

it's pretty, pretty straightforward.

and we can do.

And now we can rank.

Right?

So what are your favorite Subaru features?

Well I like the engine, helps me to go fast.

I like the heads up display but I really love the power of Windows and so this is kind of my ranking.

And then do I like this form?

Maybe, maybe it's a yes.

Right?

And because I didn't select if there was just one selection or not.

That's why you see multiple selections.

But let's just go with this and then you can complete right?

Now when you complete, what happens is that it's going to give you back it as a JSON, right?

and it's going to give you based on that question type.

So filling is five.

Question two, which was our which I didn't label but it's vehicle.

you know, you give you to make the model of the year, Subaru.

liking.

And I didn't label the items.

Right.

but that's something that we needed to go do and then form liking is maybe in a.

Yes.

And so then what we can go do is send this to our backend super easily.

And it's.

It's great.

It's really great.

now for this, let's say for instance, now like everything we just did was designing the question, right?

But now let's say you wanted to be able to view it and be able to have someone else take it.

As long as you have the JSON here, you will be able to take this JSON and go ahead and bring it to a prop.

So we'll go ahead and take this, we'll copy it.

And what I'm going to do is I'm going to hide this, preview.

Let me go ahead and hide this.

I'm going to go ahead and bring in our other component.

And this is Forms.

Now every component of mine that you'll see is going to have a key, a license key to it.

and so let me go ahead and enter that and I'll be right back.

Okay, we're back after entering in the key.

And then now we're going to go ahead and take that schema that we had, right?

And we are going to just paste that right in here.

Now you can bind this to a variable and just put in the variable.

Or you can just paste this in, right?

Or you can have it coming back from a database, call or whatever have you.

Right?

But we just went ahead and just pasted it in as you see here.

Here's the form, that form that we just built with the form creator.

Now we have here in the forms and it just works as you'd expect.

Then.

Now for instance, as an output of the form, you can have it go to a value, right?

You can set the theme.

And so for instance, if you had a theme, let's see.

I think maybe I have one, One second.

Okay, I have a theme here.

So once again, if I were to come in here and just paste in my theme.

Now it went from whatever it was before, right, as a standard kind of gray, right?

It's now and green here.

Right now it's going to go to like blue and kind of white, and now everything is blue and you'll see the focus rings are blue, etc.

My hover is now blue, which is all good.

Now for instance, I don't have anything that is required on here, right?

So, but this does have validation, in here as well.

So now we just build a really simple form.

But you can imagine if you needed to build a really complex form, right?

And in a complex form, with multiple pages, like we have here, for instance, imagine if you had five pages or five sections with multiple questions and conditionals, and you wanted to be able to build that logic.

You can build it really quickly inside of the editor here and then you can effectively view that same form down below, which is super, super helpful.

Now I am also in process of working on like an AI chat which allows you to chat in what you want and then your questionnaire will be created.

And so I'm working on that, next.

But there's so many things that I think you can do with this.

You can localize your survey questions or you know, your, your, your form.

And so it just makes it really, really easy to stand up forms really quickly.

I can get back data in JSON, I can put that into my backend, and life goes on and I know exactly what keys I need.

I don't have to like worry about creating labels, creating workflows and really kind of focusing on that experience.

So if you want to move fast, I think this way to do it.