Description: The article is about wix login. The author shows how to use Wix Code to create a custom form with advanced user inputs. The form will allow students to submit their artwork during the semester and get showcased in an online exhibitions gallery.
We’ll show you how to create custom forms with advanced user input elements. We’ll add these forms to a website that we have created for a design school,these forms will allow students to submit their artwork during the semester for exhibitions. It will also store and manage the information we gather from these forms in our database collections.
Before we create a form,we need a database collection to store the information we gather. To add a database collection,you can go to the site structure sidebar on the Left,you can hover on database at the bottom and then click the add icon,you can click new collection,you need to give the collection a name such as exhibitions.
Now you can set roles and permissions for the database collection,you can decide who can add and view content in the collection,for this example we’ll choose form input,in this way anyone could submit data to this collection.
Then you can create collection,we’ll add fields for the input elements that will be used in our students submission form. To add a new field,you can click add field. You can give it a title under field name. Next,you can choose the field type,in this example our field is gathering student names,you can select text and click add,you can continue to add fields for other input elements that will appear in the form such as program,course,semester,artwork title,artwork and description.
The exhibition’s collection is now setup,we’re ready to start building our custom form,we want to create a form so students can upload their artwork,we’ll need to add a new page to our site.
In the editor,you can go to the pages menu,you can click add page and select page,you can give the new page a name such as student area and click done. Now we can start designing our form,you can click add text and drag text box onto the page,you can give the form a title so visitors know what this page is about.
We will add elements which allows students to input their information,you can click add and user input,you can scroll down to see all of the input options such as radio buttons,dropdowns,textboxes,date pickers and more.
We will start with a text input to collect student names,you can drag and drop it onto the page and customize,you can click settings,we have a few types to choose from such as number email and more,we will choose text here since we want people to enter only text.
In this field,an under placeholder text will type name,under general settings,you can set the check box to required meaning students must complete this field,now we’ll add a drop-down element for program so students can specify where they are submitting their artwork,you can click the Settings icon and change the placeholder text to program.
In the drop-down element,you can change the names of each item,you can click manage items,next to each item you can click on the icon select rename and give it a custom name such as graphic design,this is what will appear in the form. We also need to edit the value of each item,we can assign any value to the item and the value will appear in the database collection.
Next to each item,you can click on the icon and select edit value,in this example we’ll edit the value to graphic design so it will appear with that name in the program field in our database collection,we’ll do this for every item in our list,let’s continue to set up other elements in our form in the same way.
We need a section for students to upload their artwork,you can go to add user input and select and upload button,you can click manage upload button,under supported file type,you can choose image,finally you can add a text box so students can describe their artwork,we will change the placeholder text to give students directions on what to include in their description.
You can click preview to see how the form will appear on the site. Now we need to connect our database collection to the student artwork submission form we created,we can do that through a data set component which connects the elements in this page with our database collection.
To add a data set to our webpage,you can click Add and select database,you can choose the add icon next to data set,the data set component will appear on the page but our site visitors won’t be able to see it on our live website.
We can move this component anywhere on the page,you can click on the data set and select manage data set,you can click the drop down button next to connect a collection,we’ll choose a collection to connect the student submission form to,in this example we will choose exhibitions.
You can change the mode to write only so students can submit their own content,now we can easily connect every element from the form to a field in the database collection,you can select an element and click on the connect to data icon,the exhibition’s dataset will automatically be selected because it’s the only data set we have for this page.
You can connect each input element in the form to its field in the database collection,you can connect all of the input elements in the same way,the last thing we need to do is to add a submit button to our form,the submit button will send everything to the database collection.
In the editor,you can click Add and choose a button and drag and drop it onto the page,you can click on the button and change text to submit,you can select connect to data,you can select submit under link connects to.
We need to consider where to send visitors after they complete the form,in the when successful navigate to section,you can click the drop down and choose a link,you can select the page to link to in this example we’ll choose a thank-you page that we created in advance in the editor,you can click done,the form is ready and we’ll save it.
With everything in place,let’s test the form to make sure the data submits to our exhibitions collection,you can click preview now you can fill out the form and click Submit,we see it worked since we go directly to the Thank You page,you can click back to editor to view the information submitted in the database collection.
In the site structure sidebar,you can go to the database and select exhibitions,the information was collected,we’re working on the exhibition’s collection in the sandbox database,content is visible only in the Wix editor and preview mode.
When students submit their data,it will appear in the live database only,let’s go to the exhibition’s collection in the live database to see what students submitted. In order for this collection to appear in the live database,we have to first publish the site,when we publish,the database collection will be available in the live database,now let’s go to the live database to view student submissions.
We can access the live database from edit live database or from the site dashboard by clicking on my dashboard and then go to the Wix database application. We can see all of our collections,let’s view the exhibition’s collection,we can see all of our student submissions,we’ve completed building our forum and the steps needed to collect student data,now you’re ready. This article is always here,you can come back for more help,you can also visit our resource page for tutorials articles,example code and more.