HOW TO MAKE WEBFLOW SITE LOAD FASTER: Episode 7 - Webflow Forms, HTML Structure & More Display Grid

hey what's going on everyone welcome back welcome back to another episode of our webflow optimization journey now i know that for the past week i haven't published any any videos my bad my bad guys in fact this is the fifth time i'm recording this this episode so in this episode we're going to build our our web flow form section we're going to talk about labels we're going to talk about how to scale up our form and much much more so being said let's roll the intro okie dokie so we already did the amazing job so far guys we we talked about using different html tags and why it's important to use this html tags we optimized fonts we we talked about optimizing the images we talked image spreading we talked how to laser load those images we talked about the alternative text we talked about the contrast ratio so in today's video we're gonna build this section right here now i changed it a little bit so we have more to cover so uh what i did is i've added the new input right here we're gonna use the select input type yeah we're going to build some icons inside we're going to build some buttons so we're going to talk about how to scale up our our input fields when we have more content inside like the icons or the field labels which are super important for our accessibility and then we're going to talk about different field types right here yeah why it's important to use a proper field type and then lastly what i also wanted to cover with you guys um i think i need to cover these so we're gonna talk how to properly structure your section inside the webflow and we're gonna start this by a really great example here in adobe xd how we structure our section inside the workflow well really simple so when we translate our design from figma or from adobe xd it doesn't matter what application you're using guys we have to build this section first inside our ui ux application let me arrange a little with my microphone good so what you see right here this is our form section and i called it form section breakdown so you can understand how i have design and how i have structured this section so what you need to understand is html it's not difficult html in fact it's like your design in your ux ui application so if in adobe xd you have artboard guess what in web you have the body yeah and then you have sections inside the sections which are basically a group of element inside adobe xd you have groups so look here's my section right here and i already named this form section breakdown that's my artboard and inside i'm having a form section yeah this is my form section right here and inside my form section so this will be a section with the tag section i'm having a form container this is my wrapper for the elements that i'm going to have inside this section and i'm also have this background color so what you can do is you can start naming your groups right here your elements inside adobe xd just like you would name them inside inside workflow the same structure you'll have here same will goes for the webflow so i'm having my form section right here and then i'm having the container and guess what inside my container i'm having the content from the top and i have my main form so just by having this layout guys you don't know exactly what type of display property to apply in webflow so we already covered the display grid we worked with the display flags we worked a little bit with the display block and we know that the display block is the standard display in web so why i have structured my form container in this way so the content top and the main form really simple because my form container will be display grid because i want to control the gap between the content right here on the top and my main form the chances are i'm going to reuse this form in other pages right and maybe not all the time my form will also have a headline and a paragraph so just by having this structure inside my adobe xd look how easy is that to maintain my gap between my top content that have my headline in my paragraph and between my main form now inside the web flow when you build a form block you'll also have this success message and the error message right but in essence the same structure you have right here in your adobe x the the same structure will be applied to your webflow page okay so with this in mind i know that this form container will be display set to grid because i want to control the gap between my top content and my main form that's it my form also will be another display grid because instead of using flex and setting margins i want to use the greed and the greed gap feature to control the gap and the spacing between my elements inside a grid with this in mind let's actually hope inside the web flow and build our section based on this form section breakdown so here's my webflow what i'm going to do is remember the body you have inside the web flow the body you have in html is the same art board you have in your ux ui application so with my body selected with my artboard selected let's do command a to open up my quick find and let's paste right here a section okay so we have this section right here yeah if we go back to adobe xd we can see that we have this form section right here and what i'm gonna do is i'm gonna do i'm gonna use my mnemonic way of naming my classes and add the name for my section and chances are i'm gonna reuse this section yeah um usually i don't love using symbols simply because if you have a lot of symbols webflow designer becomes unstable so i love to simply have sections or div blocks or in this case group of elements that i can copy and paste them inside other pages so with my section selected let's add a class and that's going to be cta form cd form why because it's a call to action form it's a mnemonic name a way of naming my classes i have my form i have my section right here with cda form what's next well i know that this is a section so i need to go to the element settings and from the tag change it from the div to a section why section guys we already covered this in the previous episodes but i i would love to add one more thing here so in web your browser render a page it uses the css classes you applied uses the styling to display to properly display your elements inside the web page properly display the sections images headlines paragraphs and all of those elements now we know that in web we also have the lazy load for images we know that images that are outside of the viewport will be lazy loaded will be loaded once that image gets inside our viewport same thing happens with your section tag browsers they don't render sections that are outside of the viewport so that's why it's important to use the section tag we want to define we want to let the browser know that hey this is a section if this section is outside of the viewport please don't render it good so just a thing just a small thing here to to note about the section tag and why to use them so i know my cda form section have the section tag now i also know we have a background color so let's go back to adobe xd let's copy our background color from here let's go to fill copy the hacks go back and go to the style pane with my cta form with my section selected i'm going to scroll all the way to the bottom where it says backgrounds and then i'm going to paste it right here on the color field and hit the enter key good now my form section have a background what else well i know that my cda form have my my section have a height and this height is 696. let's do five let's do 700 pixels i know that the minimum height my form my section my form section will have it's 700 pixels with this in mind let's go back to the web flow with my cda form selected with my section selected i'm going to go all the way to the top and under the sizes where it says minimum height i'm going to do 700 pixel and now my section will become bigger will become taller than uh 700 pixel in case i have more content inside but it will not become smaller than 700 pixel good to know what else i know i know that i also have some padding why need padding because if by any chance i have more content inside let's say like this or like this if i have more content inside i want this content to make my section taller so that's why we want to apply a padding from the top and from the bottom and in order to see how my padding affects my container and my section i need to drop another dip block so let's drop another d block and add our form container inside so with my section selected i'm going to do command a to open up my quick find and i'm going to do a d block remember never do never add the section inside another section that's not how web works good what i know about this div block well i know that this div block is my form container if we go back right here we can see that this is my section and this is my form container so let's go back and let's add a class i'm going to do form dash w which stands for wrapper you can do dash c which stands for container i love wrapper because it's it's a smaller wall or it's a smaller word so let's do enter so i'm having my form wrapper right here okay what i know about my form wrapper well i know that it's limited to 568 pixel in width with this in mind let's copy 568 let's go back to my form dropper i have just created and in the size right here for the maximum width i'm going to paste my 568 pixel and now i know that my form wrapper will not become bigger than 568. it will eventually become smaller but it will not become bigger it will not become wider than 568 pixel that's what maximum width stands for okay what i know well i need to click on this magic button which will align to the middle of the of my screen my form wrapper right here and then from here what i can do is i can go back to my cda form to my section form and i can start adding the padding with my option key i'm gonna drag the padding and as you can see webflow evenly distribute my padding so with the option key pressed on workflow distribute evenly my padding from the top and from the bottom so let's do 60 pixels the power of two 60 pixel oh 16. good 60 pixel now if the content inside this section will become taller than 700 pixel which is the minimum height of my section the padding would just apply to this section will push the content and we'll have this section to become taller that's it what else i know i know that the container this form container i'm having right here it's in the middle of my section with this in mind i need to think about the display property i need to apply to my form section so let's have let's let's have um a meditation session here so it has to be aligned to the middle vertically and also horizontally what this clip property can i apply well guess what that's display flex so with my cda form selected i'm going to do display flex i'm going to choose the direction vertical why because the elements that go in my form container these elements these and these elements they're vertically aligned like they're not horizontally aligned like this they're vertically aligned with this in mind let's make sure the direction is set to vertical let's justify my items to the center that's it i don't want to click right here to align them to stretch horizontally why because it's already looking good i want my items to be stretched out yeah i wanted them to take the entire width of my 568 pixel the minimum the the maximum width i've set for my form wrapper good so now my form wrapper it's a small square one by one simply because it lives inside a flex parent so let's do one thing let's start adding my elements inside my form container let's go back to the adobe xd and let's have a look so i know that my form container yeah so this is my form container i know my form container have content top this group right here yeah having this group right here and this is just another div block this is just another div block guys so in adobe xd you have groups in web you have div blocks div blocks are basically boxes that group together multiple elements of your web page so i'm having my content top and then i'm having my main form let's add these items in the web flow so my form wrapper with my form wrapper selected i'm going to do command a to open up my quick find and i'm going to drop a div block right here this is going to be the content top the content that goes on the top of my form container and then with my form container selected back i'm gonna do command a to open up my quick find and i'm gonna drop a form block just keep in mind that your form block so let me expand all of these so you can see so i'm having my my my group on the top and then i'm having my form block keep in mind that if we go right here to the element settings with the form block selected guess what the form block it's another div block so it's basically a group of elements and what we have inside well inside we have our form box that have the form tag so what is a form tag an html form tag defines a box that have the inputs the labels and everything related to your form like the submit button so the form tag just simply defines a form inside your web page that's so simple what else we have in this form block well we have the success message and we have the error message and the success message will be displayed when someone completes my form the error message when something went wrong when completing my form maybe might be the the web flow servers might be because my form hasn't been properly set up that's it but anyway i know that i have my form block which in essence is another div block it's another group of elements that have my form tag my success message and my error message and guys throughout this tutorial i'll do my best to refer the form block as the form block and then this one the form box as the form tag okay just don't confuse the form block with the form tag let's go right here on the top with my content top selected my div block now let's add a class so go right here to the style pane and let's do form dash top good form dash top what i have inside well inside my content top right here my form top i have the headline and i have a paragraph with this in mind let's go back to the web flow so from top i'm going to do command a to open up my quick find and i'm going to do headline heading remember every section of your web page should have an heading 2 level only one section have h1 that's your header section that's the first section you have on your web page so i know this is an h2 what else let's select right here from top back let's choose the parent element and let's do command a open quick find and drop a paragraph so i'm having my headline and i'm having my paragraph what's next next is to copy the text so let's copy this text from here let's paste it right here and let's copy also my paragraph and paste it right here what else well i need to define a color for my headline and my paragraph it's white and i also need to define a gap and align my text to the middle so again you need to have this mindset you you need to know what type of display you need to apply right here so let's first deal with the with the color so i'm going to select my form top yeah my content top my group that have my heading and my paragraph and i'm going to go to the line and make sure i do align my text to the middle of this parent element of this group what else well i know that the color is white good so now i'm controlling both colors of my headline and my paragraph from the parent element from the form top right here why this is happening because both my headline and my paragraph they're inheriting the color from the parent element which is form top and you can i quickly identify the parent element by just clicking right here you can see that my paragraph is nested inside my form top and my form top have a predefined color which is white good okay what else well i wanted to define the gap so instead of adding a class to my headline instead of adding an additional class to my paragraph what i can use instead well with my phone top selected i'm going to use our amazing display property grid and now with the grid display property i can now play with the gap between my headline and my paragraph so what i know about my grid well i know i have one column and also i have one row because remember the direction of my grid etcetera this means that every new element i add in this grid system will be created as a new row and because i already have a heading right here my paragraph which is my second element in my grid system will be created as a new row with this in mind let's click done and as you can see i'm having my heading right here and i'm having my paragraph which is the second element and i'm having this gap right here simply because we have used the display grid property let's choose my display grid back and let's see what's going to happen so as you can see indeed i can control the gap between my headline and my paragraph now let's make this gap a little bit more narrowed so i didn't know let's go to rows right here and let's say 10 pixel let's hit done and have a look yeah it's looking nice so i'm having 10 pixel margin 10 pixel gap between my headline and my paragraph and remember we haven't added the class right here we just used the power of the style inheritance for the text alignment and the color and we set our form top to be display grid that's so simple okay and we're going to do the same for all the elements right that we have in our form container so we already played with the display grid but now we want to make a gap between my content top and my main form and as you guys probably guessed we're going to use another display grid to control the gap between these two elements so i'm going to select my form container this one right here that have my content that goes on the top and my form block and i'm going to go to display grid and what i know so far about this grid well i know it's one column and i know it's one row because it does have two elements and the second element which is form block will be created as a new row why so because my grid direction is set to row let's hit done good and now if we click on the form wrapper if we click on edit grid you can see that now indeed i can control the gap between my content top and my form block just by using the display grid property so let's go back to adobe xd and have a look so it's the 65 let's do the same so because we care about the power of two instead of 65 and because we also have text block that have a little bit of padding inside it i'm gonna go with 62. so the gap between my top content and my form block will be 62 pixel it's looking nice so remember we're trying to use a small amount of cs of custom css classes we need to use the grid when controlling the gap between the elements we need to use inheritance when controlling the colors or the alignment of a text inside a group and basically just having this mindset what do we know about our form block well we know about our form block that it have a form inside it have the success message and the error message right so my form block i have the form tag i have the success message and my error message so let's select the form block and let's add a class that's going to be main dash form and i can also say dash w which stands for wrapper so this is my wrapper for my main form let's select our form tag remember not the form block that's a div our form tag because if we go to the element settings we can see that this form box right here it's it have the form html tag basically defines for our browser that the element that goes inside this group are the elements of a form with my form tag selected let's add a class also so i'm going to do main form so simple we have the wrapper for the main form and we have the main form itself okay now what i love to do next is i love to delete to remove all of these items webflow ads by default and add my custom items and as you can see as soon as i'm removing all the items for from my form tag not my form block webflow adds this gray color this background color to my form tag good so i'm not gonna i'm not gonna i'm not gonna play a lot with my form block what i have to do is by default webflow applies a 15 pixel margin so i'm gonna remove this margin right here then i'm going to go to my main form back and what i know about my main form let's go back to adobe xd and have a meditation moment so here is my here's my form tag right here i know that this is a group of elements what i know well and i see that i have rows so right off the bat i know that my form tag should have the display set to grid should have the one column and should have one row and all new rows will be auto created good with this in mind let's go back to our workflow to our main form and set the display to grid and while we know we know it's one column and it's one row every new row will be auto generated let's hit done and let's start adding our first row right here let's do command e so with my main form selected command a to open up my quick find and i'm gonna drop a div block now this div block will be my form row it's gonna have multiple elements and you're gonna see in a moment what i mean by that so with my new d block selected let's do form dash bro this is a row of my form if i do copy it and paste it one more time in my main form in my in my form tag you can see that indeed it's being created as a new row inside my grid system so my form row what i know about my form row let's go back to the adobe xd and have a look well i know that my form row sometimes might have two elements inside like two columns and sometimes might have only one column so i know that the display should be grid and the direction should be column y column because every new element i add in this row will be created as a new column like this column we have right here and also maybe another column that i can have later on so i know that the display should be grid and the direction of my grid should be column so with this in mind let's go back to my form row and let me arrange a little bit my my keyboard right here and let's set my form row to be display grid now what i know about this grid system i know that it's one column and one row by default yeah but i also know that the direction should be column because every new element i add inside my foam row will be created as a new column so let's hit done and inside my form row let's add our field set so i'm going to do command a with my form row selected and i'm going to drop another div block good i have my d block right here which will be my field set so let's add a class field so field field set dash w which stands for wrapper what i know about this field this field set i know that my field set have a background color of white so let's do white what else i know i know that i have some elements inside i'm having my form label which we're going to cover in a moment what this means and i'm having my input good and as you can see my form label and my input are grouped together why so because as you can see here below right i'm also having a form label i'm having my input but i'm also having on the right my icon and right off the bat i know that this will be that my field set will be display flex because sometimes inside my field set i'm having two elements i may have a group that have the the field set that have the label and my input and i also have the icon right here so let me show you how all of these works so obviously you want to have you want to think about scalability so inside my field set i want to do command a open up quick find and drop another div block now this d block will be a group of my label and my input so let's say field good that's going to be my field what i know about my field i know that my field have a label yeah so i'm going to type label and i know that my field also have an input so i'm going to do input good what else i know and guys don't worry we're going to talk about all of these options in a moment what else i know well i know that my field set not the field the field set that might have the field and the icon it's set to display flex so i'm gonna do display flex i know that my items are horizontally aligned right they're horizontally aligned and i want my items to stretch the entire space i'm going to do stretch and then for the justify i'm gonna do space between let me show you how this applies in action so with my field set wrapper selected i'm gonna drop my submit button right here so let's do button so form button this one because we need to submit and as you can see indeed my field group that have the label and the input goes on the left and my button goes on the right why because for the field set wrapper we have applied a display flex which pulls my elements to the left and to the right good what else i have to do so for my field i want my field to take the entire width of my field set if there is no uh no button or no element right here on the right with this in mind let's choose my field and under the flex child let's make sure we click this one grow if possible and as soon as i'm gonna click this you can see that indeed my field is growing in size and width until he reaches another element in this field such group that we have created and now one more thing that we can do with the field set selected with the field selected the one that have the label and the input so with the field selected i can add a little bit of padding so let's say 10 pixel so there is a little bit of there is a little bit of gap between my field and my elements that will go right here on the right this may be the submit button this might be some icons okay let's choose back my field set dropper the one that have my field and my submit button and let's uh let's actually add a little bit of padding so with my field set wrapper selected i'm gonna do i'm gonna hold the shift key to evenly distribute my padding from all the corners that's it so let's do the power of two let's do ten good so it's ten i think it's looking nice now we have of course to define some styling right here to look to make it look identically as in our adobe xd design so let's do the next thing let's first of all remove our button we want to we want to have this feeling we want to see how our field will become will grow if there is no element right here in my field set and as you can see indeed my field is growing in size if uh he does not have any obstacle right here on the right like the submit button or an icon that we're going to add in a moment so let's start styling our field set let's start with our text field right here and let's add a class so i'm going to reuse chances are i'm going to reuse this input so i'm going to type input i have my input by default webflow applies a 10 pixel margin that's it good and now by default webflow also applies a height as you can see now please do not change this height if you if if the placeholder that will go on our input let's say it's 14 or 60 pixels don't make the same height like don't make the height to b16 because what's going to happen is it's going to be so hard for the user to type it right here and it's going to be hard for him to access this input look what happens when i'm trying to to access it i need to literally hover my mouse over this placeholder so never in your life define a height for your input because it's it's going to give you accessibility problems what you can do is you can use padding instead that's it but in our instance i'm going to remove my padding that's it because i already have a predefined height for my input which is looking quite nice for me what else i know well i know that i know that i don't have a white color i wanted my background color to be controlled by these big filthy drop right here which we already said the background color to be white with this in mind let's choose back our input and let's click on this white rectangle and choose this transparent rectangle so we can set the background color of my input to be transparent good what else i know well i don't love the i don't love the color of my placeholder so how to change that really simple with my input selected i click on this arrow which will expand different states for my class for my element and i'm going to select placeholder now i wanted to override some of the properties i'm going to select my color right here and as you can see i am changing the color of my placeholder now i want my placeholder to be a little bit too gray right so when someone types uh when someone types the data inside like email or their first name uh they can see the difference between the placeholder and what what they type there so i already set a color for my placeholder it's looking good let's go back to my non-state and what else i need to do well i need to play with my label now why labels are important because without having a label you're going to have this problem in the google lighthouse audit that form elements do not have labels labels are important in web because they help assistive technologists to understand what that input is about is that about the first name is that about the last name the email the phone number and also the fields uh the label also have a special tag which if we select the field label go to element settings we can see that indeed this text label this field label have a custom html tag which is called label which helps the browser to understand what my input is about is it about the first name the email the phone number it also helps your users so there's a reason why you have problems in your accessibility because your input does not have a form label put simply this if your client completes a 20 or 30 fields form and if someone call him his phone ring he talk for one hour long or two hours long on the phone maybe this might be a sales call who knows then later on when he hang up and he wanted to resume to complete the form guess what he might forgot what that form is about what he needs to add in this input so if this input is about the first name and if you type here first name so first name right look what's gonna happen as soon as i'm adding my information right here the placeholder disappear and because i'm not having a label on the top which literally say to me first name i might forgot because i'm human being i might forgot what this field is about and i will have to remove my entire data right here like my entire first name to reveal the placeholder and what if another client calls me and for one more hour i'm on another call so that's why you want to have this uh this label right here that's important so you let the user know what this input is about so let's select our let's select our form label let's go to the style pane and let's choose html tag all labels what this will do this will style all the labels across our entire website so all labels selected by default webflow applies a 5 pixel margin let's remove that what else i know i know that i want my form label to be aligned to the left it is a line to the left yes it is aligned to the left i'm going to leave it as it is i don't have to override or duplicate the css rule that already looks good what else i know i know that it's rubik it's medium so i'm going to say medium and i also know it's 40 pixels so let's do 14 pixel and hit enter i don't want my height to be so big it's not a clickable object and chances are it's it's not going to expand from a new line so for the height i'm going to do 20. it's looking good now the final step i have to do is i have to exit all of these and i have to look hey is my form labeled too far from my input well yeah probably yes so let's select my input and let's do one more thing let's remove the border so with my input selected under the borders i'm gonna do style none to remove my border and the width will set to zero so i'm removing that gray border i have for my input what else well i want to move my field label a little bit to the bottom so it's closer to my input i don't play with the height of my input remember the input should be really easy to access for your users so what i'm gonna do right now is with my form label selected i'm gonna say hey i'm gonna select all labels i'm gonna go all the way to the top where it says position and i'm gonna change from static to relative why so because i want to manually move this item to the bottom without affecting other items and i also want to have a z index right here so when i have the z index of 0 yeah y 0 because my firm label will be on the bottom of my layer and then i'm going to have my input on the top with this in mind let's choose my input back and let's change the position from static to relative because i also wanted to create i also wanted to control the z index of my input and my z index will be one it's gonna be on the top of my label my label has the index of zero which is right here and my input is index 1 which is on the top of my label good what else well what i'm going to do is i'm going to select my form label back i'm going to choose all labels and i'm going to change i think i'm going to move a little bit down so let's say 4 pixels let's do 4 pixels 4 pixels it's looking 9. you see this overlap right here don't worry it will not impact my input the user will still be able to click on my input right here and type his first name that's it he will also be able to click on my label if he needs so so don't worry about this gap between we already know that we already know that my input is on the top of my label so it's going to be easy for the user to access my input let's finish up with styling all these elements and adding the content so with my form label selected i'm going to do first name good and guess what we need to select our input and define the properties and the placeholder so with my input selected let's hit enter to open up my input settings and now i need to to play with a little bit of these settings so first of all let's do name what means name every input in web needs to have a name but why webflow needs a name well real simple if i'm typing right here first name which is the name of this input later on when someone submits your form and if you go to the product settings to the form webflow will create a column named first name so let me let me let me show this to you so if i go to the product settings because i have added a name to my input if i go to the forms this is the settings form and if i go all the way to the to the bottom you can see that yeah indeed i have a car i have a table right here with all of my form submission data and the name of the columns will be the name of my input i add in that field so as you remember the name of that input was first name that's that's why the name of my column is first name we go back to our designer we can see that indeed that first name label we have on our column is the same text is the same name we have applied for our input right here so just keep in mind add names for your input so later on when someone submits the information you quickly refer that information to your submission data form inside the the webflow project settings good placeholder what is the placeholder really simple let's go back to adobe xd and copy from here use how should we call it so i'm going to copy it i'm going to go back and i'm going to paste my placeholder right here remember placeholder disappear as soon as i start typing information inside this input okay now let's talk let's let's take a moment talk about the different text types right here so we have a couple of them we have plain email password phone number now it's important to use a proper time because first of all that's going to help someone who is navigating from a mobile phone to display a specific keyboard layout and the second thing it's about data validation and data formatting i did for you guys right here a quick presentation a quick infographic so you can understand all the input types so we have type phone which on a mobile phone will open up the dial pad will allow you to quickly add the phone number this is super useful when you're for example building a login page and you have a maybe pin code and you want to allow the user to quickly input the pin code that's it so that's the type phone only phone numbers are accepted then you have the type link which don't have any data validation any data formatting so you can literally type john smith 3 4 and use special characters that's the keyboard layout it's going to be displayed on your iphone next we have type number which will only display numbers right here will only allow me to add numbers and symbols that are available for the numbers like points or i don't know coma or minus sign so the allowed the loud data the law data are simple numbers float numbers like this 6.6 and negative numbers like this minus 40. so it's important to use a proper type guys so you help the accessibility of your browser to display a proper keyboard layout for your user and also format and validate the data lastly we have this type email which will have this email sign on the bottom we'll have the the dot the period so i can type period com or dot nat or dot org whatever extension i have in my email and in order to validate this input in order to validate my data i'll need to have my email sign and also my extension right here dot com so hope it makes sense to you guys i'm gonna have a link in the description about all of these uh field types and why they're important but just like we have keyboards on my on your mobile phones we have different validations right here so if my input right here would be let's say my password and if i preview this as you can see as i'm start to type it out my characters will be hidden and i'm also going to have this i icon right here which will show me the password i obviously need to publish this because i cannot preview this inside the web flow but other options are numbers and if we do preview we can see that right now we have this up and down arrow keys and we can go negative numbers we can go positive numbers we can go for example 4.6 that's also acceptable right that's it so it really it's it's really important to use a proper text type right here that's it so because that's the first name i'm going to go with plain maybe his name is john smith iii right that's it so that's going to be plain now required means that this field is required for the user to complete remember don't add an asterisk to all the required fields instead add an optional label because if you will add the optional label so just like we have right here let me show you because i actually haven't built this but let's say the email address is a required thing so what you can do is you can type here optional optional and then the user will know that the email is optional or his name is optional and the rest of the fields are required that's it don't don't let the user don't that required to all the fields and not required to the fields that are optional instead just add the optional fields because the user they're smart enough to understand that the fields that do not have the optional label are in fact required fields good so this field the first name is required now autofocus one means as soon as the page loads the browser will jump to this input that is an autofocus and will also open up the keyboard on your phone please don't use autofocus that's super frustrating when someone lands on your side and instead of normally browsing your side right they quickly have this keyboard pop-up and their web page jumps to this section so it's really frustrating don't use autofocus just use required for fields that are required for you good now what else so here is my first field set let's copy my fill set wrapper remember the one that might have the fields and the one that might have some icons were some submit buttons so i'm gonna copy this one i'm gonna go back to my form row i'm gonna paste it right here look what happens voila because my form row have agreed which have one column and one row by but the direction set to column every new field set every new fieldset wrapper i'm adding right here will be created as a new column look new column new column so by doing this you're making your form to be scalable you're basically creating a design system component for your form okay so i'm having my second field set and i know my second field set is about the last name so let's select this label right here let's type last name let's go to my input double click to open up the settings and let's add a name so this one will be last name because i want my column inside my webflow form submission data to have this name for name and then we need the placeholder let's go back and type it here now instead of type it here you can go with something like more generic like example smith or an example of the last name so type it here type text explain and it's obviously required good so we have the first row now let's copy the first row right here so form row let's copy this let's go back to our main form which is another display grade with that direction set to row and let's paste it right here and as soon as i'm past pasting you can see that my form row indeed is being pasted as a new row why because my main form have a grid system that have one column and one row and every new item i add inside every new form row i add inside will be created as a new row so what i know about my second row i know that i'm having my industry and we're going to talk about a new input type so by having my form row and i'm having my field set so i'm going to remove my second field set and as you can see because my row have the direction to column one column will be removed because i have only one element inside my firm row so what my second my third actually my third field is about well it's about the industry so let's copy the label right here let's paste it right here and now what about the industry how they type the industry well we're going to remove this input guys we're going to go back to the field and we're going to cover another input type which is select so with my field selected i'm going to do command a open up quick find and i'm going to do select and now what select does is it will give me a list of options a drop down menu from what i can select an option so yeah this is indeed required i also need to add a name so it appears a column in my form submission data so it's going to be simple industry hit enter and you can also allow multiple selections if you want so and because we already created that input class let's reuse it so input voila that's it now what it says please select an industry so let's copy the placeholder and how can we change the placeholder of our input really simple we go right here with my input with my select input selected i go to element settings to have more settings right here and as you can see right here we have choices right here we're going to paste all the industries we're going to have all the choices that the user can make so we obviously need to change the the first one we're going to do we're going to click on this pen icon and the text is going to be please select an industry now the value is the value that will appear guys in your form submission data what is the value of this select and the value is obviously my industry oh my gosh and the value is obviously the industry that's going to appear in my form submission data table inside my project settings so my value is going to be empty there's been no value here because they need to make a choice now let's say the first choice will be let's see an industry i don't know ah let's do design that's an industry so the text this is the tags that will appear in this drop down menu and the value is the value will be applied when the form is being submitted so the valley is also designed design or you can do design and art something along those line remember that your clients will not see design and arts you will see design so let's click save so we have all the choices right here and if we do a preview we can see that we have multiple choices right here good we can choose design we can choose development we can choose education that's it so we just covered another input type which is select now you have more types here i'm gonna make sure i leave uh an article in the video description about different types like check boxes radio buttons we know that our our second row also have this icon right here so let's select our icon let's do right click and export selected and we can export these as an svg we're going to paste an ad embed as the g code let's make sure we optimize this we minify the svg code and let's choose export good so my icon is right here so let's open up inside my item and guys i'm going to have the item link in the video description so you can download it good so we have to add the current color fill equal current color attribute so we can control the color of this icon from the web flow so here is my icon it's an remember the svg illustration is just an html code with the svg tag applied so let's do view to go softwrap to view the entire code and we have this field right here so let's actually remove it from here because i wanted to make it somewhere here so let's do fill equal double quotes current color good now i'm going to leave the width and height as it is right because we can apply the flex so let's copy the entire code let's go back to our web flow and look we have the form row inside the form row we have the field set and inside my field set i'm gonna do embed and inside my embed i'm gonna paste my code and click save and close and now as you can see indeed my icon is taking the color from the field set wrapper and the fill super upper color is set to black now what i have to do is i have to choose my html embed another class so let's say filled icon field icon what i know about my icon it's 24 by 24. i want to maintain this 101 aspect ratio so 24 by 24 pixel and i want to the svg code that goes inside this embed to be aligned to the middle both vertically and horizontally that's why i'm going to choose display flags align to the center both vertically and horizontally now what else well i have to define a custom color so let's go back to our adobe xd and let's let's have a look what color we have right here let's click on our icon let's click on fill copy the color let's go back to the web flow and paste it right here and because we have applied that current color that fill equal current color attribute to our svg code it will take the color from the typography right here good good it's looking good now what else we have to do well our icon is not aligned to the middle why so well chances are because our field set have this i have this stretch right here so let's just align all the items to the middle that's it that's it and now as we're developing these guys you can probably know that we also need to play a little bit with the padding so let's add more padding right here now let's do the power of two let's do 10 let's do 10 and let's do a little bit more padding from here and maybe a few padding from the bottom maybe let's do actually let's do two maybe two is too small let's do four so do do four good that's it it's looking nice i have my icon right here and guess what let's finish up our form so what else we have one more row so let's copy our form row right here let's copy this and i know that i don't need a row that have the select so i'm going to copy another form this one with um with the first name my last name let's copy these let's choose back my main form and paste it right here good what i know about my last row well i know that i need to remove one field set from my row good i know that i had that's about my email address so let's change the label let's do email address let's go right here to my input double click to open up the settings and that's going to be email address because that's exactly how i want my column inside my form submission data to be named and let's have the placeholder also so type your email address here let's paste it here good and it's indeed a required field but this time the text type is email because why i want my data to be validated i want my data to have the so let me do a quick zooming zoom out i want my data to have the the email icon and also the extension so dot com.org or net wherever the extension is let's go back to the web flow let's close this one and let's see what else we have to add here well we have to add our form submit button this one get started so with my field set selected yeah this one that have the field with my field set selected remember that's the display flags flex space between i'm going to do command a open up quick find and i'm going to drop a form button good now as you can see my form button is being aligned right here to the right and because we have applied to our field flex grow it will take the sp entire space until it reaches our submit button so what we have to do right here well we have to define a class for our submit button so we only created a basic class for our button but this time as you can see we have a height or predefined height i want the height of my bottom to be controlled by the padding so guess what i'm going to do a combo class right here which will be btn sm which stands for small i'm going to remove the height so on the height i'm going to say auto because i want my height to be controlled by the padding and then what else well i can do a little bit more padding right here yeah 14 is good let's do double click and see and change the bottom text so it says get started okay and we'll leave this color as it is because if we're going to use this color guys it's going to give us accessibility and contrast ratio problems please wait i think it's looking good let's hit enter to apply this text and voila we have our entire form right here fully scalable what else our form have well our main form the group that have the form tag right here yeah the form tag also have this info message so let's copy this info message and with my fin form selected with my form tag selected let's do command a open up the quick find and let's drop a paragraph right here good remember if you have a sentence you want to use paragraph don't use text block use text blocks only for labels for example labels like this one for whom if you have at least one sentence use paragraph so let's choose our paragraph command b to paste it and guess what well it's black but we already know that this black can be changed by inheritance from another class so let's choose our main form let's go right here main form and let's set the color to be white and as you can see my field label is now white because it's inheriting the color from its parent which is our which is our main form so let's select all labels and let's define a new let's define a new color good now all my labels are black what else well i know that this paragraph right here it's centered so let's select my paragraph right here and let's add a class so we're going to do form message good and now the thing is that chances are on some pages where i'm going to reuse this for message my four message will be aligned to the left might be a line to the center right it might be aligned to the right so that's why i want to have a basic uh for message that will have the text aligned to the center and then i can add a combo class and align it to uh to the left that's it and what else i know well i know that my message is 40 pixels and let's do 24 right here and i know have a max width of 400 pixel so let's go back and with my form message selected max with 400 pixel what else well i know that it lives inside the grid and i wanted this to be centered inside his cell so with the four message selected i'm gonna go go all the way to the top and under the greek child's panel i have justify i'm gonna click justify center that's all that's all i have to do and voila we have our form ready to rock okay now last thing to do is obviously we have to publish the changes and do a google lighthouse audi to see exactly how we build this section and if we build it correctly so let's open up yeah just disregard this goat image i'm having on my microsoft edge let's scroll the way to the bottom this is my form you can see that because we use the proper type the auto fill also how to fill from these is right here so chris chris for the first name this is for the last name right same goes for the email it will only uh it will only show me email addresses and now for the industry it's not an autofill because i have never i never i never saved an industry filled in my autofill that's it and when i could get started it obviously asked me to to complete all the required fields okie dokie now let's do a lighthouse audit right click inspect we go to the lighthouse and if you don't have these guys just click on these three dots actually like these three dots this right here more tools and then you have lighthouse so lighthouse i'm going to do performance best practices accessibility and seo for the desktop and generate report so let's have a look voila 100 good so that's it because we have used the proper we have used form labels we have maintained a good structure and scalable structure for our form block that's why we have all of this on 100 that's it so you can see no issues this one you have right here it's because this made in webflow badge but if you host it on a live domain you will not have this problem for accessibility no issues whatsoever no no problems with the contrast ratio no problems with form elements do not have labels so all looking good right guys so i hope this video was super informative for you please apologize me for making so long videos but i want to convey the most of the value i want to share my value my expertise to you and i hope that you'll apply all of these tips that we have learned today just remember all of your lay all of your inputs needs to have labels we also talked about uh the display grid uh we one more time convinced ourselves that this grid system it's really amazing it do really magical stuff it allows us to control the gap between the elements and it um most of the time it allows us to build scalable ui system it allows us to group different elements move the elements inside a grid without affecting the hierarchy of a side move the elements on different break points and lastly we also covered how this color how the style inheritance works that's it so i hope it was super informative for you guys now make your form submit your data and see how exactly is being displayed inside your webflow form submission data as always make sure you like this video make sure you do subscribe and click on that notification bell so you're notified next time i'm uploading a new video if you have any questions let me know down in the video description i'm gonna have an faq section with commonly asked questions so you can quickly find and ask for for you thanks one more time for watching this video love you all bye bye

Channel: Chris Tsurcanu

Views: 510

Keywords: webflow, web-forms, label, site-speed

Id: ro2ZMK4UFno

Length: 64min 50sec (3890 seconds)

Published: Mon Mar 08 2021