Gravity Forms Tutorial 2021 | Create a Simple, a Conditional Logic & Crazy Form! reCaptcha & CSS

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
Hey guys! It's WPress Doctor here, and in this  video I'm going to show you how to create three   different Gravity Forms. We're going to create  a really simple Gravity Form with your name,   your email and a field where people can ask  a question to you. We're going to create a   advanced forum with all kinds of conditional  logic, so you know exactly how that one works.   And we're also going to create a crazy form,  which contains all of the advanced fields of   Gravity Forms. But not only that, we're going to  add a signature field so people can actually sign   your form, and we're going to add a PDF option  so that it will be automaticly put into a PDF   and sent to your client, and to you as the  website owner. I'm also going to show you   how you can add some CSS to change your Gravity  Forms button and style them. It's going to be   awesome. I assume you already have Gravity Forms.  If you don't have one, there is a affiliate link   in the description of this video, so you can  get it. Let's start with this tutorial.   So login to your WordPress dashboard. Let's  go to 'Forms' on the left side and click on   'Forms' again. This is your Gravity Forms  overview of all the forms we have created.   There are none yet so we're going to create one.  If you do not see this screen but you're looking   at this screen, then you are using an old version  of Gravity Forms my friend! And what you need to   do -no worries- just go to this video and you will  learn exactly the same but in older versions of   Gravity Forms. Alright. But when you're looking  at this screen then let's click on 'Add New'.   And we're going to start to create a new form. So  let's give it a title. The title is only for you.   So let's create "Simple contact form" and the  description is also only for you. "The form   for the contact page". And press 'Create Form'.  Welcome to the Gravity Forms builder. This is a   awesome, simply drag and drop builder from Gravity  Forms. It is really easy. On the right side,   you can see all these standard fields such as  texts, checkboxes, radio buttons, phones. ADvanced   fields we have over here with names, date,  time, phone, addresses, website, we have   post fields also, which is very interesting, we're  going to cover that later on. And of course we   have pricing fields with products quantities. So,  let's start with the first one, the single line   text. If you want to create a really simple  contact form. Then, the first thing we want   to know from our customers is their name. Now you  can choose this one, the 'Advanced field' Name,   but as you can see, when I add it, we get  two fields, the first and last name. Now,   when talking about conversion optimization, I  always say, less is more. Because the more space   you need in your form, the more space it will  take up in your customers mind. And the bigger   the chances that they won't fill it out. So, we're  not going to use this field. Click on it and press   'Delete'. Okay, we're going to use this single  line text. When I enter it, I click on it,   and then I can change the field labels, so let's  make this "Name". The description is pretty easy.   "Fill in your name right here . As you  can see it, it appears below the field,   we're going to change that later on at  appearance. You can change here the input mask,   if you want a mask like a phone number or anything  that will change the way the people can interact   with form. I'm going to demonstrate it later  on with the phone number. Maximum characters:   you can fill it out if you don't want anyone to  fill out the name with 50,000 characters long, but   no one will ever do that. Of course,  this one is required. And let's go to   Appearance. The placeholder is the text that  people will see inside of your fields so:   "What is you name?" you can actually fill this in  right there but the question: name is very logical   so we're not going to use this right there.  The field label is it visible or is it hidden,   as you can see it will change right there  to be visible or hidden. We're gonna make it   visible. The description you can use  it, you can change this for below,   or above your input field. I always keep it on  the form settings so we can change it in one go,   I'll show you later on. Actually, we're not going  to use a description for this field, because   your name is really simple to understand we  don't need to help people filling out this field.   Okay. The custom validation message is really  nice when you make fields mandatory or required,   then you have to fill this out. "I  would really like to know your name".   So that when people leave the field empty, this is  the message that they will see in red. Custom CSS   class- we're going to leave it empty right now.  You can change your field size you could choose   to medium, small or large. If you go to 'Advanced'  you can fill out a admin field label this only for   you, and a default value. We're not going to  use it right now. The visibility of the field,   hidden administrative or invisible, it will  be useful later on, and allow dynamically,   we don't want it right now. Alright, so that's it.  We have the name, let's add another field because   we don't want to need to only know their name, we  also want to know their email address. So we go to   the advanced field, and you drag and drop 'Email'  right there. Alright, I want the email to be   next to the name. So what we're gonna do is we're  going to drag this one and drop it right there.   So now we have two columns in our form, pretty  useful. All right. I also want to change the   label like this, and I want to make it required.  Let's add another field. I also want to know their   phone number. Phone numbers are here, of course,  you can make this phone number also required but   if you don't absolutely need their phone  number, just leave it off. Because this will   make sure that a lot of people will not fill out  your form because most people don't really want to   give out their phone number straightaway. We're  going to add another field and the last field,   we're going to add is a paragraph text right  there. With the paragraph text, of course you can   make people: "What is your question?". And they  get add it right there. So as you can see I am   still a little bit of whitespace right there. Now,  you can fill this up but the less is more -as I   told you. So why don't we just drag this one?  We're gonna drag this one. And why don't we just   create three columns on top and one column below  that one with the question. Now press 'Update'.   So if you want to add this form to your website it  difference per theme, but I'm using the Divi theme   so I'm going to show you how to do that. Just  go back to 'Forms'. As you can see, you see your   ID number here. If it's your first form then this  should be number one, but this is my seventh form   I've created within Gravity Forms on this website.  So the ID is number seven. Alright, keep that in   mind. So just go to the page where you want to  add your Gravity Forms. I'm in Divi right now,   so we're going to add a module, right there. We're  going to add a text module. And we're going to   paste in the shortcode of Gravity Forms. Now, I've  placed it in the description of this video so you   can just copy paste it in. As you can see it says  [gravityform id="x" well in my Gravity Forms we   need number seven, and for you, maybe it's number  one. So just add it in there. And now you can go   to 'Design' and go to 'Text' and we're going to  make it black and then we press 'Save'. As you   can see now, the Gravity Form we just created,  has been entered into our website. Of course,   as you can see the submit button is really ugly we  need to change that. And I also have no reCAPTCHA,   we'll be adding that really soon. So we press  'Save', and we go back to our Gravity Forms   because we are not done yet at all. So the next important step is to add   CAPTCHA. So we press edit again, we go  to 'Advanced fields' we scroll down,   and we're going to add CAPTCHA right there to  the bottom of the page. Now before you can use   reCAPTCHA we need to sign up with Google. So, how  are you going to do that? We are going to update   our form, we go to 'Settings' and  then we go to reCAPTCHA right there.   Now, how do you go to reCAPTCHA? It's pretty  easy, just type in reCAPTCHA and go to reCAPTCHA   from google.com, and we're going to use the 'V3  Admin Console' it's way easier than the other   ones so let's use this one. First you need to give  your website a label. So, this is WPressDoc.com   The second is, if you want to have a version  three or version two on your website. The   difference is that V3 verifies with a score so  you will be seeing the label. We can remove it,   of course, and you can use the V2, which gives  you a "I am not a robot" checkbox. Let's go with   the latest version, V3. First you're going to  add your domain, my domain is wpressdoc.com.   I am the owner, and I accept the reCAPTCHA Terms  of Service. I want alerts and I press Submit.   Just copy your Site Key, place your Site Key in  Gravity Forms, go back, copy your secret key.   Go back and place your secret key right there.  And do we want a check box or do we want to have   invisible? Well we have chosen for v3  so we should use the invisible seal. So   press Save Settings. And our setting has  been updated. If we go back to our form,   edit this one. Now you will see on the low side,  that there is a CAPTCHA "protected by reCAPTCHA"   right. If you click on it you can change a few  things. For example the theme light or dark,   the batch position on your right or left on your  website or inline, well just leave it on the right   side - we're going to remove it in just a second.  So the only thing you want to do is you want to   make the field label hidden so press update. So  if we want to remove this badge from our website   to appear. You just go to your Divi Theme Options,  or wherever you can add some CSS to your website   theme. And you just add this CSS snippet into  your website ".grecaptcha-badge { opacity:0; }" it   means that the google recaptcha badge is not  totally hidden because that doesn't work, but   the Opacity is zero. So that means it is entirely  transparent. Alright we press Save Changes. As   you can see now on my website there is no batch  whatsoever in this entire website. Pretty cool.   It's in description of this video so you  can just use it for your convenience.   So let's dive in a bit in the settings of your  Gravity Forms. So when you hover over your Gravity   Forms you will see these options you have to edit  where we can change the form where we have just   been there. You can change the settings.  That's our next step. You can see the entries,   and what people have sent into your form. You can  preview it you can duplicate it or you can trash   it, of course, so let's go to settings, and  let's go to the forum, settings, right there.   So this is the title and description, of course,  here's your layout, if you want to label to place   on top, description below. You could turn this  on, but the Validation Summary is on the top   of your forum where people want to submit it  and they didn't enter all the required fields,   then they get a summary I don't like the summary  I'd like to have it in the fields where they   are missing something out the required field  indicator, if you want to have the text required,   or if you want to have a asterik, or you  can even make it custom, so you can enter   a custom text like me. And this is what happens  when you change the text in a custom text,   but I don't like this What I really like is the  asterik. Right. you can even change given a CSS   class name so that you can change the color  for example on this specific asterik on this   gravity form it's pretty awesome. The Form button.  The button is the submit button, do you want to   have a text or do you want to use a image. Or we  could actually also use our own CSS style we'll be   showing showing that later on. So you can make  an image or you can use text you want to use   an image, then you have to base any image  URL. This is something they can improve,   because why don't we just can open it in media  library, like this. So if you want to use it, you   need to go into your media library and here you  can change a button let's see like see this one   and you press this button copy URL to clipboard,  you go back to your drifty forms and here you can   paste your entire button in. Now the submit button  is a image. So you can change it to where you want   it, but I'm going to show you later on how to  create and transform this into a real defeat   button. So, and if we want to. And if we want to  change it to a real defeat button we need to use   text. Enable Save and Continue this is very  useful. If you have a big form restrictions,   is very useful. Do you want to limit the number of  entries, do you want to schedule it, do you want   to require us to be locked in all these things  can be changed, right here, very useful, the anti   spam honeypot is very useful. This will create  a invisible field that only bots will fill out,   and if it has been fill out, then Gravity Forms  automatically detects that, hey, this was a bot so   this entry will be deleted. Then let you see  markup, you don't need this you only need this,   if you're if you're chasing to the next  version of Gravity Forms like 2.4 to 2.5,   and your markup is going all sideways and rogue,  then you have to enable this one and we'll be   fine. All right, press Save Settings and then we  go to the confirmations, I think it's the most   important part of your Gravity Forms next form of  course, because here you have to change what will   have when someone presses Submit button. I don't  want to have a default confirmation. Thanks for   contacting us. No, I want to have a thank you  page, because a thank you page is way better.   It allows you to track more information with  Google Analytics, and it also gives the visitor,   a feeling, yes, we got it, and you can also  offer something else slightly different product,   or whatever you want. You can also use to best  field that field query string. This is useful if   you want to say hey thank you mr john, we will  be contacting you very soon. It is all possible   with Gravity Forms so I like this, press safe  confirmation, and we go to notifications. This is   a powerful feature of Gravity Forms. I really like  the way they styled, this one. As you can see,   there's the admin notification press edits  and we got to change the admin notification to   notification for me. And we want to send the email  to your email so this could be anything but my   email is the at W WPress doctor Duff Comm. Let's  use a from name, so you want to see if you, if you   receive those emails you want to see immediately  is from your website. So the from name should be   website. Contact Form. The from email should be  the same as your domain name right now. So, this   would be w press.com, you should use your email  address from your website. If I use something else   like Gmail or Gmail. Then I will get a warning  which is using a third party email might prevent   your notification being delivered. So, read,  please change this to the URL of your website   right now that's necessary or else a notification  will not be sent out reply to you can leave it the   same, a blind carbon copy you can also send it  to something else like for example sales at WPS   doctors Comm. And the subject should be something,  a new submission from, and then the form Dido will   just give us something that you would like. New  submission from, and let's use the name. So now   you can see immediately in your email box that you  get a new submission, and you can see exactly the   name who sent it isn't that nice. Yes, yes. Then  you have the message well this message is pretty   easy just all fields. That's okay let's make it  a little bit friendlier. Hey, w WPress doctor   salon just fill out your form. Go get them tiger,  and you can see all fields so yes, you can also   add some media. If you want to use for example,  logo. Pretty nice but this is just for you,   so you don't have to style it. Just do whatever  you want this is only your message you will be   receiving. We press update notification. All  right, we go back to notification because now   we have one notification that is for you, but we  also want a notification for your visitors. Why,   well, it's just nice, it's a great way to say hey  thank you very much. We have received your email,   blah blah blah. So press Add New. We're going  to give it a name, and we're going to call it   notification for this is are we going to send  it to a field because they have just sent,   they have just filled out their email. So  now you can use it to send an automated email   that's just awesome from them. This is the place  where you use your business name for example,   for my website, this will be w WPress, doctor.  So it could be anything like help this w WPress.   Doctor, for example, and your business name right  there that could be nice, from which email will   be sent Well, it will be sent from the, from  the normal email so info at W WPress doctor.com   reply to, well they can reply to info to  us okay one carbon copy No, a subject is.   Thank you for your message. Now we're going to  create a cool deck so first we're going to say,   Hi, and we're going to add their name. Hi my  name. Thank you very much for contacting us.   We will respond to your message in 24 hours. Have  a awesome day. And of course we're going to add   a little logo to it that will be right.  That's pretty cool. Have a awesome day.   Greetings from the Wu WPress, doctor. Alright,  that's pretty nice. Okay, so we press update   notification. And now if you go to notification  we have two noses against you. One for you and one   for your visitor who just submitted the contact  form. This is awesome. You can now even add more   notifications for your grandma your, and even for  your cats if you want them to receive an email.   It's all possible right there. The possibilities  are endless. So this is great if you want to   pass a notification just press here on the active.  And now it is inactive, so it's pretty cool.   Pretty easy pretty straightforward. Well done, you  have just created the most useful for websites,   a simple contact form. Isn't it awesome you  have now learned the basics of gravity form so   are you ready for the next level, because now we  are, we are going to play with conditional logic   is going to be fun. So, let's go. And we're just  going to use this one and press duplicate. So we   have a starting point. Let's go to settings, and  Form Settings, and let's change this name to form   form form description is whatever  you want. A lot of fun with this   conditional logic form. Right, let's save it  and head over to edits, right there. Alright so   this is the basic input that we have just given.  We're going to change this a little bit around.   So we're going to drag this phone number to  over there, and this is going to be two columns.   And the phone number, let's make this field,  two columns, and let's add a number field,   right there. Let's just drop it, when you see  this bar, and then you can click on it and let's   change the field label. What is your age. Question  mark, and is required. The number format will be   like this one so the age is I want to have a  range between 18 and 19 because I don't want   people to enter 9000 foot, age, we don't want  this. Let's add another field we're gonna create   a drop down right there let's put it in there,  click on it, and field label will be this time.   What do you prefer as trainer, question  mark. first choice, a man or a female   a male or a female. And there's no  other choice. So let's add one more   field before we start having some fun, and we're  going to edit right there, and the choice is,   how would you describe your physical well being.  Well I eat five donuts for breakfast and lunch   and dinner. The second choice is. I do a lot of  sports. Ease eSports I play Apex legends, every   single day. And third choices, man. Any third  choices. I'm already a certified body builder   professional body guard. Alright so this is  awesome. Now we have some more information we can   work with. All right, I'm gonna switch these two  fields because it's more logical in the process.   So, I just drag and drop this right there and now  they are switched. Awesome. So let's start with   conditional logic just press on the field you  want to use, and press this button right there,   inactive and. Do you want to have a personal  trainer. Yes. No, I am not sure. And this one is   also required. All right, now I want this field to  only be shown when someone fills out their fiscal,   well be we going to add another field,  we're going to add some personal trainers,   which one is suited for them, according to their  own fiscal well being and their motivation.   Because, asking for a personal trainer is  actually a question, how motivated, are you, huh.   Good one. So let's press on this field, go down  there and go to conditional logic, and we want   to show if all of the following matches. How  would you describe your physical well being   is eat five donuts for breakfast or. How would you  describe your well being is I do a lot of Esports,   I play Apex legends. And how would you like it  is. I'm already certified bodybuilder. All right,   we press this button and we press update again.  Now you're seeing a preview what will happen right   now. First you have to enter your age, so I'm at  25. Then how would you describe your physical well   being I eat five donuts, a lot of sports. So,  what happens right now when I press this one,   nothing appears when I also press this one,  nothing appears. And when I enter this one,   the field will appear, why is that well let  me show you what happens, I have selected   with conditional logic, I have created show if  this field of all of the following matches. So   all of these rules have to match it and then the  conditional logic will work. So, when I change   this to any of the following matches. Watch what  happens, I update this one. Preview mode. 33.   Here you go. Whatever you choose right now  the next one. So, but now we're gonna make   it more interesting because this is very  easy but different different trainers   to their preferences. Right. We're gonna ask  one more questions and we're going to use   radio buttons for this, because we don't have  radio buttons right now. So, the radio button is.   What are you. Well the first choices like soccer.  I want to lose 25 pounds. And the third choices.   I just want to work with the six back. So now we  have enough information to create our personal   trainers through them. So, for that we're  going to use some HTML, I'm going to just   drag and drop it right there. I'm going  to click on it and field label is.   And then we're going to add some conditional logic  so the conditional logic is inactive we're going   to enable it. We're going to show this field,  if my goals, is I want to look at the WordPress,   doctor. And we're going to close this one updated,  then we need to change the conditional logic   of what are your goals. So, enable conditional  logic, we're going to enable conditional logic,   and we're going to fill this out, do you want  to have a personal trainer is. Yes. and also   is no trainer is, I am sure. Right now you will  see something happening this field, always shows.   Because, as I fill this out, you will notice  that this field has already been selected. So,   we should change this to a placeholder, which  says nothing. So, we go back. We go to do your   watercraft personal trainer we are we going to  go to parents, we're going to add a placeholder.   Yes. I am not sure. No, when I save this one right  now, you will see what happens in the preview, you   will see that the conditional logic field is gone  so keep that in mind if you don't want to show   your fields in a drop down, only F to someone have  chosen this is the way because now when I fill   it out. It's $5 for breakfast, lunch and dinner.  You see, yes, no, I'm not sure it's an option, or   you can type in anything you want in the  placeholder. So, this is the way this works with   conditional logic. When somebody say yes. Are you  goals. No, I'm not sure. It doesn't really matter.   However, we're going to select personal trainers,  according to their options if they do want it,   and their goals are like soccer. Just want to  lose, or I want to look at the WordPress doctor   Well, this train will help you reach your goals  is Arnold, and he's a very nice personal trainer.   So this is for someone who wants to have a  personal trainer. As you can see, Arnold has   the conditional logic to show if what are you  goals, is just one little bit of workers doctor,   and you want to have a personal trainer is  yes, and then Arnold will show up because   he is the right trainer for motivated guy to  want to look like me. All right, Russ update.   So we're going to add another one, and this  is the URL rock. And the rock is here to   help you know motivated people so we're  going to activate conditional logic. Do   you want to have a personal trainer is  no. And what are your goals, his goals   like soccer. And we're going to update this one  we're gonna preview it. So let's check this out.   Yes. Oh, I mean, no goes like soccer, and then  the rock will motivate you. Yeah, that's pretty   awesome. And when you choose another one. It  doesn't work like that. Pretty cool. So I think   you get the idea right now let's add just another  one for fun. So we're going to duplicate this one,   and we're going to add the human need workout  and conditional logic is, do you want to have is,   I am not sure, and what are your goals, his  goals like soccer, and we press, update,   and we go to the preview. And of course, whenever  you want it. I am not sure I have no goals. This   trainer will help you and Laura will make jokes  and you realize, you'll need to work out. Now you   know how to create conditional logic it isn't that  hard, isn't it, it is actually pretty easy. So,   but now you have two examples to how this work  and you can create your own awesome conditional   logic fields. All right, let's go to the next  level. Well, we will make a crazy form with   all the fields that Gravity Forms have to offer  us, are you ready, let's go. So for our crazy   form we're going to duplicate our fonts form, and  we're going to introduce settings Form Settings,   and we're going to change this to the crazy  form a lot of fun with all fields of revenue or   right let's save this one. And let's head over  to edit. Alright, so we have a lot of questions   right now but I'm not very fond of it because it's  too much. So we are going to make different pages.   So you go into your standard fields, and you drag  and drop this page, all the way to the top. And we   have start Beijing page break, and here is ends  Beijing. Alright so what do I want to do well.   I want to move this section to this page, we're  just going to move them right there to the page.   Just like this. It's pretty easy. But now we also  want to have the phone format in the US, and it   is also required, but now we also want to have  people fill out their address so we go to Advanced   fields, and here they can use their address right  there. As you can see the field labels, the field   can be entirely customized. If you want to have  to street address every slide to well we don't use   it in my country so let's keep it, state, zip  postal code let's change this to postal code,   and the country is of course it's a drop down  very useful and default country will be the   United States of America. And you can of course  change these fields. Also, so for example if you   want to change this to, like your neighborhood,  if you're a very local business you want to know   the name of what part of the city there, and you  can change this to for example your neighborhood.   Let's click on start beating and now you  can see these settings after page break.   Do you want a progress bar, a steps or  not let me show you how it looks like.   We now have a progress bar which is filled out in  percentages. You can also change this two steps,   you have one and two, which you can actually give  a name to it. So, the name would be for example,   personal data and gym preferences. So if you now  look at the preview, you will see that you have   different steps personal data and gym preferences,  as you can see this is pretty cool. And now also,   I really like this bar because now you also see  the steps in with your bar so we're at step number   one personal data, and it's like 50% of form so  that's pretty cool let's keep it this way you can   also change it if you want to make it like orange,  and now you have a orange bar. Pretty cool pretty   cool. All right, so let's go a little bit down  there are your speech breaking and this means   a new page will start right there. The  next button you can even change the text   of or create an image, and we'll be styling  that later. You also have beach conditional   logic so when you activate this one. The  next page will only show is if for example,   what are you goals are well, it's just a  conditional logic if we just talked about so you   can create anything you want with this page. Okay, you can also use only the Next button   conditional logic is very useful if  you want people to fill in and go   to the next one. So let's create something more  of our form. Let's go below here. And when people   have picked their trainer, and it filled  this out, and we gave him this device,   it's time to give some information. So we go to a  farmers field, and if people can, that people can   pick a date, because all what date they want to  start. What do trainer date input job could be   a date picker, a date field orientate dropdown,  let me show you the difference right there. This   is a date field. This is useful when when entering  your date of birth. So we can calculate your age,   a date picker is when you click on it,  a calendar will appear. So let's use a   calendar icon just to be sure any date drop down  is well, just like that, you can drop your data,   let's go with the date picker. And let's choose  a calendar icon. The date format is very useful   if you have if you are in another country, then  the US then for example, we have date, months,   years, Monday, yours, you can choose whatever  you want. And of course, this one is also   required. Alright, this is all good. So after the  date bigger, I also want to have a time picker   just on the right side of the date picker.  And this says Do you have a preferred time,   the time field is actually the same as the  debugger. But now you can add your chime in it's   logical you can choose for 12 hours or 24 hours.  I always like to use 24 hours, but it's solely   up to the culture of the country you're into  and your target audience is at. And of course,   we got to make it required. Let's go to the next  advanced field because what do we want more,   so let them fill out their website. Also, what is  your Facebook URL, and it's not required because   some people don't have Facebook already left it  or whatever. And let's make it the placeholder   is HTTPS facebook.com. Slash. So people  know what actually to fill in this form.   And let's make it visible description. Sure  custom foundation message. So every Facebook URL,   I want a new page to start. So I go to the  standard fields. And I drag and drop page and I   drop it there. And then I go again to my  offense fields. And then I go to list and I just   drop it in the new page. So that is the third  page. So let's change this field label to   what what exercises you been doing. But it might  be a little bit hard for people to think of what   their exercise they were doing. So we're going  to edit the description, three, enable columns,   then we will have three columns, which is  awesome. So now you can change this one, size   three, and they could even if they want, and then  we go to maximum roles. But let's make two because   I don't want them filling out everything. And  let's do the description above the input. Alright,   so the food will look like this. So here you  can enter exercises, and then I put the person's   last button, you will get even more rows. And  they will, they will be enabled to have more.   As you can see the exercise is numbered one, two  and three. Well, you could remove it when you   use it like this, there are more ways of adding  this. So let's add another field is called the   multi select. So for example, if you press this  button book at preferred choices, this will really   help you out a lot. So for example, all countries  in the world Whoa, that's a big list. You don't   have to type it in manually or the states or the  Canadian states or the continents or the genders   or the ages or any marital status or employment  jobs and this free education days of the week.   There are a lot of things that you can use  for this item that is really awesome that   that they made this predefined choice and really  happy we're going to create our own field. So   what juice? What do you want to drink? The  more in the gym. Are you crazy? Just water.   Second choices. very unhealthy  soda drinks. Only coffee, please.   Next one, fresh fruit juices. And of course,  the most used juice in the world at every gym,   coconut juice, which is true. umbrella. Pretty  awesome. All right, so this is the last page.   And of course, we also want people to do something  more. So I also want people to upload something to   the website. So let's go to File Upload, and  we're going to place it next to the drinks.   And when you press this button, you will see  filled label, let's make the label, you upload a   picture of your buddy with your underwear on why  we need to know how much fat you have these four   come through. Of course, this  would never happen in real time,   because everybody is welcoming everybody.  It's okay. But just for the example.   So, so allowed file extension is pretty useful. So  let's enter a few allowed extensions. For example,   if you want to have images, I want to accept jpg,  jpg, jpg, jpg. png. And also I want to accept from   a PDF, ma. But nothing else because I don't want  anything else on my server. If you want the user   to upload multiple files, you can click this  option. And then they have the possibility to for   example, to upload two files to your website  or maybe five files, it's totally up to you.   It's very useful if you want people to upload  their ID, their Texas paper or whatever you want   on your website. We're going to enable it right  now. And the maximum file size. Most people don't   know how to compress their photos when they  upload it. So I'm going to put us on five MB.   And I want this to be required. Of course,  appearance, let's make the field label visible   description above the input and the custom  validation message. Please send us a picture.   Okay. It's It's that simple. It is pretty  easy. So now our form is almost complete. The   most important thing is the consent field. Let's  edit right there. Because sent field is something   that people need to. So we're all legally  covered by this one. Alright, so field label,   your common sense. Oh, totally agree to  privacy policy and the conditions below,   I can't stand to receive a lot of spam emails,  not entirely restricted, Drew five emails a day.   Also, I give permission for my day job being  sold on the dark web for the highest that are   or even the lowest there. I have absolutely  no control over my day job when I press this   sub button. And it's required. Yes, no, that's  a consent. I really love. Alright, of course,   you can make it required. And this is all good.  So let's update this form. And this looks actually   really good. Now one thing we have forgotten  almost, we have to add our capture to this   form before anyone gets submitted. And we're going  to remove that field label in the appearance,   field label hidden. Alright, we press update.  And now our beautiful form has been completed.   And this is how it looks just fill it in. It  says conditional logic. And with of course the   conditional logic forms in it with our personal  trainers, especially to help people out we have   our date picker, which is really awesome. We  have our time picker. So we have the face URL.   We have exercises lists, we have these multi  select, can you upload a picture of your body,   which around the world. So every body works,  I totally agree with this. So this form works   pretty awesome. And as I have shown you before,  you can just enter your form by using this ID   number, and editing the shortcode in your website.  So when people have filled out this form, I really   want people to sign this form also and to receive  a PDF, is it possible to graph the forms of course   it is. So head over to the Gravity Forms website.  And on the Gravity Forms download website, you can   actually download all kinds of add ons through  your Gravity Forms, well, you need to have a   license for this, of course, or else you won't  be able able to download it. I'll make a lot   of videos about all this add on. So you can make a  really good decision if you want the elite license   or the pro license or whatever I so I want people  to add a signature to redraft the forms I need a   lead add on. And I go to a signature. And  let's just download it right now. And I'm   going to create even more about surfeys is going  to be so awesome you direct or user registrations.   Man, the possibilities are really endless with  Gravity Forms. And I go to my plugins, I'm going   to add a new plugin. And I'm just going to install  the Gravity Forms signature plugin we have just   downloaded, we're going to activate this  plugin. And now when I go back to my forums,   and I go to my crazy form, I'm gonna edit its or  you can see in the advanced fields that we have a   signature form right there. And we are going to  add this signature field right there above you   for now this is a really great one. Because  now we can add field label your signature.   And it's also required. The most beautiful  thing about the signature field is that   it also works on your tablets and on your phones,  it is really well done. So the background color,   let's keep it wide. Let's have a border wide.  You can actually change anything the pen style,   let's make it in black band size, small fields  wise fiscal label. Yes, Alright, we're gonna   update it. And now when you actually reload the  page, and as you can see there is a little box   now where you can place your signature, as you can  see is really awesome. You can just draw whatever   you want. It's good w pres jaws dog with a smiley  face and a little sunshine on there. So this works   really great. When people submit this form.  I also wanted to resend it with a PDF to the   people to the visitor and also to me so I have  a little bit of kind of a contract that has been   filled out and signed. So it's legally bound.  Well, for that we need another plugin. So   we go to plugins, Add New. And we're going to  search here for Gravity Forms PDF. Now this one   is a free plugin, which you can use, we know your  Gravity Forms, just press install. Now. We got to   press activate, you go back to your forms, you go  back to your crazy forms, you go to Settings. And   as you can see, with settings now you're suddenly  PDF. Interesting. So this form doesn't have any   PDFs. Let's create one, right, here we go. And  let's create the name of our PDF crazy form PDF.   So they have created different templates for your  PDF. If you personalize fonts, you can actually   look at them a little bit. And you can add new  ones, you can even buy new ones, so it's very   well created. Let's go with this one. I like this  one with all the gray areas. So yes, let's like   this one. And let's add the PDF to a notification  while the notifications for me of course and also   notification for visitor. Now the PDF will  be attached to the selected notifications.   It is awesome. So what are is the filename  of the PDF? Well, let's make it a file name   that we can work with in our business. So it  will be contract the hash and then the name.   Here website form on and then we have the  dates of course because we have added IDs   and we're going to add PDF n Voila. That said  it's dead easy and it works really great. And   you can even style more you go to Appearance, you  can change paper size, orientation, phone logos,   templates, of course, is really awesome  headers footers is great. And I really   love it. I really like these guys for making  this free, available for everyone. And so   this basically, it works awesome now. So one thing  I do want to point out when you're at your forums,   you can always go to entries. And here you can see  all the entries of your form. I think it's very   awesome that the forms are being saved in your  database. So when you have deleted your email,   no worries, it is always here in Gravity  Forms is safe, and it's always there. Also,   a very nice feature is when you want to export  the entire entries to, for example, Excel or   CSV, just press this Import Export button,  you can export entries, and you select just   your form. Then you select all the fields you  want to export. And you select your date range,   and you can download the export file. This is pure  gold, especially when you're working in business.   And you have a lot of customers filling out your  forms. This is pure gold, it really helps. You can   also export your entire forms or your import  forms. So for whatever reason, when you want   to export your form shoot on a website. Well,  this is a very useful way to switch in forms   to really quickly save your own forms and reload  them in different websites or whatever. It really   works. Awesome. And I promise you guys to tell  you how to style this gravity form within,   for example defeat. But I'm going to show you a  method that you can use on all different websites   with all different themes and builders. So the  first thing we want to do is we want to change   that ugly Submit button in something else. So  what do you do, you press on the right mouse   button and you press Inspect Elements. Now you see  all the gos CSS markup of your button. Right now   we have the G form Submit button number seven as  you can see it so you can actually style it. For   graffiti form that is pretty awesome. You click  on the right button and you go copy and you say   CSS selector, right. Now we go to close this  one. And then we go enable visual builder.   And then we go down, we press this button right  there we go to the options, then you go to   a font, you go to custom CSS, and we're going  to paste in the thing we have just copied. So   this is actually the selector of the drafty forms  button. There it is. So if you want to style it   right now, it's pretty easy. before we're going to  start we need the actual CSS from a Divi button.   So we're going to save this changes, we're  going back later. So go to let's say I want   this button up here to appear down there, just  click on it and press Inspect Element again.   And as you can see, right now the button has been  selected, right. These are what you see right   here. edpb button is from Elegant Themes. And the  button is right here. This is the entire markup   of the button. So we're going to select  this Oh, by the way, including the brackets,   and we're going to press copy. And we go back  to our defeat, we go back to our options,   we go to fonts, custom CSS, we're going to  leave this one, we press enter, and we're   going to add this CSS that we just copied from  the other button. And now when we scroll down,   you can actually see the button is actually moving  here is happening something is pretty awesome. So   let's go back to the custom CSS. And let's really  see what's happening. Now. We have padding,   we have font size, we have background color.  Let's make it for example recce you can do that   right now. And then the color of the text. It's  not here, so we're going to type it in color   is for example, why'd you go now we have a white  color on a red button. I, of course radish just   you know what I mean? So now we have changed this  button on this draft for now you can do this with   old Gravity Forms. It's pretty easy. It's pretty  basic. If you just follow it. Now you're actually   adding some custom CSS to your website. Isn't that  awesome? I'm proud of you for just trying. You can   create any button you want with the style and also  works in Elementor. It also works in all different   teams just created by them first, then inspect  what your elements copy the CSS code and just   paste it in right there. It's really simple and I  know you can do it the same way I did it. Alright,   so guys, that's basically it. I hope you've  learned something new which Gravity Forms   material. If you have any questions, drop them  in the comments and I'll be glad to help you   out because I just like helping people. If you'd  like this video, hit that like button so I know   we're on the right track. Feel free to subscribe,  because I'm going to create a lot of more videos   about Gravity Forms in the pro add ons and the  elite add ons is going to be fun, and also a lot   of different videos about WordPress related stuff.  All right, I wish you a awesome day and I'll see   you in the next video. Well Oh oh oh Evening Hey,  this guy? Yeah. Okay those Neda signer Hey you
Info
Channel: WPress Doctor
Views: 5,637
Rating: undefined out of 5
Keywords: wordpress doctor, wordpress, wordpress toturial, toturial, how to, websites, wordpress expert, Gravity forms, 2.5, Gravity forms 2.5, New gravity forms version, Tutorial gravity forms, Conditional logic forms, Gravity forms 2021, Signature field gravity forms, PDF gravity forms, grafity forms, forms grafity, new version gravty forms, conditional logic gravity forms, pdf send gravity, signature gravity forms
Id: ceIm1ECQico
Channel Id: undefined
Length: 56min 8sec (3368 seconds)
Published: Mon Mar 08 2021
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.