Elementor Form Submissions Tutorial

thank you so much for watching the press avenue youtube channel my name is john and i like to talk about wordpress tutorials from plugins themes and everything you would need to better use your wordpress website today we're going to talk about elementor and their new form submissions area on the back end of a website so they announced a about a week back a few days back two days ago that they now have form submissions in elementor pro so as a disclaimer this does not work in the elementor free version it is only for the pro version and i'm going to walk you through it right now so i have a local install that has just elementor and then i believe it has the invada and west um elements plug-in and nothing else so it's a pretty stock site you don't technically need this one but it's a fast way to jazz up a site for a tutorial in a little amount of time if you do want to see that please let me know in the comments and i'll show you how alright so let's get to it we'll head to the front end and go to a contact page and here we're going to add a form and then put some submissions into it and show you the whole process so edit with elementor which will bring us to the back end editing so here we have this and we're going to add a form so again under the pro if you don't have the pro you will need it for this i'm going to put a form right in here now the default form comes with name email and message i'm gonna go ahead and name this contact us form if you don't name it um you'll have a bunch of random form names in the back and it'll be a little harder to drill down which submission goes to which form so i do recommend naming it uh we'll just edit this a little bit say your name the placeholder i'll leave i usually make the name required email is always required out of the gate and then we'll say what is your question and then i can say question i'll say insert question here i'll make this as required as well and i'm also going to add a phone number and it won't be required phone phone sometimes i do you know best time to get a hold of you so there's that if you didn't know you can drag this up so now we have name phone email name phone email right out of the gate required mark um if you do have anything required so if this email here is required i do turn this on i know some people say it's ugly but if you don't and they leave it out it may push the user away and ultimately do want them to contact you so there are the fields also under advanced you can have default value you can change the ids etc the label we can turn this off and make it a little more uh pleasing to the eye so see the labels here so what is your question disappears um you still need the label even if you're going to hide it and the reason is on the notifications these labels will be there so it'll say email and then it'll say whatever at email.com so you do need the labels for your own sanity later input size i usually make this a medium and then uh buttons etc i usually make this a medium as well and then that is it for this oh actually i will add a few more things actions after submit i always have either you know mailchimp convertkit i actually use mailerlite and convertkit to then take their email and either add it to a newsletter etc i would put a checkbox in here for them to say yes or no and then once i add mailerlite it says hey gotta add it now this is on a local site so i don't have mailer light integration set up but i would just select it there and lastly that's it so go ahead and hit update it's updating now we'll go to the front end and we will submit something to the form so my name is john john youtube my phone number is this my email that's just my password manager you at tube um and my question is how are you and then i'll go ahead and hit send so it says mailerlite's invalid i should have turned that off this message is not visible to site visitor so you can see that i'm logged in all right so next i will submit another one smith will change let's do copy paste space there we go send i believe it's saving these even though i have that mailer light thing turned on let me turn that off we'll just double check here so we'll let it load my internet goes a little slower each time i do a video so come down here submissions after submit will turn this guy off update go back and we'll do one more form submission and then i'll show you the back end so say jane doe phone number um how do you like form submissions all right so send done form was sent successfully now if we go to the back end of the website under elementor we can now see these so we have elementor here we click submissions and now you can see here are some submissions so under action status it's actually good i have the mailer light green checkbox means everything under those action statuses that i added um worked except you can see these two where the mailer light didn't work um so i go to view and it says here mailerlite invalid api key i actually think that's very very helpful um and though accidental when i just did this i do think it's a great way to show people hey under the actions log email worked mailerlite did not work and here is why invalid api key to add this if you don't know you would go to settings and then integrations and then find the api key you want to use click validate and save so back to submissions other things you can do is under all forms i had a new form where i've just kind of tested this out and then the form i just created for you guys is the contact us form so if i select that as i said to name it you can now see the submissions from there so maybe you have a newsletter maybe you have a comment section i have like a just ask bar all of these can i i can drill down through here on the forms so go back to all forms and then um bulk actions mark has read trash timing yesterday today last seven days custom 30 etc if i go into say this one so i see your name so the initially when you put the form and it says name i change it to your name so the label follows through to the submissions on the back end and then phone email what's your question and the actions worked on the right hand side additional info this comes from the contact us form on the contact page it was created and updated here username it pools if they're logged in i am logged in as myself and then i p i'm just doing this locally on my machine so that doesn't read like a typical one and then the user agent which i think is great additionally you can edit this down so if you were using it to save information you could clean it up here if it needed to be cleaned up it is gdpr compliant and it hooks into the wordpress gdpr erase data when they request that and if that is something that you need if you like this video go ahead and give it a thumbs up if you want to see more elementor tutorials just like this click the subscribe button along with the little bell thank you so much for watching