Play Video

Create database for Wix – 2017 – Create a Simple Form with Wix Code

Let’s create database for wix! Very impromptu video on how to create a simple database input form on Wix Code. Step by step process with vocabulary explanation to better understand how everything functions and connects.

While this is the first video ever made to show the public how to create something using Wix Code AND it was made before major updates were done to Wix Code (including a new name of Corvid), it should still be able to help you understand that background and code concepts that will help you learn a bit of code.

(This is my 1st video that started it all. Visit www.totallycodable.com)

hi I’m Nellie I’m gonna do my best to show you the quickest and easiest way to create a form using the new Wix code editing features if you have any questions you can find me on Facebook or the Wix forum I decided to pick a random template from Wix that was already pre-made I tweaked it a little bit because some of the other information was not necessary for the example that we’re going to go over this is what the editor should look like
before you activate the Wix code developer tool basically you just have to go to the tool setting up here select developer tools and it will refresh your editor and you will see this really nice pop up here on the side this is basically just a fancier way of showing your pages and what’s on it and down here is where your database collection will be this is basically where we will start but before we do I want to show you the add button now has
new sections this one is they add database elements and the user input which we’ll be using a lot so after you’ve activated your developer tools let’s create a new collection give it whatever name you want for the sake of this example I am pretending I’m going to make a website listing for babysitter’s that are looking for a job or that want to post their information to be contacted by potential employers so I’m going to name it baby sitter now
we have to select the type of permission this actual data is going to have now these are not the permissions for the actual site or the actual page that the information is going to be on this is just for the information that they’re adding for example if the information that you’re collecting will only be visible to members this is the content for members studying that you have to select let’s say that user-generated content anyone can view but
only members can post that means on your website it will be a member website and they have to sign up as a member they have to be approved and then they can use the form to submit information to add it to the database maybe this is private data maybe this is just for your eyes only so you created the form you’re creating the information that’s being submitted into the database so you’re the only one that’s going to see it or maybe you have some
custom features for right now I’m going to allow everyone so that’s what anyone can submit the database is being created this little column title will be there by default you can’t change the title you cannot delete it and those features are not available just yet they are working on them but not sure when they will be completed so for now kind of either just use it as your main field or skip it and use the other fields just because it’s here you
don’t have to use it when we’re selecting the different types of fields in your form I I know it may bother you that it’s just kind of sitting there blank but if you don’t want to use the word titles and you don’t have to use it I actually will be using the word title I’m going to use it for the title of the babysitter I’m giving an example in just a moment so move over these as we need them for right now I want to add field names field name is
actually these little boxes I’ll show you how to add the boxes later this is a field the field is the place where you’re going to input information and every single box will hold unique information so therefore every single box has to have a unique field name let’s go back to the database the first one going to add is going to be the name I want the name of the person notice how when I type in name here it gives it a field key name this key name
is very important that it is completely unique no matter how many names you will be using in your form let’s say you have a name for company name for a person name for a business those are all names but this little field key needs to be unique because it is used in JavaScript code so if there are two field names that are identically the same then the code will know what to do it will get confused so this is why this field name has to be unique as
well so I’m just going to label it name and the type of field it’s going to be is just text you can select image I don’t know how to say this one the boolean buoy egg shell can tell me later and number a date and time or rich text let’s not use this one for now we’re just going to use plain text so I’m going to add that field and there it is I’m also going to use the one for title that’ll be the person’s title it really it could be used for a
subtitle or any little extra info that they want to add so I’ll leave that one there we will be using it that I’m going to have intro I want them to be able to add a little paragraph a little introduction to who they are what they do then I want phone that’ll be a text email I’m going to ask for their Facebook link I’m going to be asking for their availability the availability I’m going to select this one because I actually want it to be
checkmarks then I want them to check all of the available option but that you’ll see me list in a bit okay so now all of my fields are created basically looks like a plain side sheet you can filter it sort it whatever you want whenever you change anything here make sure that you click the sync and you copy all items to the live database because whatever you do here is considered the sandbox which means you’re kind of just playing around with it
building it molding it to what you need and then you’ve got to sync it up and send it out it’s kind of like your mini publish button of the data name fields that you’re creating so we’ve already created all the fields that we need now we get to go and create our form these little boxes they’re called input the input for employed boxes up here let me find xx name for you user input elements okay so it’s the user input element a lot of people were
getting confused because they see the word input so they think information is going in and then no information that’s going to come back out or maybe information is going in for the first time these fields are actually used for when you want to add received information in your database or when you want to display it but they can also edit it afterwards you want to use these buttons or elements I’m sorry element so to add an element drag-and-drop
choose the style that you want you can also change the design same as always color border corners etc because I want to do this video as short as possible I’m not going to really change the design or worry about what it looks like I just want to give you an idea of kind of where you can place them so I had named a title I need an intro I’m going to make this fun actually I’m going to grab a lighter illuminate I’m going to try a text box again I’m
not going to worry about what it looks like the design I believe the background like that I just need the actual filled boxes so I can connect them to show you how to connect them I have a field for this phone the email the Facebook link and now I need availability so since the availability that I chose to remember I did not choose text I was actually going to choose checkmark so this is where you get those from these check marks and these radio
buttons all these fall under the boolean type um so this is what I’m going to use I get the Sun just drag and drop you can drag and drop as many as you need or you can copy and paste I need four of them so I’m going to head copy paste fuller and put them more over so not have all my elements in place this will be my said my submit button just because it’s already there again not worried about what it looks like it’s pretty or not just want to
show you the how it functions and how it connects this is my database and I created the field names now I need to tell the database I want you to connect to these elements on my page because I want somebody to enter that information and save it under the core the correct category so I’m going to click on the first one this little button here assess connected data so I need to connect it to a data before I can there’s actually no data on this page
this page doesn’t know what data to connect any of these elements to so in order to tell it what data I’m going to be choosing I have to go over here to the tools database now I’m going to add a new collection sorry data set I’m going to add a new data set connect the page elements to your data I can literally place it anywhere if I publisher if I preview this little icon thing remains invisible it’s only basically it’s the glue there’s a name
over here there’s a glue here I’m gonna pasted on these elements that I wanted to connect to so your data site is your Goyle now I’m going to connect the data set and I’m going to choose a collection I want my glue to connect to the babysitter so now the data sites name is babysitter data set you can change it if you want to it really doesn’t matter but this is where you’re going to choose the settings of how people are going to see this or who
is going to see this so currently the default setting is set to read only well I don’t want them to read my form I want them to write in it for the purpose of making this video faster I’m just going to select right only if you need them to write or edit again re-enter etc you would choose read and write so for right now write only I’m not going to apply any filters that’s not needed because we’re just typing information into a form so this is
done all of my settings are done my glue is on my page it’s going to glue these elements to this data collection over here my spreadsheet so whenever somebody text them something here my glue will know where to save that information in the corresponding columns right here that’s very important you have no glue you have no working form okay now I have my glue let me select this one I want the first element to connect to the name the name will be
there the next one I want I want it to connect to the title notice that what after I connect it and it successfully connect it glues it together this little icon will turn green so you know that something is connected these are still black so nothing is connected so I did name here title let me do the intro over here I’m going to do phone and email and already connected this will be the email and look at this really cool thing I click connect and
I just kind of move my mouse there I don’t press anything and it just Scrolls by itself the last term there is going to be Facebook so I’m thinking it may have been this one wrong let me see mom yeah let me go back cuz I did one availability and the thing is I’m not going to drop down so I cannot do one box I need to have four since I’m going to have four different options I’m going to have to change this I’m going to hide it just so it’s just I
don’t be confused with the other ones but I’m going to put Ava I’m going to put AZ a.m. for available in the a.m. it’s still the same category type and ubp you remember if you choose a room category and you add it you cannot delete it that function is not available yet only hiding is available and then you will be forced to label it something different and unique available week day and single week and due to the four options I want now I have
enough to connect it to these little tiny checkmarks no types of group element just click again so you can select a little square and then connect it to the field that you want so the availability doesn’t exist anymore if I hid that column so I won’t be able to look at it over there this is going to be am notice how the other ones stay gray they these are not available because these do not qualify for the little chess mark the check box it’s only
these p.m. weekday and weekend so all of my elements are connected after you connect them you can go back and assign them notice how it just as add your name add your game add your name this will actually be displayed exactly like that if you publish the form so to change that you can change the things this little Settings button this this part the text settings it says show text onload if you want to put none it’ll just completely erase that but
since on this one I don’t have any label and I kind of do you want to put placeholder text so here I’ll be able to type it I’ll put your name then you can select if it’s required or not or if this is just read-only I my form is not read-only because I do want to collect that information from them and it is required I do not want to leave that blank so I’ll go ahead and leave required notice how you can also add a limit link or a pattern
validation let’s say you want to add a browser a URL then you would add the pattern that you want it to look like in this case we don’t have a pattern it doesn’t really matter how they type in their name this is all the information I’m going to add and I’m gonna close that out in it’s a and then I’ll do that for the other ones as well this one is title they can add a title I’ll put flash heading so that were they know it’s not exactly their job
title it can be any any type of title and I won’t require it it will just be optional this plan and add your story maybe not sure but it will be required they do need to add a little bit about themselves phone number again if you go figure out where to change it it’s here in the little Settings button and all I’m doing this making sure that it does have a placeholder text because I do want them to read a little note to kind of help them out and
figure out what they need to be typing in there especially since I don’t have any labels and you can do this with or without labels depends on the design that you want to go for I’ll put Facebook your own that won’t be required and you know what no let’s not require that right now um this one I’m just going to edit the text here am of say morality alright I’ve already finished the rest of my labels for the other selections of when they are
available and after you create all the elements for the form now you need a way to submit it you could add literally any button that you like just go to the buttons add a button my page already has a button because it kind of goes with a color theme that was already on the template so I’m going to leave that button there I’m going to link this button not to the link here through the database why because I don’t want it to go somewhere I want it
to do something so I’m going to click on the database and the database already knows that I’ve selected a button so now it wants me to label it is it going to link to a specific label that I have somewhere no I already chose my specific text and I’m going to leave them like that I just want to put well actually I’ll change that it says thank you I’ll put Submit right now and then what do I want to link it to I want it to to link to an action I
want it to submit the form notice how there’s there’s other other actions it goes to the next item or the previous item pervert delete you both I mean you can figure out what those do and then whenever you’re creating fancy reforms and you can use those will use the next and previous action in a bit and then after its successful what do you want it to do make sure you do connect it to something somewhere a page do not leave it blank because if
you do it just won’t do anything it won’t go anywhere if people don’t see a successful message they’re going to think it didn’t do anything let me submit the form again and they’ll either submit the form again one or two more times or they’ll eventually just give up and leave your webpage so you don’t want to do that you want to send them up somewhere either to a small light box that says successful or to a different page on your website so I
want it to link to a page and I’ll just leave it to view I only have two pages view profile so I want it to send it the person that way so that’s them now I’ve already finished my button so look at that it’s not how to submit see okay let me change the text just knit remember don’t link it there it’s already been linked to a function we don’t want to cause an error and all right so that’s done let’s lishka site remember I have this little blue
button here icon that gluing this information to their this one won’t be visible so let’s go ahead and preview everything looks okay I threw out with the link West and let me publish it again so I consists the page don’t try to test your form in preview mode because they will not work you have to go to the live web site so now I’m going to the live web site okay so here’s my last form it could have fancy of looks you can change these colors of
course in the design I’m going to test it out we won’t give you anything because we haven’t fixed the other page yet but at least we’ll be able to submit something so let’s test to see if it works so I’m going to put my name this is a test my phone number well I’m going to leave the blank since it was optional just go to my story this is where we will be testing the form and I am going to copy and paste that a few time I left all the buttons on
default so there we go and then submit it was successful I don’t have a successful pop-up but they went through because it took me to the profile so now let’s go to the profile page now that I have a form that collects information and it’s stored in the database I want to display that information on a page on my website so other people can see how do I do that I’m going to create a dynamic page that means that the page saves the same but the
information being displayed on the page is going to change based on the record that I’m on so buddy I have nothing here I’ll be seeing I’m going to add database mmm it’s not letting me add a dynamic page so it should it from page I guess because this is the home page so let me do this let me to book it I’ll rename the home page home even though we’re not changing the design there we got Nam on the profile test page now okay so you cannot add a
dynamic page to you cannot make the home page a dynamic page so now we can I’m going to add this one this is just a different glue called the dynamic page glue so when we’re creating any dynamic page first we have to connect it to a collection we only have one collection which is the babysitter collection so any information that’s in that spreadsheet will be displayed here how we want to displayed one item per page are we going to do a category
either a group or a list of some kind I’m going to do a single item page you guys can play around with this later only because I already have a preset design I don’t want to redo all over again now we get to basically pick our own URL for it what do you want to label it you could either beam babysitter slash title and this because I don’t want the title to be that I wanted to be their name so ww-whatever your domain is slash babysitter because
that’s the name of my collection slash and then the name that the person entered and that’s going to be the unique URL to access whatever information is on that page so let’s go ahead and create it there’s an igloo if you move it around wherever it doesn’t bother you can literally be helped by the lines it doesn’t matter because they will not show when the page is published this is just so you can know this is what we’re linking to this page
notice how I don’t have any user input I just have text and pictures this one is going to be a problem notice how when I select this text this is text number 16 I can connect it to a database item I not connect part of this tag so that means this type this name cannot connect to one part and then this title cannot connect to another part I would have to separate them so I’m going to do just that I’m going to edit the text and remove them
basically splitting them and divorcing them here and then it will not attach in them but put in the Mac where they were out basically alright so now that those are split I’m going to select a Nichola writer I’m going to connect it to a database and I’m going to be displaying the person’s name I don’t have to change this text this text the way that it looks the design the color the font everything this is exactly how that person’s name will be
displayed so you don’t have to change it every single time this one is going to be connected to their title or the heading that they chose this to the same these are buttons that I am now going to be using they’re just there to look pretty hmm this paragraph is going to be the intro so I’m going to select it I’m going to connect it to their intro again you don’t have to change it we’d have to mess with the font whatever font is are either or
whatever text is already there you just leave it it’s just a placeholder basically and you don’t have to update it I have a title that’s a fun email and Facebook notice how I have the exact same numbers on each one again I don’t have to change them I just want to tell it that this is where the information is going to go make it a little bit bigger longer I’m going to tell it to connect to the phone email Facebook this is where the availability
goes so this text we have to change it to I am availability emo Wow I guess it’s plate I don’t know how to spell anymore I’m very limiting anyway you’ll know what I mean and the last one will be the weekend remember these are just a label this is not the actual information don’t link the information to this text first you won’t see it in the available options so you won’t give it a statement but you want to double click burn maritza group double
click over here so that way you can select a little checkbox and now we’re going to connect that that check check box to the actual data so I’m going to select amenities are available so you can’t choose the wrong one am/pm reach pain and weekend okay so all of them are connected let’s say I had more than one profile and people wanted to to go you know forward and back I would create two buttons any button these little ones not for the sake of
design but for the sake of function and to show you how those buttons work I’m going to put them in random places I’m going to label them I’m not going to connect them to anything I don’t want them to go anywhere okay so I have previous the next which means it’ll go to the previews profile in the next profile now that I know what I want them to do I need to connect the button to a function I wanted to do something I wanted to go somewhere I want
it to do something so connect to the data again we’re still in the babysitter collection and the label the text I don’t want it to connect anything I’ve already labeled it myself the link where does it connect to I wanted to perform an action I wanted to go to the previous previous data set item and then just save it and it connected and then this one will go to the next make sure to pub ish okay after your page is published everything is saved
now we need to configure some buttons remember when we connected this button to navigate to the home page after submission some of you may be wondering why you can’t just connect it to the profile view directly instead of sending it to the home button well that’s a good question and this is the reason if you click on the button they click on the database remember you have to choose what it does you want it to perform an action so you’re either
going to choose a submit action or you’re going to choose to visit a page so your button can’t submit and visit a page at the same time at least not with these natives settings that are here if you want it to submit and go to a different page at the same time you would have to create some type of Wix code and actually adds a code and this is where you would do that don’t ask me how because I don’t know you would have to ask somebody else or check
the form to see if that’s available but as far as these little settings here see they’re going to do one or the other not both unless you provide actual Wix code though it could do that fancy stuff for you so because we don’t have this fans to code and we don’t know that stuff yet we’re just going to let it navigate to the home page so let’s go back to the home page and I’ve already prepared the home page I added another data set if you remember
it’s in the add database and then you click on data set all I did was connect the to babysitter because that’s the only collection we have you can’t go wrong there and it’s unreal only which is fine then this button I change the text and I’m going to connected why because I want it to do something I want it to go to my actual register page this is my dynamic page now let me show you something I’m going to publish it and I’m going to visit the
live website because we’re missing one I’ve already submitted a couple of entries in form they’ve already been entered right it’s a we assume it was successful because it went through the home page and the whole procedure if I click on this button boom it’s not sending me to the page the button works the button knows exactly where to go with the page that it we linked it to is a dynamic page which means there has to be information in there
because remember the URL that we selected was you domain flash maybe a fitters flash a momentum of the person if a URL does not exist this button won’t go to non-existing page what do I mean by non exists we need to actually make sure that it saved information so we’re going to do two things we’re going to check the live collection to see if it even collected any data and we’re going to check settings because this is the very first thing I forgot
to check I’m gonna show you where so let’s go to the database which is over here I’ll be shows a top corner we’re going to edit the live database you will then it looks a lot like the basically the main dashboard when you log in to view websites and things like that here in this site I have one collection babysitter and there it is I’m going to click on manage so you saw me enter a couple of times information on that form and this is where that
live information should be but there is no information and I remembered this because um I forgot to check some settings so if there’s no live information here that dynamic page does not exist yet because it cannot be produced out of thin air everything is blank so we cannot have a blank URL so let me close this out we’re still in the database this little button edit permissions when we created it we did tell it I wanted a form input rate it’s a
form they’re going to be inputting information but all this says who can read the content right now it’s such admin I don’t want it to be admin I want it to be everyone who can create it anyone who can update it this one I want to choose admin why because I didn’t create another forum where they can edit their information I just created a forum and I set the permissions to write only if I wanted them to use that exact same for to edit the
information I would have selected read and write so right now only the admin can change it where can they change it from the lies database Vantage section that’s where you can change and update the information who can delete it the admin because I don’t have a delete button or else I would have had to add a delete button so now but I know who can read it and you can create it and save after you save it make sure that you publish it so that way
all the changes that you made to the database settings our lives now we can test our form one more time I threw out the link one second there here’s our beautiful homepage right go to add a profile and with gain submit great sit down back at the home page and click on the button and voila now an actual profile exists um it actually saved the information because our settings were wrong it was only such admin and I wanted everyone to fill in the
info so now that we’ve filled the form and we’re viewing the actual profound notice how here it changed the name my title is test this will stay the same the previous and Next button are grayed out only because there is no other existing profile so it can’t go forward or backward because it’s just one this is the information that I typed out hope tests check this out mm-hmm phone number I put that email Facebook it into the near our elm
availability all the ones that I’m available checked off