Add Private Checkbox with airSlate SignNow

Customize checkbox field

this is an elementor form checkbox required tutorial that is an elementor contact form with a checkbox that needs to be checked by the user i'm going to show you how to do this so let's get to it hey it's also here and in this quick video i'm going to set up a elementor contact form i'm going to add a checkbox that is required these check boxes are very handy of course to make somebody agree to your terms and conditions and to your private policy a required checkbox is also essential on a contact form when it comes to gdpr okay so the first thing i'm going to do is click on the actual form and that's going to display the form attributes here on the left hand side panel i don't personally like having these labels on top of these fields so the first thing i do is turn them off so you'll see that here label and you can see that it's switched on so i'm going to switch it off and watch what happens okay so those labels have now disappeared now another preference of mine is to set the input size boxes to medium it just makes them a little bit larger now if your contact form looks like this you have three fields i'll show you a little trick that just makes things a lot nicer you can click on the name field here and here where you see column width you can set this up to 50 percent and you can see what i'm going with this already if i click on the email option and set the column width to 50 percent this is what happens and that looks a lot nicer okay so while we're here it's a good idea to name your form in case you end up with various forms on your website it helps keep things organized and it's specially helpful if you're tracking where your submissions are coming from which form they're coming from that way you can see the name of the contact form rather than some generic form name you don't want to end up with a lot of emails from form 1 and form 2 and form 3 because that doesn't really tell you which form they used ok so the next thing i do is go to the submit button and make that large you can also make it medium if you prefer i'm just not a fan of small buttons and of course you can continue making cosmetic changes you can go to your style section in your advanced section and just tweak things as you like but i think this is good enough for us now to add the required checkbox so back here in the form fields section we want to go to add item and you can see that a new field has appeared so what we want to do is set the type of that item and in this case you want to select acceptance okay so you'll see that this is now giving us a checkbox of type acceptance now here you'll see a field called label this is for you to be able to track what's what and the reason for this is if you have more than one checkbox and they're optional and the user selects some but not others then you're gonna have a job telling which boxes the user actually checked so in order to avoid that we give each element a label so i've labeled this terms and privacy so when i get a log of any submissions that i've received i can see that a particular checkbox has been ticked in this case of course it's required so if i get an email i know that they had to check that box but it's good practice to name those labels okay so let's add some acceptance text let's do something quite generic like i agree to the terms of service and privacy policy and you can see that you have an option here that says check by default i don't recommend doing that but of course it's up to you okay so let's update this form and let's see what it looks like on a browser okay so here's some sample text in my form so let's try clicking on send without ticking the box and you can see here that error checking is enabled by default on all the fields by the way not just on the checkbox this is a required checkbox so we can't submit the form unless the checkbox is ticked okay so before we deploy this form there's a couple of things that i want to show you i like to have links here where it says terms of service and privacy policy or to whatever i'm asking the user to agree to and the way that i do that just to make things very easy is i go back to my dashboard i open up a new post and let's just add a paragraph and here i will type in terms of service highlight that click on the link and here type in the name of your page if it's called terms then this will find it and all you do is click on that now there are no pages or no posts set up on this because it's a brand new install so what i'm going to do is i'm actually going to add an address i'm going to add google.com and click on that and now i'm going to add and try let's see policy and here i'm going to make another link let's use the same one why not okay so at this point you just click on more options and go to edit as html copy that entire text go back to your form click on form fields click on the acceptance type element and here where you have the acceptance text you can actually delete that and just paste that code now notice that you have a couple of p tags which is a paragraph so it's actually added a space i'm going to delete those and now the text is in line with the checkbox of course i call it the background black before so it's making it a little bit hard to see things so rather than style the text and everything else i want to change that to a different color okay so that's now more useful let's click on the form once again and just um go back to the acceptance field and just add a little bit more text that says click to agree to the terms of service and privacy policy so now we have a more functional contact form now one last thing that i like to do is to go to the additional options and enable custom messages this will show a success message that says the form was sent successfully an error message a required message and an invalid message okay so let's update the form and then let's go and preview that so let's test it out let's fill in the information and there it is and in case you're wondering why i keep doing that rather than just typing that's because each time i click on any of these two fields the autocomplete on my browser shows my information so that's why i'm doing that okay so we're going to click on the click to agree to the terms of service and privacy policy and of course if i click on privacy policy which is a link it's going to take me to google because that's the link that i added so let's go back here we're all set to go let's click on send and now we should see the text that says the form was sent successfully and that's how you add a required checkbox to an elementor form i hope you enjoyed this short tutorial if you like this kind of thing then please subscribe to the channel i'm always talking about tools and doing little tutorials to help people figure how to use those tools thanks again for watching and i'll see you in the next video