Gravity Forms Tutorial 2020 | Create a simple, advanced or crazy WordPress form!

Gravity Forms Tutorial 2020 | Create a simple, advanced or crazy WordPress form! | Learn with the WPress Doctor ?‍?

?????? Start here ??????

? Subscribe for more WordPress related video’s just like this: https://wpressdoctor.com/sub/
? Get world’s best WordPress theme ➜ https://wpressdoctor.com/nr1theme/
? World’s best hosting ➜ https://wpressdoctor.com/nr1webhosting/

A contact form that works is very important for your website. As the standard forms seems to get hang up in spam, I will show you how to use Gravity Forms on your WordPress website. I want you to succeed with your website, so lets get started.

⏱️Timestamps⏱️
0:00 Gravity Forms Toturial 2020 – Intro
2:33 Get Gravity Forms ➜ https://wpressdoctor.com/get-gravity/
3:50 Create a simple Gravity Forms
8:50 Create notifications and confirmation
14:57 Create a advanced, conditional logic form
23:48 Create a extended, crazy form – something special
23:09 A word from the WPress Doctor – outtro
32:51 Self-development quote #5

✅For tips and tricks on getting the most out of WordPress, don’t forget to subscribe: https://wpressdoctor.com/sub

How to create a child theme in WordPress

?Transscript?

Hi there! In this video I’m gonna help you to create three Gravity Forms. But why do we use Gravity Forms for your WordPress website? Good question! Well I’m, telling you, I’ve been building  WordPress websites since 2004. I have my own national hosting company and my national web development agency and I’ve been using Gravity Forms for many, many years. But why? Gravity Forms is the best plug-in to use for your forms on your WordPress website. Because it is very stable, it is very robust, it’s very extensive and you can go all the way with this Gravity Forms plugin. It is so flexible, it’s amazing. But because of all those options you, probably are getting lost with Gravity Forms so I’m gonna help you in this tutorial, to create Gravity Forms. And we’re gonna create three forms together.

First Gravity Forms – Simple

The first form we’re gonna create is a very easy and simple form that you see on most websites around the internet. It is very easy but it is so important that your contact form is working like a charm! Now in the most themes of WordPress you will have a build-in contact form but they are notorious for getting all those mails in spam boxes of clients. So we’re not gonna use  them, we’re gonna use Gravity Forms.

Second Gravity Forms – Conditional logic

The second form we’re gonna use is a form filled with conditional logic. So when someone opens a field, another field appears. When someone change this one thing, another field will appear. I’m gonna show you in a way more extensive version of Gravity Forms so you can see how that especially works.

Third Gravity Forms – special form

The third example I’m gonna show you, is a special form that is created so you can upload files, you can sign a box, and when it’s all signed and uploaded and filled-in, we have different steps for all the forms and when they have are all filled in, the customer will receive a email with a attached PDF file with all their stuff being signed to sign boxes upload their resume, upload their passport – I don’t know something like that – and it’s all being insert in this PDF and send to the client and send to you, as the website owner. So ready for this Gravity Forms tutorial? Because it’s gonna be fun and it’s  gonna be mind boggling what you can do with Gravity Forms. So let’s go!

The first thing we need to do, is we need to get Gravity Forms. So when you click on this link in the description of this video, we will go to the Gravity Forms website. Now remember, you just need the license that fits your needs. I don’t know what you need, I have the elite license for unlimited sites, but if you only have one website, just press the basic license, press ‘buy now’. We fill in this form with all the information that we would need, and we fill in our credit card ID, and we press ‘place my order’. So after you’ve bought the Gravity Forms license, you will get an email which says where to download the plug-in and your Gravity Forms license code. So we go to the WordPress dashboard, you go to ‘plugins’ and you press ‘add new‘. You press ‘upload plugin’ you just drag and drop this file into this box, and you press ‘install now’. Press ‘activate plug-in’ and then we go to ‘register your copy of Gravity Forms’. We enter our license key. Press the button ‘next’. Keep background updates enabled. Select your currency where you are at right now. We can leave this all the same that’s okay. And we press ‘create a form’. Now Gravity Forms will ask us to create a new form and give the form a new title so we can recognize the form anywhere we go. Let’s make it simple; ‘contact form’. At the description you can leave empty, or you can place something that you will recognize like ‘the form use on the contact page’. Press ‘create form’ and here we go.

Welcome to the Gravity Forms visual drag-and-drop builder! This is so awesome, and I will show you exactly what it will do. We have ‘standard fields’ we have ‘advanced fields’ we have ‘post fields’ ‘pricing fields’, we have a lot of fields. So let’s create a really simple contact form. We are going to the ‘advanced fields’ and we going to drag and drop this ‘name field’ to here. Wow! Here we go, we got our first ‘name field’ and of course we don’t only want to know the name of the people, we also want to know their email address. So let’s drag it right there and drop it. And we also want to know the phone number of those people who are filling out the form and of course we want that people to ask us a question so we need a paragraph text and we drop it right there. Is it that easy? Yes it is that easy. Then we place here your question. All right, press the ‘update’ button and now we have our really simple contact form! So let’s place it on the front end. Go to the page where you want to add the form. So let’s go to our contact page. Remember you can use any theme you have because it’s really simple. We just need to add another text module in Divi. And here we see immediately that Gravity Forms has added a new button it’s called ‘add form’ so we press the add form button, and we select our ‘simple contact form’ from the drop down menu. We don’t want to display the title, we  don’t want the description, we just press ‘insert form’. So here you see that Gravity Forms has added this little shortcode to our text module. Let’s read it out. It’s a Gravity Form ID number two, so it’s the second form on my website. We don’t want to display the title and we don’t want to display the description. We press the green button and you will see that the form has been insert. That’s  awesome! Let’s save this page.

So let’s walk through some of the options and when we walk through this form and change stuff, you will see on the right side how it will look on the front end. Let’s click this arrow button. And the options will appear for all the fields. So this is our ‘field label’, this is the name that will be shown on here. You could also turn this off with ‘appearance’. ‘Field label visibility’ -> ‘hidden’. Now it’s gone. You see? So this is where you fill in your label, this is your description used for yourself or for the people that are fixing your form. So let’s add a description right here for the name form. We would like to know who you are. Just wait a second and here it goes. Here it is edit through our form. But we don’t want a description below the text, we want a description above the text. So you go to  ‘appearance’ -> ‘description placement’ ->  ‘use form settings’ -> ‘below or ‘above’. Let’s click ‘above’. So you can change here all these settings and just add a middle name for example. You can create this thing as just to fit your needs. I don’t want people to leave their name blank,  so we press this button ‘required’. And we also want when people don’t fill in this form, we want people to have a ‘custom validation message’. People will see this message:  ‘this field is required’. Of course this field is required, but we can make that a little bit smoother, a little bit nicer. So we go into our form. So let’s add our custom validation message to be:  “We would like to know who you are” and now when someone doesn’t enter the field, we’ll see “we would like to know who you are”. So people can just see this and this is a far more nicer than “This field is required”.

Now one more thing I want to show you is that I don’t like the way the form is shown to people. The email is here, the phone is here,  and the question is here. But these are three columns, so let’s make email and phone next to each other. There is a easy way to do this. Just drop these options down, go to ‘appearance’ and add here: ‘gf_left_half’. We go to our phone field and we also add to ‘appearance’: ‘gf_right_half’. And now you see that the form is changed, and it’s way better now.

Well done! You have just created your Gravity Forms. You are awesome, you’re rocking it! Now the first and next important crucial step, is that we create the right notifications for your website visitor and for you as website owner, so that you will receive an email when someone fills in your form. Now follow me.

We can find those notifications in the ‘settings’.  We have ’form settings’, ‘confirmations’, ‘notifications’ and ‘personal data’. Now let’s go to the ‘confirmations’. Because when someone fills out your form they will see now a text which says: “Thanks for contacting us we will get in touch with you shortly”. Well that’s very nice, but it’s not really good for your Google Analytics and for conversion rate because, it will only change the form to this text. What I would like, is that people fill in the form and they would go to a “thank you page”. That way we can add goals Google Analytics  and to track everything that’s happening on our website. So you go to ‘edit’ and then you select a ‘page’ because we want to go to a “thank you page”. And we press ‘safe confirmation’. We just quickly fill in this form…  wow that’s fast! And the question is “Thank you for this form. Do you guys also have a mobile app?”. And we press ‘submit’. Let’s see what happens. “Thank you! Message received! Have you seen our…  Are you kidding me? This just says that, oh wow this is so awesome!

Alright so the confirmation works and its really awesome. Now let’s go to our ‘notifications’ and we see here a ‘admin notification’ for a ‘New submission from {form_title}. Hmm okay. So let’s edit this one. This will be the name,  it’s a notification. This name is only for you, the website owner, so it can be anything you like. But to make things clear, this is a ‘Notification for website owner’. And we can send this to your mail admin maill or you can send it to another mail. Like sales@wpressdoctor.com. Imagine this mail being sent to your mailbox, what would you like to see here? I always make it very clear. This email is from the ‘Website contact form’. Now ‘from email’ has to be your own domain name. If it’s not,  it will probably end up in your spam mail. So you can just add anything you like but it has to end on your domain name. ‘Reply to’- you can leave it empty. In the blind carbon copy, you can enter another email, that’s alright. Let’s make the subject a bit more interesting. So we want the first name, and the last name ‘has filled in the contact form’. And the message, it has to contain all fields. That’s nice but let’s make this email a little bit more fun to see. So we add our logo to it and we say “Hi doctor! You just did it! Another person just fill in your form. You go get this lead tiger!”. And here we have all fields, and this is our logo to make it all cool. And we press’ update notification’. WARNING! Just as I told you before. Now why is this? Because I’m working from my dummy website which is wpressdoc.com. And this is the exact domain I’m working from. So when I press ‘update’, here you go, the warning is gone. And it will work smoothly now. Alright we go back to ‘notification’. Because now we have one email that’s been sent to sales,  but let’s duplicate this one. And this is a ‘Notification for our visitor’. Let’s fill in the form. Alright. Where do we want to send it? We need to send this to a field, to the email field that we have created inside the form.  So the ‘from name’. We’re gonna brand this a little bit to your own needs. So let’s create a… this is from the ‘Support team’ from the WPressDoctor. ‘From email’ should be info@. That’s okay and we reply to the wpressdoctor.com. ‘Blind carbon copy’ that’s okay. What is the subject? The subject is “Thank you for your email”. And this message has to be changed because it’s not for me, this one is for the person that has filled in the form. So we press “Hi- ‘first name’ ‘last name’, Thank you very much for contacting us, we will be glad to answer your email etc etc etc.” And you can delete this because most people don’t want to read their own email. Of course you have to add in your logo because that’s just so very cool. And you press ‘update notification’ and here we go. If you go back to notifications you will see now we have two notifications. One for you, the website owner, is going to your mail, and one notification for our visitor,  which says “Thank you very much for your email”. And that’s the way you can add any notification to any person in your organization. Or if you want to send your grandma a notification that’s okay, you can do it with this form.

So now that we have created our first simple contact form, let’s go to a level two. Dive a bit deeper into this water and let’s create a advanced form with conditional logic. So we’re gonna use our simple contact form as a starting point. You can press the ‘duplicate’ button. And we go to edit this contact form, change the name to anything you would like. Let’s make it a “Confitional logic form”. And here you see that we have duplicated all the fields from the simple form. So that’s awesome. That’s our starting point. Okay let’s create something more. Let’s pretend that we are dentists and we have our dentist practice and we want people to add a appointment or contact us for an appointment through this form. Let’s go. First of all we’re gonna add a ‘Drop Down’ menu. Let’s place it below their name, email, and phone number. And the drop-down field we will populate it with these questions. So obviously, the first question is “what kind of appointment would you like to schedule?”. Well we have four options in our example. “I would like to clean my teeth”. “I would also like to drill and fill my teeth”. The third option is that people can do they can “Pull their teeths out”, and the fourth option, we want people to do is:  “They can have to cut their hair and shave my chin”. I don’t know why that’s here, but okay. And we have this one ‘required’. So when you’re creating your drop-down menu with conditional logic, don’t forget to add a ‘placeholder’. If we don’t do this, things will get messed up. And we call it “make your choice”. Okay, close this one. We’re gonna make our second. Because when people click on ‘clean my teeth’ I want to have another drop-down menu with another couple of questions. Let’s add a ‘drop down’ menu. And the questions are:  “How dirty are your teeth?”. The first answer they can give us is: “Nah, not so dirty”. The second answer is:  “Oh it’s very dirty”. And the third answer they can give us is: “When I open my mouth, you see the little animals running around!”. So that’s really dirty. Now, let’s go to the ‘conditional logic’ because I only want to show this field  when they choose for: ‘clean my teeth’. So we go to this field we go to ‘advanced’ and here you see ‘enable conditional logic’. Now this is where it gets really awesome. We have to ; Show this field if all of the following match: “Question, What kind of appointment would you like the schedule?” is… “Clean my teeth!”. Okay the next appointment they can schedule is the ‘drill and fill my teeth’. What we want to do is: we want to put an ‘advanced field’ in a ‘file upload’.  Now you’re gonna ask: “Why are you gonna need an upload, when they choose for drill and fill my teeth?”. Well the question is of course,  we need to know how bad it is. So: “Can you attach a picture of your teeth?”. And we want the ‘file extensions’ that people can upload: a jpg file, a GIF file, a PNG file and a JPEG. So now we know that they can all upload their beautiful picture of their teeth. Of course we only want this to appear when people choose to ‘drill and feel my teeth. So we press again ‘advanced’, ‘enable conditional logic’, ‘show this field if all of the following match:’ ‘What kind of appointment would you like the schedule?’ is: ‘Drill and fill my teeth’. Next one. ‘What kind of appointment would you like to schedule?’. ‘Pull my teeth out!’ All right, then we gonna add a, well let’s see, add a checkboxes. Why not. The checkboxes will be, the question will be: “Why do we need to pull your teeth out?”. Well the first is: “The teeth hurts!”. The second checkbox is:  “Teeth are  overrated – they are so 1998”. The third box they can check is: “I don’t like tooths in general”. And the fourth is: “Nah it’s a bit crooked”. And the last option is: “I really don’t like the color of the tooth so let’s pull it out”. Alright, and you can of course ‘Select all’. We go to ‘advanced’ -> enable our ‘conditional logic’ and ‘Show if this fields if all of the following matches:’ ‘What kind of appointment would you like to do is:”  “I like to pull my teeth out”. So we have all these options right now, so I think you get the conditional logic. Now let’s add one more. Let’s add a “HTML box” with HTML content. What we’re gonna place here? “Of course we don’t cut hairs and shave chins! Are you kidding me? But however, my brother-in-law is a great barber you can find him at second barber street number 45”. And the funny thing – because it’s HTML comtemt -that you can make this strong. And you get and emphasized all these things. ‘Advanced’ -> ‘enable conditional logic’ -> ‘Show this field of all of the following matches is:” ‘What kind of employment would you like?’ ‘I would do have have my hair cut and my chin shaved’. And then… Now we have the name, email, phone, they can press this one, but we are missing one. We are missing the ‘date picker’. So we’re going to ‘advanced fields’ we are going to ‘date’ and we add the date right here. So we say this one “pick your date”. Now the date picker can be any place, anytime, anywhere, because people need to see that they have to pick their date. Now we can change the appearance a little bit. Let’s give it a calendar icon so that’s really awesome, because then it’s just really clear what they can choose by clicking on this date. You can also have a date field, people have to fill it in manually, not so good for this type of content, but they can use it to fill in their birth date for example. The date picker is by far the best. The drop-down is also great for having your birthday on the form. But let’s go with the date picker.

The date format well let’s use it in your language whatever that is. This one is ‘required’ and we go  check this field out on the front end of our website.

So let me show you real quick how to add a page with Divi because Divi is the best builder in the world. And that’s for a reason. Let’s use a premade layout. We go for a ‘dentist’ and look at this beautiful page isn’t that awesome. Let’s take this one. ‘Use this layout’. It will import it to our website. And here we go, our page is loading the website has been imported. And we have the button ‘book appointments’. So let’s make here our beautiful contact form that we just created. So we place here our shortcode for the Gravity Form, and ID is number 4. And I press the ‘Save button’. And let’s look at our page on the front end. Oh here it is we, have the name, email, phone, oh that really looks great. And then we have the date picker and the question we can also answer. So let’s clean my teeth, oh here we go! How dirty are your teeth? Now when I open my mouth you see little animals! Oh I want to have it today yes thank you. Oh wait I also want to drill and fill my teeth. Can you attach a picture of your teeth?  Yes sure, lets attach a picture of our teeth! Here we go, a picture of today! And of course I want to pull my teeth out. Now the funny thing is, we can select all ‘why we want to do it’. So here you see that our conditional form logic really works like a charm. So that’s awesome.

Okay, okay! You have completed level two! I’m proud of you. Because conditional logic is something that you need to learn, and practice with. Now are you ready for the third form? For the next level? Because the third form is gonna be something special. Let’s go.

So we’re going to duplicate our conditional logic form, so we have a basis. We press ‘edit’ and we make this ‘something special’. ‘Update’. Okay we have all these fields, they are really great. We’re going to the ‘standard fields’,  and we’re gonna add a ‘Page’ and you drop it right here. Begin from top of the first page end of page. Alright so the first page will be… this one. Name, email, the phone…  I would also in this form,  I would like to know their address. How do you place another page break? You just press this little button ‘duplicate this field’ and we drag it down to another place. Here we like to go. We like to go here. And after that we have to-  can we pick the date add a question. And I also want a consent button,  so people have to agree to the privacy policy. And we need to consent to this text:”I consent with the fact that this form is just a dummy form BUT will be held against me in court of law and other legal activities”. People have to click on this button and this field is of course required. Okay we have the date, we have the question, now I also want people to go and sign it.

In the elite version you have the advance post creation, we have other connections we can make, but we also can add a signature, or a survey or a user registration registration. We can also have our signature, so let’s get this signature up and running in our Gravity Form. So once you get the gravity forms website you just download a plugin. You just activate that plugin that you have just bought and you upload it and here we go. We get a Gravity Forms signature add-on. And now you see add the ‘advanced fields’, we have a signature form. So let’s place these signature form on the… behind the consent. So here we go. We call it: ‘Please sign this form’. And here you can place their signature. They can add a date and also, the last question is: “If you have any questions, you can leave them here”. So that’s for the form then the end of the last page is here. We have one, two pages, three pages, and the end of the last page -and the form. You can change the progress bar to steps, to none, and you can also change the color if you would like to do that. Let’s keep them blue, but let’s add  some steps to the pages. First their ‘personal info’, on page two we would like to know ‘the appointment type’ and in step three we would like to have your consent. ‘Consent and sent’. Display the completed progress bar on confirmation. This would be nice. We press ‘update’.

So before  we actually go look on the front side, we have to change something about this form. Because when we publish it right now, with every step we push the button next, then the form will reload the page to up here, so people have to scroll down. That is not very logical. So we press this and we add to this shortcode of Gravity Forms, we add this: ajax=”true”. We press the ‘Save’ button and we save this page. And if we now refresh our page, we’ll see that something’s happened. We have a zero percent sign and there is a beautiful bar here. So let’s start to fill out this form, let’s see what happens when we walk through the form. Whoa, just… where did this come…. Okay, well we press the ‘next’ button and you see what happens. We stay on the page, there’s no refresh, we just go with the second step; appointment type. So what we would like to do,  we would like to pull my teeth out, drill and fill my teeth. Hmm , yes… ARGH! So we go to next and we see step three is 66%. I agree, we sign the form with this little guy -oh so happy because we got the form fixed yay – he’s waving at you, you see that? The date is for today and we have any questions: “Awesome form, thank you for your tutorial!”. And we press the button ‘submit’. So what happens, we go of course to the thank you page. So that works, it’s awesome!

You know, one of the best things of Gravity Forms is that it actually saves all your entries in your WordPress database. So they will never be lost when you delete your email. Just go to ‘entries’ and here you will find all the entries from all the forms. Click on this icon right here and you can select your form, and see all the entries here. This is so amazing, and it’s not very normal that a contact  form plug-in will save all your entries. The next and last thing I want to show you is how to set up a PDF, sent with the form to the customer and to you. So for that, we need a plugin. So we go to ‘plugins’ ->  ‘add new’, and we type in “Gravity PDF”. ‘Install’ this plugin, press ‘activate’. You need to install the core fonts. Here we go. Now these fonts are only used for generating a PDF, so it won’t slow your system or your website down for the front end user or Google. All right so there successfully installed. Now we go back to forms, and we go to our ‘Something special form’. We press ‘edit’. And now here you find at settings, there is something new. There is a PDF. So press on that. ‘This form doesn’t have any PDF. Let’s go create one’. Of course. The name of this PDF is the name of the PDF for this special form. So we call it “PDF special form”. The template let’s use the standard template of Zadani. You could always change that, or you can buy more templates from the shop. ‘Automatically attach PDF to the selected notification’. We want to add this PDF to ‘the website owner’ and to ‘our visitor’. Here we go. The file name for this PDF that will be attached. Make it something brandable.  So we go for “Appointment with WPress Doctor for…” and we place in the name. We’re gonna add this PDF. And then you can change the appearance, and you can change its template. Of course we want to use a header. And the header we want to use our logo. And in the footer we also want to place our logo. And we press ‘update PDF’. To see the PDF you go to ‘entries’ and this was our ‘something special form’ and here we go, we have the entries that we created. Let’s see the latest one. If you want to change this, for example; you want to add the date -I always do that- you just press this little gear icon here on the top, and you add you’re dates. Entry date and we drag and drop into the first column. We press ‘save‘ and now you see the entry date. So now you know exactly when it has been added. We press ‘view PDF’ and you will see here our beautiful PDF created from the form. And you also see that there’s a link “Can you attach a picture of your teeth”. You just press this DON’T PRESS IT! ARGH! Get it off, away, get it away! And this is how the PDF works. You can always change this, add columns, change the color,  change everything you can buy more templates… It is really something. Awesome! You just created a far more extensive form than most websites have. I’m very proud of you! So this tutorial has come to an end and I hope you enjoyed creating forms with Gravity Forms. Now you have all the basic skills to create your own custom Gravity Form on your WordPress website. Well done. If you’ve liked this video, press the ‘like’ button below, and if you want to see more videos about the WordPress doctor and everything I do with optimizing your WordPress website, finding tips, finding your best niche, fixing your SEO… hit that subscribe button and you will be notified when I upload a new video. I wish you a very awesome day!

Because life is more than adding Gravity Forms to your WordPress website, I have another life-changing quote for you. “The most painful thing to experience, is not defeat, but regret.” And I really want you to think about this one. Because it’s not about being defeated, that’s gonna give you the most painful experience, no it’s regret of not doing those things that you were afraid to do. So my advice is always: go go go. Try it if you have an idea, build a website if you got something product you want to launch? Launch it. Go for it, create it. Maybe you’ll suffer defeat, but that’s nothing in comparison to the feeling of regret of not doing anything at all. Have a awesome day. Good luck!