How to use Ninja Forms layout and styles addon

hey wordpress league i'm going to drop the packaging with another episode of the ninja forms styling features this is a continuous process of continuous tutorial of ninja forms uh in this section in this tutorial i will show you how we can style the ninja forms with the premium version of the premium add-on of the layouts and styles of the ninja forms add-ons so in this usually you'll get the idea how we can customize or how we can add the left or double column field to our forms or how we can create a design basic layout design or you can add the border radius which is missing in the free version of the ninja form so you can add the border radius to the form fields or default form styles so all the things are available in the styling features of layout and style switch advanced options of ninja forms so it's a premium add-on so if you want to uh create styles and build if you want to use the built-in style of the ninja form so in this case you will be needed these features and to have all the features you have to uh you will be uh you will have to pay the 49 bucks uh for a single add-on or if you want to jump with the membership plan so i have shared in my previous video you can check that also you can get to hit their pricing buttons i will share the all the descript all that info informative links are in my descriptions below so you can check them from the descriptions as well so what you will get in the layouts and column sections so here is the complete descriptions in this part what you will get in the layers and comments and i will show you the in details in my tutorial so let's open my tutorial section after purchasing the plugin from here i will get the downloadable file after download the plugin from their website just upload it from the add new sections which are previously shared so after activating the plugin uh the layout and style settings will be activated here it will show the active button here and new things new menu item will be available in the left side but in the ninja forms menu sections the styling features these sections will be available here you will get the idea the styling ability from here this is the global styling features for all of your ninja forms but you can create an individual style form from the editing panel of the form editing panel from the ninja forms while you while you are creating the prompts from living panels you will create their search options too so this is the form style in the form style you will get the container style how we can design the container how we can design the title style uh required message style and the row styles odd rules styles even though or draw and successful message style you can do it also if you want to add additional css these just hit the button so advanced this is properties you can see the advanced properties so in case of advanced properties we need some knowledge about how we can add the advanced properties or css information so css code here so here is if you want to add the margin you have to follow this method i will share the descriptions or documentation link in my description sorry so you will get if you want to add the border radius then i have selected that name so i have tried it a lot so you can do it as i'll show you in later how you can add these features okay moving forward i just want to create a new form before doing that in this for in this tutorial i'll show the code from so i want to delete my previous code forms here is some interesting features of ninja forms if you want to delete anything you have to write delete otherwise you don't delete okay okay this is the case sensitive i hope so d-e-l-e-t-e yes this is the case sensitive so i just write again you can check it i just write it in a small case so the delete will not be performed so i have to write delete i am very much lazy i just did it there so this is the way how you can delete the ninja forms or forms from your website while you are using the ninja forms yes i like to click here i just do quotation plugin so if you are questionary so this is not the quotation this is the questionnaire plugin so okay uh if you want to change the title of the form what else you can do it you can do it from here oh sorry my bad you see you can do it from the advanced section on the on the display settings you will get the options questionary demo that's it that or you can if you want to hide that title from from title you just hit the button and set the hit button so let's check the preview questionnaire demo what happened form title i want to remove the phone title hit the publish ah from data line agent so [Music] that's it this is how we can do that oh here is our new thing we you can see this is the style settings from the individual form you can set individual styles that's it let's move forward the most interesting part is here so what else you will get in the styles and layout section so if you these are the single line forms form fields so i want to make it in the two column form fields so in to do that you have to just select let's check you have to select here or here just the form fields you have to select the form field and drag it on the section on the column section where when the green color appeared just drop there see that's it okay if you want to undo the sections so you what else you have to do you have to do it from here in this case you will get an empty cell so if you want to keep that empty cells you can do it or if you want to delete them results you just click the delete button but i want to create the first and last name in the same row okay now i want to do the same thing for the email confirmations so left to right it isn't right to get identifications i want to make it okay then this is the age verifications and the question one question two i have nothing to do it here so i want to [Music] question 4 i want to add something extra here something like that i want to add a city name address field we yeah i have added address field so on the address fields i just follow followed by that this field i like to add the cd now i like to add states so if you want to add the usa states that you can set the usa states from here or if you want to just skip that part just you want to add city and country and if you want to add the cheap code i have added the cheap code city you could and country that's cool so i have a three options uh email email verifications okay um let's see it okay i don't want to okay uh i want to add a divider here to make it more crisp so these are the informations personal informations are available here so i want to add more divider here so that user can get the idea so see how i have uh move the form fields from here and i have c column fields so which is not available in the free version so you have to use the options so let's hit the publish button let's check in the preview see this is how it looks like so you get the file name first name and the last name and the address field and that is filled in there elsewhere you will get the ctg code and united states uh sorry this is a country or email email confirmation email gender identifications so you you want to keep it their own age and then our times with the questions this is how easily you can design your form in a different way now it's time for the styles options so you can select the styles the background color if i if i want to use the red one just check how much it changes now okay select great the pattern full container color will be changed here so if you want to just remove a code will be the hex code you can set your hex code or you can select from here or you can choose anything from this style if you want just check this is the best color picker two two options to check the color or pick a color from the scratch so you can see the reflection here but the bad thing is you have to bar you have to do it repeatedly in the preview section and go here and check the color what color is these and now i want to add the hundred percent margin of leash let's check okay i made a mistake this is not cannot be done 100 100 p x if i added the px it's a completely trial and error process because i don't have uh the margin and padding information so if you want to the margin here just just give it here if you just want to add the pen padding here so padding must be then options the percentage options so let's check it from the padding so padding has a hundred persons but the features of our gun so to make care to be careful we have to do a deal with this case might be an options so let's check it does it appears or not forms are here so my left hand right hand side options are bigger but all the forms are getting shrink so i don't want to do that in that case you have to follow these style options so first one will be the uh top the second immediate second one will be the right and the third pxl will be the bottom and the fourth pixel will be the left so i want to remove the lid and the bottom left and the right side options adding options so 500 px top uh 250 px then let's check padding in the left i have done the left and the right side you will get the if you want to keep the same then you have you have to add the three value or if you want to save the full value then you have to form another more more pixel so or if i add these options for the option publish see the changes so now you can see the changes so this is how you can style your picture or padding this way i don't want to use anything just use the default color white done so i don't want to use any color right now so this is the way how you can add color also you can select the extra additional css add the extra additional css from here for your whole continuous sections also uh if you want to customize your title section like that this is the background title color so if you want to check it so yeah here is the color color is not appearing here oh i forget i remove the uh title box so i didn't get dyed uh information the color changes it's not reflected here so in this case [Music] title is not available here so i don't know i don't have to add the title color in if you want to add a row uh background color rules background color you can set it here butter wheat i don't want to do that whatever uh and dash or dotted i'm just checking purpose i'm just giving it border color i don't know that display padding margin so in advance section you want to add something advanced css so you can do it let's check it again see this is how it uh change in the front trend so but i don't like that so if you want to remove it just go to there style section keep in mind which section you have change yes delete select none so this is how you can style your ninja forms okay uh if you want to add a border radius to your form fields so in that case what should you have to do in that case you have to jump on the ninja forms back end so go to the dashboard of the ninja form is styling sections uh go to the form style or elements go to the elements what is the elements pro required styles title styles required messages fill type in that case in the default fields go to the default field style in the element style show the additional css i have added already a 505 pixel so i want to add the 15 pixel here so now check the changes see the changes appears here uh the drop-down menu options is not working here so you have to do some extraordinary coding here so you can see the the form field levels are become so around cycles and it's a common form so it's a default theme default options so you can change it here which color you can also change the different color form fields of the container color all the things from here and you can you know either message the styling from here that picker style from here so you can do it by here so best thing you have to do you have to do a trial and error process because there is no live preview for here to left hand side like other page builders has that feature so if you change here the replacement will be available in the immediately here but you in this case you have to hit the publish button and check it in another tab so it's a very uh time consuming matter so i have shared all the informations all the possible things in this short time so if you want to create a double or triple column form fields if you want to add the different type of form fields so that you can use the layout say and style add-on also you can change the color water radius give a water radius or anything special to your form uh styling style special uh styling options to your phone so you have you can use these uh layout and style add-on of ninja forms it will say it will save your back while you are creating a customized theme or customized form file for your forum for your website or for your client website so this is all about for today's layouts and style add-ons uh features uh which is available in the ninja forms premium version so this is the single add-on so it's it's self a premium adam so if you want to add this enables just hit the add to cart button and buy this i will give the link uh in the descriptions so you don't have to bother or searching here and there to get the item for you so this is all about today my dear friends stay connected if you find these tutorials helpful so encourage me by subscribing my channel and share and share it with your friends and also give a thumbs up also share your opinion if you find anything if you want to know or if you want to learn or if you have to discuss anything with me uh then definitely do comments on my comment section so i am uh signing off for today and and this is the last video for the ninja farms so one more thing i'd like to give you a reminder ninja farms 10th anniversary sale will be coming soon uh so keep yourself up to date with the ninja film subscription links i will give you the link of the while when the league will the sale will be alive uh we'll be live then the ninja fun team team will definitely inform you through their email so you can subscribe their uh upcoming sale news and updates i will give the link in my descriptions so it would be a huge discussion 80 percent discount on ninja farm memberships plans so don't uh miss the chance if you are running a website or if you are running a agency site or if you are if you want to buy if you have a plan to buy the ninja phones premiums so it will be a great options to save your penny as well as to get a great excellent product so that's all of it for today i am going to talk the signing off for today see you in the next video tata bye bye ninja style

Channel: Gobinda tarafdar

Views: 235

Keywords: WordPress, WP Beginners, ninja forms, ninja forms tutorial, ninja forms wordpress, how to use ninja forms in wordpress, wordpress ninja forms, ninja forms tutorial 2017, how to use ninja forms, ninja form, ninja forms setup, ninja forms settings, ninja forms set email address, wordpress tutorial 2021, wordpress tutorial for beginners, contact form, contact forms review, contact forms in wordpress, ninja forms layout and styles, how to customize ninja forms contact form, css

Id: QLzEn24vce0

Length: 21min 46sec (1306 seconds)

Published: Mon Jun 21 2021