Elementor - Using Tabs and Contact Forms to serve different audiences. No extra plugin.

welcome back our contact page on our website is actually really boring just look at it let's connect you got a form you got a bit of a an image down here which rotates as you scroll up and down but other than that it's pretty bland and sometimes we do overlook our contact forms it can be a point of conversion from your website to someone contacting you obviously if you've got a shop or you have some other services or other call to actions on your website you'd want them to convert as well but we do overlook the contact page you know sometimes you'll have like your phone number your email your social media icons a message box something like that and that's about it and when you give a whole page for that it can get a little bit boring so we're gonna basically spruce this up a bit and add some additional functionality we're gonna do that right now [Music] so we're on the contact page now and i've got rid of everything that was there except the title this is sits in a section which is a box width of 1000 pixels wide and then we have another section which is only 800 pixels wide because i want the content to be a little bit more in inner inside the section rather than all the way to the edge or anything like that now we're gonna have three components to this one which is general queries you know if they wanna they have a problem and they got no one else to help they can call on us or just to discuss stuff the second area will be collaboration maybe for youtube or other ventures they can contact us there and there will be a third area which will be for subscription why am i splitting it out because sometimes people just have the subscription added into the message form so it might be like an action after submit might go to mailchimp mailerlite whatever by splitting it out i'm lit i'm reassuring the viewer that if you contact me on the first two you are not automatically entered onto a newsletter or a mailing list no you can contact me knowing that it is just a contact form however the third area that is a subscription so i'm splitting it out for them we do have a subscription area or a button elsewhere on our website so this is not the only place where we're gonna have the subscription so we could use like loads of methods we could have three columns we could have you know toggle accordion but what i'd rather do is use the tab functionality so we're just going to drop that in okay so we've got tab one and tab to ignore the fact you can't see the text we're going to modify the styling in a moment i'm going to modify this one and i'm going to call this one a general queries if i can spell it correctly general queries now normally when you do your tap you would start to add in your content here but rather than adding in any words or images or anything like that we're going to completely delete and instead we're going to drop a template shortcode into here this is the beauty about elementor you don't have to just work with an elemental form we are working with an elementor form but we're going to add to it and make it a little bit more versatile for all of you so we're going to call this one general queries i'm just going to modify the style of it right what we're now going to do is add in a template that we're going to drop into here so what we do is we go to templates we go to add new and we're just going to create a section it's not a page it's not a pop-up it's not a header it's not a search result it's just a section and i'm going to call this contact one queries okay i do recommend you give them a clear titles because if you have too many templates someone's website had about 45 and the names were like header header header header i knew which one they used but it was like why have you got so many name the same thing just be a bit clear about what you're naming it for what the purpose is great template okay cool so we're not going to use any of these um pre-built templates that we have here we're going to go in and create a section i'm going to create a two column section this column is well section is going to be 800 um actually it won't be 800 we're going to come in just a tiny bit more because there will be a little bit of padding and whatever so i'm gonna go for about 760. uh we're gonna have no gap and the height will be the minimum height like so okay and we're now going to uh just give this the same color background as what i had on my other website which i believe was an f3 f3 we're then going to drop in a form so we're not doing anything amazing you could argue you could go well this is pretty standard there's nothing exciting trust me we are going to get to that in a moment i'm going to have a name email message i'm gonna make my message be about uh six boxes wide so there's space for them to write name and email that's kind of all i need at the moment i will however add in a honeypot as well now i would recommend you do this four times okay so i'm going to give this a label of city but can you see it's not there so if a robot somewhere in the world says oh there's a city field it might put a city in the form will now cluster a spam and not let it through a normal user will not add city because they can't see it look can you see city on there it's hidden away this is a honeypot field and i would say you do this four times maybe city country you know i don't know uh pick something else you know uh pet's name or um uh city you know where were you born kind of thing just put stuff that is quite commonly asked as a security question if it gets populated it will fail well it's satisfied a spam test and it won't come through to his spam okay um just a few more steps i'm going to do i'm just going to go over to email this is where you would put in your email address so i'm going to put in info at web squadron dot co dot uk um i'm also gonna go down here and where and i'm gonna get rid of the page url the user agent the remote ip and the cred and the data the date and time is all i really need when it comes to reply to a lot of people leave this blank if you leave this blank when you get an email the email will be your email address so when you hit reply you're replying to yourself now sometimes you do have to refresh the whole page i don't just mean publish i mean literally refresh the whole page and what you'll then find is at the bottom of the form here where it says reply to you want it to now pick email field i'm just going to very quickly style it um i would say that am i going to have any header text there so i could have my header name email message or i could keep the form really really simple and easy so i could just literally um go over to my contacts we're not going to have label so we'll just make this the dark color like that we are going to go down to actions after submit and it says collect submissions email we are going to go to a thank you redirect as well the redirect will take them to a thank you page saying thank you we're going to get back in touch with you later on now but thanks for joining in and all that but let's just get this form done and then we'll go back and do the redirect when i put that there by the way the redirect did open up here and this is where you would add in your thank you page that you're going to go to let's just leave this for now let's just go to advanced i'm just going to add in some padding at the top and we'll go for about 40 and we'll go for about 40 from the bottom as well now column two at the moment there is nothing in there you know what was the point of it let's just go back to this column here and i'm going to move this away from the right by about 20 like so i'm going to go to this column over here and i'm going to actually give this about a left of 20 as well so there's a there's there should be 40 pixels spacing between column 1 and column 2. now in column 1 this is where we're going to drop in a little bit of text we've got a bit of wording and we've then got an image there as well just because it's a little bit more kind of like exciting i suppose than just having a form now we're gonna hit update before we continue and we stick this into our tab we might as well just do our thank you page as well so it saves us coming back into the template and here's the thank you page it just it's got a section of thank you we've got another section we will be in touch and don't forget to keep watching emancity the creative commander that's me and then i've just used a another plugin wp social ninja which you can get for free just to add in like a youtube channel feed that it automatically updates every so often so if we go back to our template now and we click onto it and we go down to actions after submit we remember we picked redirect we go to redirect and it's now going to say where do you want it to go so i'm just going to paste into here the link for the thank you page right um for some reason it doesn't work like normal other links do like on elementor you just type a little bit of it and it kind of appears you do have to make sure you've got the correct url for your thank you page and stick that in even though we're going to have three components and you're probably thinking come on get on with it by getting this all in here now it means we're ready for later on now you might want to just double check though how your thank you page does look on responsive mode and you know make sure it looks alright and we need to do the same here as well so we're going to go to uh responsive mode and i'm just going to put this onto mobile for now and you can now see that because we added in a bit of padding uh to or on the right side of the column one the left side is right up against there now so i'm just going to go over to the column and i'm just going to reset this and i think what i'll do is rather than touching that and i'm going to reset it here as well i'm actually going to do it on the section so i'm just going to 0 000 all of that put that to 40 15. i could have left it at sporty but i'm just putting it in so everything isn't squashed up against the edge you got a little bit of breathing space column two is below column one which isn't good remember we're doing this on the section you get a responsive and we're gonna reverse it on the mobile so you now get the text first you get the image and then you get column one below column two so i'm just going to give this a bit of breathing space i would say thirty there you go so we have our form kind of done that is form one now after this everything is gravy because all we do now is copy that well sorry make sure you publish for us an update make sure you do that okay we're going to copy that i'm going to create a new template we're going to call it section i'm going to call this a contact 2 and i'm going to call this a colab a collaboration okay uh we're not going to do anything there close goes close and we just hit paste you didn't have to adjust anything else so we've changed the wording and we've changed the image now this form we don't really need to do much more other than go down to email and change the subject to be a collaboration for instance it's gonna go to the same uh with um thank you page so we don't need to change that you can double check that is still going there that's all good and i would say again just double check how does it look on the mobile mode and it's looking fine hey let's get planning and you got the form there so i'm pretty okay with that at the moment now we're going to add in the third section okay now this is going to be a little bit different because we're not going to use the same contact form okay so i'm going to call this one contact free and this will be subscribe like that it's a create template now this has its own um thank you page because this is part of a mailerlite uh plugin or not melee like we use mailerlite to do our list um subscriptions and our newsletters so this is going to be if i just paste in the page we're not actually using this form okay so i'm going to get rid of that form and i'm going to go to one of our pages where i already have the code over here i'm just going to copy this shortcut this is one of from one of our freebie pages so if you use mailerlite uh when you do all of your campaigning it gives you this you know chunk of html code so we've got the mailerlite4min it's a bit of html you drop in and it kind of generates this form now um this made a light form already goes to a particular thank you page it's a separate page where you will then have like three or four freebies that you get as well by the way i'm not here advertising anything like that i'm not saying come and subscribe i'm just showing you a way of how i'm getting like three components into the for me so again this is all done so there we go we got three templates now and we have a short code for each one of them so we're on our contact form as it was and we're just going to drop in the short code for the first contact form okay and it'll probably appear like this but don't worry it does appear once you've like hit style or if you've refreshed or published a page it does appear so there you can see we have got a bit of padding there there's the page with the padding removed from the templates okay i've just shrunk it away and i think that looks a little bit more cleaner let's just copy copy copy so congenital queries this one's going to be called a collaboration okay and we're going to get the short code for that which is 6024 i'm going to drop that in okay and then we're going to go to general queries and this one is now going to be a subscribe and we're going to get the form the short code for that and drop that in to over here as well so we've got all of our forms in so if i preview this we've been just come on let's just do that okay like so we've got general queries collaboration and subscribe we now have three different forms available now this could be really useful if you have a different form for um i don't know students parents uh professionals companies maybe maybe got a different form maybe you have different fields maybe for the student you just want them to tell them a bit about themselves or contact maybe if you're maybe for teachers you want them to upload their cv or qualifications or something like that businesses you might want a bit more maybe um your bank account details i don't know you know you you can you can then now have a different form to cater for different audiences now at the moment here this is on the left alignment remember you can do vertical as well so if you want to go with something like that but this now messes up the look of what i did because i was very um clear about the fact it was going to be a horizontal layout i could go for center but i actually prefer the justified option like that because i just find that um it just feels a lot more cleaner when you're looking at the wording like that um the titles though um it would be nice that the titles were centralized uh so what you could do is if you go over here to where it says the title tab if i type a center like this and then just do a center in fact let me just type the word centering properly and i can just copy paste it if i do that again i go down to my tab now collaboration uh just make sure you put the closing or the backslash so it stops it so here's our home page you go to contact we now go over here general queries collaboration and subscribe okay look it's all here for you now to do what you want we'll go to general queries and what we'll do is we will put in sadiq and we'll put in a um let's just put in our web address it should still take you anyway hello i mean i'm not gonna i'm not gonna test that i got the email i know i get emails from me i get loads of emails every day coming from this form and they're not spam now when you hit send you got a message to say form sent successfully but then within like i'd say a split second it's now brought me to the thank you page okay this is not a demo this is live okay and i've still got my menu options as well at the top so this is a real life contact form this is not just a video for the sake of it this is our real life contact form so we've split out different ways of people contacting us with different options i hope you like subscribe share and follow and i hope it's taught you to just do things a little differently with taps contact forms and templates take care i'll see you soon

Channel: Web Squadron

Views: 301

Keywords: Imran, Siddiq, Imran Siddiq, WebSquadron, Website, Squadron, Elementor, Elementor Pro, Tips, Hints, Wordpress, Elementor 101, Elementor Course, Web, Web Design, How to build a website, Elementor - Using Tabs and Contact Forms to serve different audiences. No extra plugin., Elementor forms, Elementor tabs, Contact Forms, Templates Tabs Forms, Template Shortcode

Id: ef4MXgJRMd8

Length: 16min 18sec (978 seconds)

Published: Thu Dec 16 2021