Wordpress Avada Theme - Next Level Tutorial - Contact Forms | Andrew Turner | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Wordpress Avada Theme - Next Level Tutorial - Contact Forms

teacher avatar Andrew Turner, Web developer & WordPress trainer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

8 Lessons (49m)
    • 1. WordPress Tutorial CONTACT FORMS Introduction

    • 2. Module 1 Installing the Plugins

    • 3. Module 2 Adding to a page

    • 4. Module 3 Adding Fileds

    • 5. Module 4 Styling the Form

    • 6. Module 5 Setting a Redirect

    • 7. Module 6 File Upload

    • 8. Module 7 CB Mail Sender

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

This short tutorial class will teach you how to implement contact forms in your website using the Avada WordPress theme, Contact Form 7 and associated plugins.

These ‘Next Level’ tutorials are created to be short, focused tutorials addressing specific challenges that you will face as a web developer. They assume you have either completed the ‘Introductory Course’, or are already familiar with WordPress, and the Avada theme in particular.

I will be adding new tutorials over the coming weeks.  If there is something specific that you would like me to include, please contact me via the details in my profile.

Meet Your Teacher

Teacher Profile Image

Andrew Turner

Web developer & WordPress trainer


Andrew Turner is a full-time web developer and WordPress trainer working through his own training company Web Design Workshop. He is also a fanatical street photographer and author of the book 'Shooting Street'. He lives with his wife and two daughters in the beautiful city of Oxford in the UK.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. WordPress Tutorial CONTACT FORMS Introduction: welcome to what I've called next level tutorials thes are short little tutorials that are going to be focused on specific tasks related to using the Varda WordPress development Seem Andi, go on from the course that I put together the introductory course, which hopefully you will have already taken. Now, in this particular tutorial, we're going to be covering contact forms. Eso we're going to be looking at how to install the contact form plug in. Then we're going to be looking at how to add that to the page. So the form appears on a webpage in your in your site. How to add additional fields to the form. It comes with some basic field forms, like name, email, address, subject message. But you might want to add some additional fields into that form. Um then we'll look at styling the form how to actually make it look nice, because sometimes out of the box, it doesn't look so good. Then we're going to be looking at how to create a redirect for this submission of the form . So once the form is actually being submitted, where does it go? Where is the user? Get taken? Hopefully to a thank you page of some sort. Then we're gonna be looking how to enable file upload on a form. So you might want to use that. If you're creating a site that requires, for instance, a CV to be uploaded is uploaded as part of a job application and then finally, as a bonus, we just could be looking at how to change the default WordPress sender name. So when you get the message will, when a recipient gets the message, it doesn't say WordPress. It says whatever your site name happens to be. OK, let's Lord straight in and good luck with this tutorial. 2. Module 1 Installing the Plugins: do the first module off this tutorial. What we're gonna do in this module is simply install the plug ins necessary to work through the rest off the tutorial. I'm just gonna install a couple of plug ins to start with eso. You should already be familiar with installing plug ins for WordPress. So we're gonna go to the dashboard, plug ins and click add new, and then we're gonna do a search for contact for seven. No contact. Form seven is the main plugging that we use, and it's the one that facilitates the form itself. You can add all sorts of additional plug ins to this, and they add additional functionality. But the main plug in is called contact form seven. So we've installed that, and I can just activate that and then the other plugging that we're gonna installed right now. So I'm gonna go plugging at new again, and it's called Controls for Contact form seven. And this is the plugging that gives us the functionality that will allow us to redirect the four months it's been submitted. So I'm going to install that and again activate that plugging. So if we now go back to plug ins. We see that we've got the main contact form seven plugging installed on. We've also got contact for for controls for contact form seven installed. You'll also notice there's already another plug in here installed called Contact Form seven Dragon Drop files upload that is actually a premium plug in, so it's not available. If you search for it, you will not find it. You may find a similar plugging that does does something similar, but I'm not familiar with those. I always use this one. It's a premium plug in. It's available for download at cost. It's not very expensive, but it's It's incredibly good. So it's well worth the money. So I'll show you in a later module. How I'm gonna use that. Andi Explain why, Why? I like it. Okay, so that's it for now. We'll move onto the next module on Bond. I'll teach you how to put the form itself onto a page 3. Module 2 Adding to a page: plug ins. Now it's time to actually put the contact form onto a page itself. So the first thing we'll do is actually create the page to hold the contact form. So we go to pages at New and let's call this page contact. I'm going to simply add a container. Andi. Then I'll just publish that page. I've got it set to automatically added to the menu. Hopefully so we should see appear here. Okay, so click on contact. So here's the contact page. It's a blank page at the moment. It's nothing on it. We'll go back to the back end and edit the page. So we've got our container. We've got our row. I'm simply going to click at Element. I'm then going to choose contact form seven. Then you'll see that in this list, there is a single option called contact form one. So I'm gonna select that, save it and click update. Now, Contact Form one is basically the default form that is put into the system as part of the installation of the plug in itself. So let's just go to the front end and refresh that page. We should see now a very basic form, name, email, subject and message. And if we go back to the dashboard and then go to the menu on the left here will see that we've got this additional many white and called contact. If we click on that should then see there's that form contact form one. That was the was selectable on the page. You can you can click, edit and edit that name to whatever you like. I'm just gonna call it Main Contact for and Save that. Now we should notice if we go back to this page even though we've renamed the four, it's still there. If we just go to edit page again on view that let's just edit that and you see that it's automatically update updated the name in the in the element that we put onto the page so we don't have to worry about renaming that. So that is how you put the form itself onto the page. Now we're gonna look it in the next module. We're going to look at how we add additional fields into this for because we might not want it to say your name, your email subject to message we might want some additional fields. We might want to split your name into first name surname, for instance. We might We might want to add a phone number in there and in the next module, we're going to see how that's done. 4. Module 3 Adding Fileds: This is where it gets a little bit more complicated, but not overly so. It's just the fact that it's just the fact that you've got to get familiar with syntax off the form fields on. Then you can create whatever form field you require for your particular form. Let's do a couple of simple ones, first of all. Now, to edit the form again, we need to go to the dashboard, contact contact forms and then select the form that we're editing. We might have multiple forms a to moment. We've just got the one main contact form, So let's edit that when you see we've got a number of tabs here. Got for mail messages, additional settings and customize. Customize is a field that's only available. Sorry, a tap that's only available if you've got the controls for Contact Form seven installed. Otherwise, you wouldn't see that, Ted, but that's something that we're gonna use later on to facilitate the redirect. So, first of all, let's just add some additional fields. You'll notice that they all of these fields, these air separate fields, they share similar syntax, but they are slightly different. They're different in particular, between the square brackets, and it's the square brackets that, actually it's the field name itself, and everything else around it is the rapper usually really related to text. So let's have a look at the front end and see what this looks like. We've got your name and then the field, your name, your email and then the field your email. So that corresponds to what we're seeing on the front end. You'll notice that against the email, there's an asterisk that basically means that this is a required field that has to be filled in. Otherwise, thief form cannot be submitted, and you can make any of your fields required fields. This one is instead of text. It's a text area. And again, if we look at the front end, that means that this is expandable. It will expand with the amount of text that is put into it. Or you can Azzam doing like I can expend it at will, and that's that's a text area field, so that gives that that's how it differs. Otherwise, it's just a fixed, fixed, heightened Whitfield there. Okay, so let's, um, let's split your name into first name and last name so all I'm gonna do is I'm going to copy that first field and the label, and I'm gonna paste it in underneath. So then I'm going to replace your name with first name, and then I'm going to replace the label Your name again underneath that with surname. The required in brackets is just full. The label. It's the asterisks that makes it actually programmatically required or not. So now what we have to do is to change the field name itself, and that's that's the field name between the square brackets. But that just indicates what type of field it is. So this is a text field, and that's actually the field name next to it. So we've got your name. Let's make that your first name. And then the one underneath your surname. Two ends. Okay, so there we are. So there we've got that additional field in there. So that was the cut and paste method or copy and paste method. Let's actually put a phone in here is well, and instead of using the copy and paste, um, method, I'm gonna use these buttons up here because what these buttons do is give you an easy way of adding additional fields so you can add a text field an email field. Now an email field would actually validate the email to make sure an email is being entered in the field. Hence, that is a validating email field. Uh, you are l would be the same. I rarely use that telephone number. I rarely used that on DSO on you. You need to just sort of play around with these, see what they do, experiment with them and see what works for you. Drop down menu can be quite quite useful. Well, perhaps have a look at that one in a minute. For now, let's just put a phone in here. Um, I wouldn't use number, although I could use number to validate it. But obviously, people enter their phone numbers in a different way, so very often I just make it a text field. So we click on the text button and we get a new dialog box. Pop up and it's asking us now, do we want to make this a required field? Yes, let's make it required. Let's call this your phone. You don't need to put your in front of it. Incident It's just that that's the syntax of the the default form. And I've just got used to copying that same syntax, but it can actually be called anything you like. You could set a default value for it, but I rarely use that. I rarely use any of these other fields to be honest. Okay, so now it's giving us the field. Name itself off how it should appear on the form, so we can either just copy. Copy that and paste it in, or just click Insert tag, and it will put it straight in there. But you notice that it's put it in without a label. So let's just copy that label and we call that number again. It's required. And if you do copy the label, just remember to copy the closed label tag as well. And then if we save that, go back to the front end, Click Refresh, and now we see that we've got some additional fields in here on their the fields that we just put in. Now. A point to note is if you add some additional fields, they are only added on the front end. Now, when someone submits the form itself. In an ideal world, we would like to get that email containing all of the form fields that have been submitted . So what you what you then have to do is make sure that your front end form corresponds with the mail that is going to be sent to you. So this is where we go to the male tab and you'll notice that some of these fields are bold . That means that they do not appear in the message that will be sent when the form is submitted. So what we have to do is make sure they're there now, remember that originally, this form was set up with a single name your name. It didn't have first name and surname. So I need to take that out because it doesn't exist anymore. And I need to replace that with from first name and from surname. And if I just saved that now, you'll notice that these two go gray. That means that it's identified that those fields now will appear in the message that is sent when the form is submitted, but your phone is not. It's still bold, so we just need to add that one in a swell This this area here, the message body can take any form you like. Incidentally, you can you conform at it and type in whatever you like, and that's what will be sent to you. But importantly, you need to imp include these feel name field names in order to to get the message that you're expecting, or at least get along the form fields that you're expecting. So let's just save that now. Now, while we're here, we'll also just look at setting the address who this is actually gonna be sent to. That's my email address. There were one of my email addresses. You can actually add some additional email addresses in there if you like. Just by pressing the common, you can put in ended additional email address if you want it sent to multiple people. The from is just the the email address that it's being sent from on. What you should do is is is used the domain name that the form is being sent from so the website address that the form is being sent from after the at symbol. Otherwise, it may not validate, probably properly. It depends on your on your host as to whether the form will actually be sent. But it may actually give you an error if you don't use that domain name that corresponds with the website address that it's sitting on in the subject fields. You can put anything you like, but you you'll notice that on the subject line on this, it's actually pulling in the subject field from the form itself. So the user submitting the form when they fill in the subject, it will become part off the subject line. When you received the email after the form has been submitted, this you can just leave, as is because this will allow you to reply to the message that comes in to the sender's address. Um, and the rest we've we've already covered there. So So that's it will click on save. Actually, I'm just gonna change this to, um, were short it WordPress Web design Course calm because I'm gonna test that later on. It would be good to pick it up on that address. Okay, so that's saying that this form is gonna be submitted to this address is coming from this domain. This is the subject line on its containing all the form fields that that we have on the front end of before. Um, let's just also cover the messages tab while we here. This is the main thing that you would want to change. The sender's message was sent successfully when we actually send this form, which I'll do in a minute, you'll see that it it pops up by default. Unless you said a redirect, which will do later on in a later module, it will just pop up a message and and thats what it will say unless you change it to something else. Let's just submit the form now, um, so you can actually see that inaction. So let's just putting my name, surname and your phone number. Remember, I didn't validate that. So it's not going to validate and number. We're putting on a man address. Use that one. That's fine test. And so when I click send now that message is gonna pop up and say, thank you for your message. It has been sent. Andi, if you remember, that's where it's getting that bit of text from. But we're gonna change that because I want that to say submitting. Please wait Now I'll explain why I want it to say that. And you can again. You can change that to whatever you want it to be. But when we do the redirect, it will become apparent. Why? I wanted to say that rather than flash up a message showing thank you. It has been sent. Okay, so s So that's the main bit of the form. Before we finish here, let's just have a look at a couple of these other fields just to show you what they actually do. Let's put it in underneath phone. Let's try a drop down menu. Eso We can create a drop down menu with some options in it. Let's say yes. No, maybe just copy that, cause I'm gonna use that again. Minute. Okay, so you see that it's built the field for us here, so we'll insert that tag as well. Let's try now. Check box. Similar format again. You can put in some options. Let's insert that one on. Finally, let's just do some radio buttons again with now. A point to note is the difference between a check box on a radio button is the check box means that you the user of the form can only select one of thumb. Um, on the then the others are become disabled or not disabled. It's just that if you click one on, then click another. The other UnTech. So where is with radio buttons? It's You can choose as many as you like. Sorry. I think I've got that round the wrong way. It maybe check box. You can click as many as you like. Radio buttons. Just one. Let's just try it. That saved that. And those new fields should now feet appear on the form. Okay, so here we have our drop down. Yes. No. Maybe here we have our checkbooks. Eso it was right. Yes, sir. Chip. No, it was the other way around. So check box. You can have multiple ticked and radio buttons. Only one. So that's the difference between between those. Okay, I haven't put any label around those, but obviously, you could do the same. You could copy that same format and put a label around those as well. But that's fundamentally how to add fields onto a form. So the next thing we're gonna do is make this form look a lot nicer at the moment is just a single column and I'm gonna teach you in the next module how to split it into multiple columns on to make it look much, much nicer. 5. Module 4 Styling the Form: So here's how are familiar looking for it's exactly as I left it in the previous module. But now what we're gonna do is try and make it look a little bit nicer. It looks pretty, and I says it is because you know, it's inheriting some of the styling that's already in the theme that I'm using. The a viral theme with the import options that I've already imported. So it's got it doesn't look too bad, but what I'd like to do is to split it into multiple columns because it's getting a bit big . And this first name field doesn't need to be the full with we could easily fit first name, surname, phone number on in one line, really on that would then condense the form a little bit in just just make it look a whole lot nicer. So in order to do that, what we have to do is change some of the code here. So, for speed, what I'm gonna do is just trash what I've done, really eliminate that all together. Then I'm going to go just to my notes. Andi, grab some code that I've already got. Now. Well, I'll make sure that this code is available for you in the project notes. So I'm just gonna copy that won't explain just yet. But let me just copy and paste it into before, so that's now become or form. And if we refresh the front end, what we should see is that we've got some different fields, but they're actually split into columns. I'm gonna refresh, Okay, It's taking a bit of time, but it got there in the end, there were. Okay, so So now we see we've got name, subject, phone number, email address and a wider message field. So we've got two rows off two columns and then a single column and then also a bit of deep GDP are text on what's called on Acceptance Boston box. Now you'll also notice there's something here in square brackets called honeypot. Now that's a field that I've put onto the form. But I haven't activated the plugging yet that facilitates this, and I'll explain that in a bit more detail in a little while. Let's just go back to the form and unpack this. Now we're seeing some slightly more complicated code here, but fundamentally, it's just a different wrapper around the square brackets, which hold the field main. There's the field thing, your name. There's the field type text. The Astra rest indicates that it's a required field field. Kismet basically helps a little bit with eliminating spam on. That's something that you can look up and utilize the kids. Meta Kismet is usually a plug in that is, by default, activated in WordPress. On there's there's just a couple of fields that you use it on. It's the author, which is the name, and then the email as well has got has got one in. You'll notice it, says author under school email. And that just tries to validate the form when it's being submitted to a degree to eliminate spam. They will also notice that there's something called placeholder here on. What I've done is I've replaced the original labels, where which were above the form with a placeholder that appears in the form field itself. So if we see how that works at the front end, you'll see that the label, instead of being above the form field eyes actually inside it itself. So when I start to type that that is removed, if I take it away again. It comes back. So that's known as a placeholder. And it just kind of looks nicer, I think. Eso it's ah, it's Ah, it's a better way off dealing with it now again, if we go back to the back end, I'm gonna unpack this a little bit more for you. So you hopefully better understand how this is working. So how are we getting these two columns on a on a single road? That's just eliminate half of the form. Okay, so now we've just got one road with the two columns on the way that is is working. Is it saying use 1/2 of a column on the first row and used another half of the column on the second row? But importantly, on the 2nd 1 you'll notice that it's slightly different because it says Fusion column last in the 1st 1 That Fusion column last does not appear. It should be there, but it doesn't appear there. Okay, And it's so it's only in the last column that that should appear. No, I'm gonna just go back to my notes and grab some three column code so we can see what it looks like with three columns. Andi, I'll just grab the field name. So we've got something to look at, just replacing what I've put in there. Okay, so we've got some field names that duplicated, but it doesn't matter. Demonstration purposes. So now I'm just gonna eliminate the to. So now we've got three rose again. Same format fusion, 1/3 instead of 1/2. Fusion, 1/3 fusion 1/3 and again in the last column. We've got Fusion column last. Let me just save that and again refresh the front end. We should now see three columns. There we go. Now. We've got three times now. We could go on weaken, go to four, even five columns. It's exactly the same format. So as I say, once you get familiar with that format, I mean, I don't even have to look at it anymore, because I just I just saved the safe, the code in my notes and just reuse it as I need it. But, um, again, let me just replicate this with four columns will eliminate the leave. The three there, actually. So again, the four column is instead of 1/3 or 1/2 1 3rd It's now 1/4. And if it was fifth, you do 1/5. If it was six, you do 1/6. But importantly, always in the very last column, it must say, Fusion column last. So let's save that and see what that looks like. Refresh that. So there we go. We've got three columns and four columns underneath it. Now, that doesn't look very nice, actually, but there may be certain situations where you want to have four columns, for whatever reason on that gives you the facility to do it. So let's just get back to a usable form now. So I'm just gonna grab the original bit of code and create form using that. So now we've got a form that that does look a lot nicer. Name, subject, phone number, email, address, message. Um, then we've got the GDP are regulation text which can be edited at will. Then we've got the acceptance box. Now that has to be ticked. Otherwise, the form cannot be submitted. Andi, in order to control the text that appears if I try to submit the form, Um, without that that ticked. If we go back to the mail tab. Sorry, the messages tab where we were put in the submitting Please wait. You'll also notice that there's you must accept the terms and conditions before sending. Now, if you you can edit that text, that's what it will appear if the user tries to send the form without taking the acceptance books. Okay, so finally, in this module, let's cover this honeypot website. You are L issue, Aziz said. Previously, we've got this square brackets honeypot field appearing for some reason. And that's because it appears here as a field. Ah, no, I have not installed the plug in that will make that disappear. Now, let me just explain what this does before I install the plug in again a bit like a kismet. It's designed to try and eliminate as much spammers possible. And what it does is it puts a hidden field on the form that the that a human being cannot filled so they will not fill it with any data. They won't try and put a phone number in it. They won't try and put a name in it on the, um, plugging. What it does is it looks at the form contents when it's submitted, and if there is anything filled in to that form, it will know that it's not a human being, Phillipe filling it in. It's a spam botnets piece of software out there trawling websites looking for contact forms once they find a contact form, once they find the code on the page, they will then try and fill in every single form on the field, every single field on the form, rather on submit the form. So if that for that field is actually filled in, we know that it's unlikely to be a human being that's filling it in so it won't allow the field to be sent called the form to be sent. Okay, so let's install the plug in now that will help us with that. So again, we gotta plug ins at New and we do a search for honeypot for Contact Form seven. And there it is, So we'll install that. We'll activate it now if we go to the front end and refresh, we should see that completely disappeared. So it's now become a hidden field, and that's literally all we have to do with it. I mean, obviously we have to if that wasn't already inserted a za field on the form. If this was not there, let me just eliminate it and I'll show you how to put it in place so we just take it away together. So if that wasn't there, what we do is we just go to the honeypot button, which has now become visible because we've activated the plug in on. You can give it any name you like. I just call it Website. You are ill Andi insert attack and then it puts it in there, and that's all we have to do. There's nothing, nothing more for okay. So that's how form is looking Onda. Just a couple of other notes on styling. If you've installed my import code to style the Avada theme from the default, if you go to theme options, Onda custom CSS. I've got it commented out at the moment, but there's a section down here called Styling for the Contact, for You'll see that it's commented out in green at the moment. But if I just moved the comment, but it'll becomes active and this is just a little bit of extra styling that I've added to the fore click save changes. And now, if we refresh that, you'll see that it's styled it slightly differently. There we go. So I've eliminated the boxes around the form and just put them in with lines, which is a bit more minimalist, which you may or may not like, but that that is just something that you can use were not on just an extra note. There is also some form styling available in Nevada itself. So if you go to theme options and extra and form styling, you can. You can style the form, the colors, the height of the fields. All sorts of stuff can be be styled there as well. So have a look at that. Have a play around with it. Andi, see if you can create something that looks even better than mine. I'm sure you can. Okay, so in the next module, we're gonna look at how to make the form redirect to another page once it's being submitted . 6. Module 5 Setting a Redirect: Let's have a look. We've got our form. We've got our plug ins installed. Let's just check that the plug in is actually activated that we need. If you remember, I mentioned what the plug ins do. The early part of this tutorial on and the plug in that we need in order to control the redirect which we're gonna work on now is this controls for contact form seven. So that's already active. We've got our contact page, but what we haven't got is the page that we want to redirect to. So the first thing to do is to create that page. So let's go toe new page on. Let's call it something creative like, Thank you. And we'll just put a single row on there on some text, right? Thank you again on we have perceived little message and respond within 24 business hours ago. Now you can write anything you like on that page, obviously, and you can style it any way you like. Now I'm gonna make this a child page off contact. You don't have to, but it's kind of just neater, in my view. If it is because then you can see If you've got a lot of pages on your website, you can see that it's kind of related to the contact form because you might have other thank you pages on the on the site. Okay, so we've just published that page. Now, let's just have a look at it. The front end. See what it looks like? Make sure that it looks as expected. Okay, so that it is. Thank you. So this is the page that we're going to redirect the form to once it's being submitted. Eso Let's just First of all, we're gonna copy that you are l copied to the clipboard, and we're gonna go back to our dashboard and backed back to the contact form section. I'm gonna go into the contact form that we're working on. Remember, we might have caught multiple contact form so we can set a different redirect for each one of those. Then we're going to go to the customized tab, which remember, is only visible if you've activated the controls for contact form seven plug in and was simply gonna paste in that you are l to redirect you are l on success. The other thing, I'm gonna do is disable Ajax on this form. You don't really have to do that, but there may be times where you'll get in Ajax conflict conflict. For whatever reason, I don't fully understand why. I'll be completely honest. It depends what other plug ins you might be running on your site. But for the majority of my installations, I've just disabled Ajax on this form on. It'll seems to work fine. Okay, so that's it. We just refreshed. Save that. Go back to the front end and now I'm gonna go back to the contact form itself. No, let's just submit before. So again, we just fill it in with some test data and email address. Give it a message. Let me just submit this without checking the acceptance box. So you're nature's now. You must accept the terms and conditions before sending your message. Because I haven't checked that that box. Remember, if you want to to, you can edit that text by going to the messages. Tab Andi editing that field There. There are the terms the sender must accept. OK, but now if I check it on dry submitting again, it should send and it's redirected. It to the thank you page. Wonderful. Now, the final thing we're gonna look at in this'll module is I'm just going to click on my email, and hopefully the form will have already been sent. It takes a while to open. This is outlook that I've just got set up for this purpose. Okay. Come on. Come on. Yeah, we go. It's actually still loading. There it is. Okay, so it's coming. Andi, what we're looking at here is the form itself. Sorry, that's the one. Okay, so we've got the form. We got the subject, the phone number, and, um, the body of the message, the 2nd 1 that's come in has the phone number as the text field. Andi, this is completely wrong, as you notice. Hopefully now, the reason for that is because if you remember, I changed all of these forms A lot of these fields and they now called something that they weren't before. When I originally set up this male tab. So that's why we're not getting these form fields in the mail itself. And that's why I've demonstrated it that way. Just so you'll know if this happens to you, but you'll notice that the originally I split the columns to get a first name and a surname , and then I reverted back to just a single name. So importantly, what we have to do if we do that is to change those field names back to correspond with the fields that we are collecting. On the form itself. We got one more. The GDP are acceptance, and we'll save that. They should all go grey now. There we go. So we're now we're now confident we've got all of our fields captured on the four. So now let's try that one more time. Fill in the form on submit again. It should redirect. Thank you. Wonderful. Now let's go back to the email on this time we've got all the fields that we were expecting . Fantastic. Okay, so in a later module, I'm going to show you how to change this. It says WordPress at the moment. And ideally, we would like it to say, um the website name or something other than WordPress by dealing, and that's quite easily done. And I'm going to show you that is a little bonus at the last module off this tutorial. But next we're gonna look at how to add another field onto the four, which will facilitate a file upload. Okay, so that's what we'll do next. 7. Module 6 File Upload: file upload. Let's have a look. It's really easy. Um, all we need to do is to install a plug in called Contact Form seven Dragon Drop files. Upload now. This is available by a website called Theme Forest. If you do a search for WordPress plug ins, you will find this premium plug in. You will have to buy it. It's not that expensive. In my view, it's well worth the money. You may find a better one on if you do, let me know. But But this one just looks really nice, and it works pretty much straight out of the box. So I've installed the plug in in advance because I won't be able to search for it using plug ins as new as I mentioned. So let's just activated. Now we're going to go back to our full and into the form that we want to work with, and you'll notice that we've got some, um, additional button that's appeared called drop files. We've also got one that is called file. I don't use that one because that's not gonna work. What we need to do is to use this one called drop files, and I'm just gonna pop it in between The message and the GDP are text. Now, you you don't get the option to rename this. You can make it required. Field. You can also set a maximum file file size limit. That's possible to upload, but I never, never put anything in there. What I do often uses the acceptable filed types, so you might only want to accept a pdf, perhaps a word document. Remember to use wood with D O C X as well. What else? Maybe a rtf, maybe a text file. Anything you can put any file extension in there that you like, and it will limit the upload to the only those file extensions. Or you could just leave it completely brand blank. Now I just tempt out of that into the net next field, and you see that it's built the field name that we need. So we now just click, insert, uh, insert field and save it on again. We could put some text around that just to explain to the user what to do. But let's just see what that looks like without doing that. The front end. I'll just refresh that, and there we have it. So we've got a dragon Draft drag and drop file option here now. So what I can do is just drag off my desktop a file into this area and it will upload it. Or I can click on the Browse files and it will allow me to browse my hard disk, perhaps go to a C V. Then, if I again see touched at these details in, put in a message again, take the acceptance and click submit on its redirected to thank you. Now you'll notice that I did not add anything into the mail. It's it shows his bold, but I didn't actually add it into the message body simply because there's no reason to do it. You don't need to do it on. And if you if I go back to my email now, have a look at the the, um, the foot, the email that's come in. We'll notice that we've got all our form fields in the message body, but we've also got the attachment off the document that was uploaded. Eso it just works like that straight over the box. That's why I like it so much because there's just very little configuration required for it . Eso that's it. Have a play with that by that. By that plug in, I don't make any money out of that. Incidentally, I'm not on any affiliate deal. I just think it's a great plug in. So if it's something that you need to do on your own website to facilitate a file upload, then that is certainly a good one to use. Okay, so finally, in the next module, we're going to look at just how to change this WordPress name. When when you get the email because you might be sending the email to somebody else, and you probably wouldn't want it to say WordPress. So I'm just going to show you how that can be easily changed in the next module. 8. Module 7 CB Mail Sender: angel off the course. Thanks for making it this far. If you remember, what we're gonna do is we're just going to quickly figure out how to change the sender name from WordPress to read something else. Whatever we wanted to read, in fact. So in order to do this, we have to install a plugging. I'm going to install this plug in. Now we're going to do a search for C B. Um change mail center. I think it's called CB Male. I'm doing a search for CB Change Mail Center. There it is. So let's install that. Activate it and you'll notice a sin is it's activated. We're going to get a new menu option here. CIB email sender. Now this is already filled in. This would be blank if you're just installing this new because I've installed it before. The fields are already filled in, but you can Let's just take out the word WordPress because it's complicated it so we can see that it's actually changed it Web design course on putting the sender email and again, you can put in any email address you like their, but do you make sure that it corresponds with the Earl, the domain name of the website that is being sent from after the at symbol safe changes. And that is it. It is done now. Importantly, I'll just point out that if you do install this plug in and you leave this empty, it will have a negative effect. It will not send the mail. So you're just gonna make sure that if I assume that you've installed the plug in that you do fill these fields? So let's just refresh that page and try sending the form again. Just going to quickly fill it in with some dummy details again, won't bother uploading the file. Click, submit. Andi redirected to the thank you page. Now, if we go to the mail on, hopefully we'll get a male any time now. There it is. And it says Web design course instead of WordPress. And it's as simple as that. That's how you change that name. Okay, that's the end of this tutorial on Thank you for making it through. I hope that you found these things very useful and that you're gonna go now and try them out on your own website on as soon as you've done that police pro. Post them in the projects. Andi, if you want me to, I can review them and give you some feedback. Good luck with it and have fun.