top of page
Writer's pictureMichael Strauch (MPS)

Creating a Custom User Input Form in Wix - Wix Code - Wix My Website Tutorial


What is up guy? ComputerMDofGilbert here! In today's video, I'm bringing you another Wix code tutorial. I'm having a blast talking about these giving you tutorials, thumbs up in the down below, just for Wix code.


Today's video in particular, we're going to be talking about how to create a custom user input form, and it's pretty much just like other online forums. However, the great news is now when someone fills out the form, that information can now go into a database. And from that database, you can use that information anywhere on your website. So now people can create member profiles, social profiles groups, and I will get into all of that in some upcoming videos, which leads me to my next point.


Now that Wix code has been the betas out and I got access to the beta. I have gotten a lot of video requests regarding it. So one of my next videos is going to be creating a basic, not paid, but just a basic membership website in Wix with the new Wix code platform and how to create member profiles and use forms to do that and how to go about all of that.I will show you that next.


Paid membership websites, I know you guys have been wanting this for a long time. When I officially received the beta, there was no option for paid membership, and I got a little upset and discouraged. I'm like, Oh, we're going to have to wait again. However, we have a forum for all the beta testers that we can talk to the developers and give some product and feature requests for Wix code as it's not officially released to the public yet. I have slammed them with paid membership website stuff. And let me tell you, let's get a thumbs up because I think we have finally got a solution, no more jumping through hoops, going through PayPal buttons, double checking people's payment information, approving certain members here, approving certain members there.


It looks like within the next week and a half week, two a week and a half, I will have a video out for you guys on how to officially create a paid membership website through Wix and not have any issues, have it work flawlessly through Wix. So that would be awesome. So guys, let's look forward to that. And this leads me to my final point.


Before we hop into the video, if you guys have any feature requests that you do not currently see on Wix, or do not think that Wix offers, but you want, please let me know in the comments below guys, Wix code is still in beta, which means I still have an opportunity to talk to the developers on this forum that we have and try to push your ideas and some of the new things you want. Please, don't be hesitant. Just go ahead and let me know in the comments below as I'm here, help you guys. I'm an advocate for you. I want to get you the best possible platform on Wix and teach you how to use that platform as efficiently and fun as possible. So please let me know in the comments below now, without further ado.


I'd like to get into today's tutorial, don't forget to check out wixmywebsite.com sign up, get on the forum, read the blog posts are very helpful. We have a workshop, a free workshop this Saturday. This is our only free one, but it's this Saturday. If you're interested, go register now limited spaces. And then guys, finally, don't forget to get on this weekly Wix tips email list.



Creating a Custom User Input Form in Wix


Developer Tools

All right, so let's get into it quick refresher to access your developer tools. I know some of you have the beta already, but if you don't, this will be when you officially get which code you go up here to tools and then you'll click developer tools and then, voila! you'll have Wix code open up. In here, it'll drop down your pages, give you site structure. It will show you Lightboxes, Public, Backend and then Database.


Database

So we're going to first work in Database. You'll see if you remember in my last video, if you've been following my Wix code tutorials, I created a database called WixWebDesignLeads. You guys will kind of see what it is for now in this video. So if we click that, it will open up our Database. This is the Backend, this is our Sandbox Database. So in here, this is where we're going to create our fields that we need for our actual page.


Add Page

Now, before I show you how to add the fields and what fields to add, I actually need to add the page into my website. So I'm going to get out of Database and I'm going to come up here and add a page. I'm going to name it WEB DESIGN, very quick, very simple web design.


In this tutorial, I'm not going to worry too much about the style of this page right now. I'm going to open this page up actually, as soon as I complete it for you guys to actually come out and start using it, because what I'm going to use this web design page for is for anybody interested in my web design services. This is going to be a form for you guys to fill out and figure out, just some information. So helped me gather it and then we can go ahead and take it from there. But this website or this page is not going to be live on the website until I finished the design and get all the logistics done. But today I'm just going to show you a couple simple form inputs and how to work it, but it's not going to be the finished product. I just want you guys know that I will release this page and let you know when it's released, as soon as I do complete it.


Adding and Deleting Fields

So now that we have our page in here, now we need to go back into the database. Once we get into the database here you will see our fields. So good news is for the purpose of this video. These may or may not be the fields I actually use in this form. I'm not sure yet. I'll try to make it somewhat relatable to the form right now, but you can now delete fields.

So to add your first field, you're simply just going to press add field from there. You need your field name, mine for this one is just going to be “First Name”. Here's something that you need to make sure you need to make sure that this Field Key right here is unique. It is a unique field name, which means you cannot use “First Name” again as a field, because if you have two fields that are “First Name” and both field keys are “First Name”, it's going to completely mess up the code in JavaScript. And you're going to have issues with your form. It's not going to work. So what I mean by that is if you have “First Name” here you can have “Last Name” as a field, but it can't have another “First Name” right here. This has to be “First Name” and they can't be another duplicate “First Name”, this goes for all field keys.


Now the Field Name, it doesn't really matter. If you want to add another field name to say First Name, you can't, it's just this Field Key cannot otherwise a JavaScript will think, “Oh! There's two Field Names called a “First Name”, and it's not going to know what one to link to. And then it's going to mess up your form. So make sure you know that then you need to next pick the Field Type. So for “First Name”, it's just going to be text. I'm just going to have people input text for the “First Name”. You'll see, you can also have Images, Boolean, Numbers, Date and Time or Rich texts. So you can add all of these things, but in this case, First Name is just going to be text. And then I'll click “add”. Next, I'm going to add “Last Name”, this will also be text.


Now for the purpose of this video, I'm not going to create this entire form. Because obviously I need to put more thought into all of the fields I need for this, WixWebDesignLeads form that I'm creating, but it will work this video as far as what I'm going to teach you. So you have First Name and Last Name. These are your fields, it's in your Sandbox Database. Perfect!


Adding User Input Form

Now that we've got these in there, you have these two fields now, obviously you're probably thinking, how does the data enter these fields? So now that you have them in here in the database, you have something for the actual user input form to connect to.

Let me show you how to actually add the user input form now. So we're going to WEB DESIGN, now that we're in web design. If you go to the add button, you'll see, we get a few new options here in the add button. You'll see database and user input are new options. So this user input is where you're going to, you'll see here, these are text inputs up here. These are radio buttons down here. These are dropdowns. These are check boxes. And these are text boxes, these are upload buttons, these are date pickers tables, etc. So you have all these different options for creating a form. Obviously you need to create the correct one that corresponds with what you put in the database. So you know how, when it said a text as the type of field, it is, you need to make sure you use either this small text box or the big text box right here to make sure it correlates with the database. So I'm just going to add this one right here and I’m going to copy it and paste it because we have First Name, Last Name.


Setting Input Type

Now, when you click on it, you're going to see Set Input Type. So the input type is text and then show text download. So this is going to be your placeholder texts. So what's in this little button here so you can change it. In this case, “Add your First Name” because I want them to add their first name. You can now require, you can choose whether it's required or not. And then if it's “Read-only”if you check, that means people can only read this form. They cannot actually fill it out, so make sure you do not click “Read-only”. You can even add a “Limit length”, show the number of words or the number of characters they have. You can add a limit link and you can even add a pattern validation. So now that we have that in there, that one has our “Add your First Name” and this one, we want “Add your Last Name”. And then we also want the placeholder texts, and we also want it required. Remember not all of these have to be required, you choose the fields you want required.


Connect to your Dataset

Now that we have that there, if you click on here, you see your normal kind of Wix buttons, except do you see a new one? And this one says “Connect to Data”. So in order to actually connect to your database, you need to create a dataset. Now let me show you what that means. You're going to now come in here, so once you have all of your inputs here and you have created your form and remember guys, you can come in here and style this design it the way you want, just like you would normally design something here in Wix you just create that design button, customize the design. You could see, you could choose a fill color, border, corner, shadow, and text. You can choose colors, all of that. So you can design that exactly how you want, but I'm going to show you the logistics of things in this video.


Add Dataset

So now to add a dataset, once you have your form created and remember guys, this is not going to be my full form. I'm going to be adding a lot more, you know, fields to this, but just for the purpose of this video, this is what I'm showing. So now to add your data set, you need to come in here to add, and you'll go up to database. Now you're not creating a new collection, but you're adding a Dataset. So you click that Dataset button. Now you guys can see this here on the screen. However, when we click publish and you look at the site live, this right here is invisible. This is simply to be put on the page, so your form knows where to go.


Manage Dataset

So we're going to click Manage Dataset and we want our form here to go to WixWebDesignLeads. So this Dataset button, make sure that this form goes into this database and then we want it to be on “Write-only”, because we don't want people to just read this content. We want people to write in their information. If you want it on “Read & Write”, I'll get into this on our next video, but in your membership pages and social profiles, you'll want it on “Read & Write”, right? So that way other people can read your information, but only you can write your information and change it and read it. But in this case, when we want it to have someone fill out a form and anyone can fill out a form, you want it “Write-only” so they could only write in there.


Connect to Data

So now that you have connected your Dataset, you just press that X, datasets connected. You can come back, double check it. So now that that's connected, you need to start linking your buttons or your inputs to the database. So now you would press “Connect to Data” and then you can see it automatically connected to Wix website or WixWebDesignLeads as I already put it here on the website. Then “Value connects to” First Name. So this automatically connects to that First Name field I created in the database. And then bam! It connects to that. You're done once you know it links properly when this button turns green. When that turns green, you know it has officially linked properly. Now for here, we're going to do the same thing. Click this “Connected Data” button, WixWebDesignLeads and it connects to Last Name text. You X out, bam! You see that screen, perfect!


Submit button

All right, so now that this is linked properly, you know it works. Now, if we go into preview, let me show you here. You'll see that disappears. And I can come in here and my first name and my last name, but you guys notice something. You're probably thinking, “Why is this guy doing this? You need a submit button and you would absolutely be correct. So obviously your form isn't going to be much if they can't submit it. So what you would simply do come back into the Editor. You can add really just any button. We'll just add this, put it right here. We want it to be a “Submit” button. Sorry, my mouse is getting a little caught up here. All right, and then you don't want to link it to anything. I want to click that, and then you want it to be whoops, link connects to submit.


Linking to a Lightbox/Popup

When successful, you can choose whether after the page is submitted. So obviously when they click “Submit”, it enters into the database and you can choose whether after that happens, you stay on this page or you can link it to somewhere so you can link it to another page on your website. This is where it'll come into play, where you can create social profiles. You can have it take them to their new page. However, you can also link it to all of these things. You can link it to an anchor. You could link it to a success lightbox, maybe a pop up that says “Success!” Anything like that, let's just say, yeah, it links to a pop up. Okay, cool. Bam! So now, and you also want to make sure “Label connects to”, you don't want to click that because this isn't a field in your form. You just want it to say “Link connects to”, and then you would click X and then it turns green.


Save

Another thing guys, I know this is a long video and I know this is a lot to take in and hopefully this is helping you out. When you add just a plain button like this, a lot of you are tempted to go to this “Link” button, make sure you do not link it to anything. You do not want otherwise these two will interfere with each other. You'll have the button trying to go to the link you put here, and you'll have a trying to submit to the database and it won't work. So you need to make sure this link is “None” and you need to make sure it's connected to the data and you need to make sure the link connects to “Submit”, so it's submits into the database. Then you can choose whether you want it to go onto a link or stay on to this page. And then you can choose the link it goes to as your success link afterward. And then bam! Just like that. Click “Save”.


If we preview, my first name and my last name and I clicked “Submit”. Now, obviously I just went into my random popup. My lightbox that says, “GET OUT WEEKLY WIX TIPS!” which steps you guys would actually create either a success page or a success light box, but you can see a window through and it linked, right? Like it was supposed to, to this lightbox.


Now, if we go back and we actually check to see what's good in here, bam! Would you look at that? We've got our first suspect, myself and our form officially worked and it put this information straight into the database, just like that. You can see it went through. My name is in here. It's live and it worked. And that’s it. I'm not going to say simply, but that is how you create a Custom user input form here in Wix code. Now, the reason this is so excellent in particular is one, because now you can create any type of form you want. You can have it so people upload pictures to you, upload content, and now you can make it as I mentioned to where people create social profiles, create groups, they can even upload their own information into a member's only a page, all of that stuff. You can now use this information in databases to link to other things on your website. It's an excellent too and it's really helpful! And it's awesome!



Conclusion


I hope this video helped you out. I know it was kind of long, but it's a little bit more detailed and there's more to learn with this whole Wix code thing.


If it did help you out, please drop me a like down below, comment if you have any questions at all. Don't forget to comment for some more feature ideas that you guys don't currently have on Wix, but would like to see. So I could go ahead and let those developers know and guys, don't forget to subscribe to me here on ComputerMDofGilbert for some more awesome tech content and most Wix content.


Most importantly, don't forget to go to wixmywebsite.com check out the weekly Wix tips, email list, and get on that, get into the forum. It's helping people out, check out the blog post, sign up for the workshops, read a little bit about me and my story and do all that good stuff guys.


Other than that, thank you for watching this video and I hope it helped you out. I hope you guys are as excited about Wix code as I am. All right, I'll catch you on the next one!

405 views1 comment

1 Comment


kayhallny
Jun 28, 2020

I would like to see form where I can create s multiple choice test and questionnaire


Amazing video. Will use!


Thank you


Kay

Like
bottom of page