Connecting FormSort to Xano via a Webhook

FormSort recently launched on Product Hunt. And this is a quick first look. I've played around with it and built a couple of forms and there were a few places where I struggled a little bit with the documentation. And so this video is in case you are having some of the same struggles that I had.

So we're in here at our workspace. We're going to create our first flow, our flow being our form.

I'm going to go with a blank form and then you're asked to pick a theme and you'll be able to change your theme as I understand it. So let's go with the slight theme for now, a name, your URL. And I noticed here under URL it said that this is not something that can be changed later. The display name can be and the description can be. So make sure that you end up liking what your slug is going to be.

Okay, so now that we have that in place, we're going to just add a couple of questions. I have a few fields in a XANO table, which is where we're going to be putting this data. And those fields are name, slogan and bio. So we'll just start out with what is your first name and we will add a text. As you can see, there's a lot of field type options available.

We will ask what is your slogan? Kind of a crazy question, I guess, to ask a person to get the idea. And then we're going to ask for a short bio.

Names aren't necessarily going to be important for the moment.

One of the things that I noticed is that you can adjust your names or what the variables are for your questions. So I have name here for this first field so that it matches up what I have in XANO. We're going to change this one just to be slogan again to match what I have in XANO. And then we're also going to change this one to match what I have in XANO. It might help if I edited in the correct place and that would be right here under variable and it would also help if I spell it properly.

Okay, so we've got a few basic fields in place. We can preview those questions. So here we can see them and if we click on the settings cog, we can change the appearance or the kind of the device that their form is going to be on, which is handy to be able to save that in. And as we're looking at this form, you see we've got our couple of questions here. One got you.

That I experienced was, hey, how do I do a form submit? There's nothing here.

Let's go back to edit. When I look at questions, I was looking at button, like next button.

Let's see. Oh, this is another got you to delete something. It's over here. So remove content. But I was looking for confirm, and that is a checkbox as an acknowledgement.

So not necessarily a button or submit. And I didn't see anything. The only thing that I was seeing was a Next button, which only from my limited testing seems to be to proceed to the next page, which if you've got a long form, you're probably going to email. You may want that next button. But I've just got these couple of questions and I wanted to press submit.

I couldn't figure out what I needed to do to get that on the page. Well, from what I can see, it appears that it will do that automatically for you. So what you need to do is if we go to deploy, and since I'm on a free account, I can only deploy to production. No staging options and fun little call to action. We're going to ship the sucker.

All right? And we're going to open in a new tab. And again, we're not seeing a submit button, but as soon as Happy building bio. Bio. Bio.

A button appeared. It currently says next. I don't actually know how to configure that. I'm assuming that there is a way to confirm that. And there we go.

We can submit, we can start over. Alright, so let's go back to our forum builder. Let's close well, before we close that, in addition to just basically having a URL, there are options for embedding the form. I have not played with that currently. At least I haven't played with it yet.

But one thing that I did want to do was be able to send this data to a form, data to another source. And I wanted to do that via a web hook. And I struggled a bit to find that. So since we made changes, let's just redeploy this just to make sure that we've got the latest out there.

I went through kind of these options here to find out how to integrate with another source and couldn't find it. Basically, you want to go back to this view here. And under integrations, we've got an option here's. Our different options here. I did webhook initially, I sent data to the webhook site.

I'm still learning what these mean. But debounced will submit partial as I understand it, will submit partial submissions, like on a five minute timer, as well as any completed steps. This was nice. You can kind of view your payload. My webhook URL, which I set up separately in XANO.

So let me find that here.

And I'm going to do JSON And I don't for how XANO is set up. I don't want to have my answers. Nested. So if we view payload, this is Nested, so we have answers. And then under answers name slogan, Bio.

I don't know if this will show me unnested. Nope, it doesn't. Okay. And I need to save this. I can't remember if I needed to redeploy, but let's just do that just in case, I think I did alright.

So we're going to ship that sucker again. Let's open a new tab.

As that's happening, we're going to just reload zana just to show that there is no data there currently there isn't anything. And now let's go with the we filled that out. We're doing next and if we come back over here, we look at Sano and refresh. Here is our data that we just submitted. That was a quick first look at FormSort still lots to learn.

Happy building.

‍