Contact Form 7 Tutorial | Juri Fab | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (49m)
    • 1. Course Intro

      1:31
    • 2. How to create contact form in WordPress

      7:39
    • 3. How to install contact form 7 and locate settings page

      2:28
    • 4. How to resize text area rows

      1:34
    • 5. How to stop WordPress spam emails

      4:38
    • 6. How to create 2 fields on same line and customize it

      5:25
    • 7. Redirect after submit to any page

      4:06
    • 8. Contact form inside a scroll box tutorial

      2:21
    • 9. Conditional fields on contact form 7

      4:09
    • 10. Contact form 7 multi step forms tutorial

      9:08
    • 11. Custom design contact form 7

      6:06
  • --
  • 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.

28

Students

--

Projects

About This Class

As website owner you want to create contact form on WordPress. But it's not so easy if you are familiar with coding. In this tutorial I will show you step by step tutorial on how to create contact form. In this course I will show you how to create and customize web form by using most popular and trusted plugin on WordPress: Contact Form 7. 

After completing this course you will be able to create beautiful web forms. You will also learn how to protect data and how to prevent spam messages.

Contact Form 7 Examples:

1cd17bcb

db786801

338bb04f

Meet Your Teacher

Teacher Profile Image

Juri Fab

Digital Marketing Strategy

Teacher

Working full time as an Affiliate Marketer. I'm creating niche websites and rank them in Google. I have created many successful projects already what bring passive online income. I have tested many marketing strategies and know what works best. Here on SkillShare I share my ideas and strategies in order to help other people become successful in digital marketing.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
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.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

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.

phone

Transcripts

1. Course Intro: Hello, everyone. So it's jury and its exclusive course for skill share. Uh, in this course, I will show you how to create contact form and how to I want if I it how to create custom styles. Change, uh, Kohler's off your Web form and we will use contact form seven. It's ah was the most popular wept for Blufgan in WordPress, and I will show you how to modify everything in contact from 70 to greet Red directs after for himself submit how to receive its how to receive, uh, in store contacts. But users well, uh, enter So when users will feel for, for example, I will show you how to save this contacts in ah four press website out Teoh, make deliveries of your Web form to your email addresses. How to protect the swept form from spam messages and things like this. So many interesting lectures will be here. So police check next videos where, sure, how, exactly we can modify such 2. How to create contact form in WordPress: how to grade conduct for in WordPress website. So here is our website. Let's go to dental work now we need 34. We need to start blogging, so go to plug in section at New. It's about Blufgan section hearing and you should sort on the for sale. Is there are money plugging, but I protected the smile. So here it is. Let's click on install now and after installing, you should see. But unlike the stick to wait so it's a good activate. So, uh, as you can see Blufgan installed, you can find it here in left sections. So let's click on contact and you can see that already one conduct armies created So it's quick on agent. So we will be contact form exists on give me court for me. So, uh, let's, uh, don't use same text names. Corpus simply. So here is a name for legal. We're gonna rename. Have a look bigger. So next few piece full name? No, let's do this. So, um, next step was full name. So it's Greek on. Uh thanks. Do you name required field gone. So here. Conceived up Created Insert Doc label here. We should grows bloated for me. You can put star so anyone can see that these field required. So it's great. Now drug don't for so to user copy years. This too from Google. I'll select Noid. So here we can copy now. Old details. So real options. So no, it's great. Here on drop down menu. Give name. And here we should based all options. So Kertesz, first option should be pleased. Celik likes these one. Oh, it's please circling option. And it's could be Oh. Oh, please. Based it so is completed. We can also she puts it. Field required. Here. You can see gold generated for that generated forces. Thanks. Great car. You're in Tosa. I mean, to provide deception. Funding required. The sticks. Um, it was a form under support. So, uh, seen with a label calls break. It's your name. It states that fueled required Use your skin. See that required. So free fields created already. So it's safe. Our four first go to really finished that Your email address where you would like to receive submissions? Is this well, word? Well, here we should, bro. I, uh well, he just back to restrict or, um you know so through simply copy here way will see that my sexual come from thes name. And from this email here, we should die. So we'll get full name gift. I mean, people. And here we should funding require we can have more fields. But it's, uh, same a community, same steps and said I showed before. So it's super quick save. We'll not lose time. And for demonstration purposes, I will show you how to do this. He's pretty field. So it's crapping all over this one deck. Go to your Penis. So, like your page click ID in place where you would like to display your contact form. Click on element. I'm here. Good luck and simply placed. You're God. What you got from contact form seven. We can save after cyclical emptied and quickly fresh page. So here you go. Sit here. You can see a warm with just created, you can have more feels it required. And we've been also custom ways or how to do this. You can see in my another video 3. How to install contact form 7 and locate settings page: What's up, guys? Today we will talk about Contact Form seven and the most popular questions. What I see in Google is help to locate settings page for your conduct. So, first of all, look into your website in order to do so that your website address slash and type here we'd be working age people if your user name and passport and after that you will see their work like these. If I got it for is not in styled, click on plug ins at you and here simply die warm to save him. After that, you'll see installment bottom, click on install no bottom and activated. So we convicted. Activate and the contact form will be actuated. So in this section you can see it contacts off quicker meat. This is your contact for In order to create new contact form, click on a You by default have already one form here, created toe agitating, your concrete contended, and here are savings what you can. I want to fight here so include new fields. If you're change your email, here is message body. What will be sent to you with all forms? What people will submit. There's old out of people 70 your contact form as well. I recommend you to go to plug ins, a new ending. Stocks for Mingo. These forming parking will store or in my word dresses. So, uh, using seriously, you can build your image released by simply clicking, selecting quote, emails, and we can go on export. So this is also useful parking. We comment to use it giggles and corpses here. There was a couple avalanche this video in, uh, Wailea. So, uh, all about the foreign seven. So make sure to check my other videos is up. 4. How to resize text area rows: Okay, guys. So here is contact form, and I would like to change Rose here, so make it smaller like this, For example. In order to do so, go to your WordPress dashboard, like eight. Your contact form Creeper. So contact form Sam. Authorities. We could contact forms. Uh, so here it is that you're contact form, Click on aid. And, uh, here is the section Whatever elected aided. So it's text area. So here it is. I've here how many rooms you weren't. So I went, for example, three year olds. Well, it's Greek will save. So I will delete case now. So and updating update the spatial updates will take effect. So now exists. Conceives three rows only. So if you want, So let's save it. So as you can see all working. So this is the fastest way how you can change it if you like these, uh, dio and sure to put legs subscribe and comment in Leave your comment. If you like any other ways, Contact form seven 5. How to stop WordPress spam emails: Okay, guys I would like to share of Is you great. Blanken, what can help you to stop all these balm to your WordPress website? So I'm using here and we'll gun. It's, uh it's mail system. What? Sent messages from my website. So every time when people will submit, submit any contact for or, uh maybe, for example, show you so this system manage jewel males, outgoing emails. What are sent from my website. And as you can see from these least some consists somebody spamming my website and sending messages every minute. So what I have done here, he's I have installed some protection wagon. So go to your WordPress type. Here is about protection in this poem my green dog, I will put also included in the description below the way. So you consider a quick on it and install this party when you will installed weaken, activate. This can be done. If you weaken wagons said you Then type here you will see you'll see such bothered it. Stop now we would install it and then you will see blue button Dwight actuated. And here will be you option for you. First of all, go to savings and activates his spark viral. Simply click on it, and here you can click on Edmund settings and select what Forbes to protect. So you can see I'm protecting registration for comments for water for any other can casto conduct for. And here you can select everything here. Make sure make sure to read everything how it works, like before, activating any options here before accessing these in order to see such options. First of all, you should get, um, key for these problems. You'll see like show the access key. It will be delivered to your email so you should hear your email. Little deliver You access key so doctors that you will be able to use it and I'm receiving color the farm from my website. So some person visit offers page Greek on this email and sending a lot a little request. But after using the explaining this parking real estates saves me a lotto, uh, are a lot of resource is off. My website mints down and stops farming. Does he concede? It's working really, really time, and here we could see how many attempts already blocked. So everything is block here. If we will go to queen talk, Click here on Queen Talk Dashboard. We'll see options here that somebody's bombing from Philippians ending traffic ever since his block here. So here we can click on in despond walk here we can see I p address what type of messages they're trying to send. So here is a message with they will try to send So is this a Scarlet works like guys So this black and really saves resource ISMs? I tried many black and sent this one really work, so make sure to check it out. You'll find holdings in the description of all for people who are interested in this myo commas will put also being here also grand software. What helps you to trick your marketing results? And it comes so make sure to check the South as well. So Jekyll wings and a description and have a nice day 6. How to create 2 fields on same line and customize it: So here is my contact form. As you can see it, it's two fields on the same lines And the Louise button, please. Uh, four threes. So how to set up such? But for let's go to prepare their board, Let's go to contact. Conduct warms. Here's our contact form Quicken ended and here we can see all the court. So before Uh so first of all, we need to go also a lot amusing Colorado. So you should go to your team in team options. And here is such file custom, T and C's. So here we need to set up two styles. So here it is. It's a style for two golds. Mexican CF created class here. Uh, so it's s pleated how and created Drove? No, I have a copy Z score, so you can, uh, use it nor didn't create two lines. So, uh, simple copies This coat to your custom t is his file. Then go to your contact form Here I said a bone. So simply open breaking fun size are unions boat And here you can see it up close. Close The both closed in front closed here waken See, I'm using class but we confused here what we have just created here and in first call the free no free fields. So it's business name funding required and phone number. So here it is, a business thing funding report in for Remember, this is first cold. After that, we should close it. So here it is, Collier. So deep glass gold and put off elements what you want in the first column and them close gold. Then open a deep glass golden again. It, uh, more elements in the second corps and make sure Do you close, uh, to close this call here. And, uh, after that ice you can see using eating button in one road. So here is our bottom. I'm using, uh, good open class core throw bending bottom in center enclosing, uh, grow so. But also using I d. Whose idea name? This is custom style for but so here it is. So is he concedes Barton with 90% bottom cooler and text color over. But also we have included here, but reid and no back in style. So here it is. So you can find all caught in the description below. Make sure simply cooperate and you have such for all so that you can see Azeris background on for So how to read the background Simply go to your page. Here is my form. Here is simple shocker for life form and this for the in campaign. So I will edited now go to design option And here is background color. I have simply put your background color and waiting here we'll see Prince, I did cross. This means that, uh, it's just around to these borders. If you want to round these borders in Gustin CC's, you should also I think we bought the radio stem pixels. This is how it works. Like who is pretty simple. You don't find below, Make sure to cope it and you can try to entity in si online home changes. 7. Redirect after submit to any page: So here is my website and this is contact Form seven And what I would like to do now is every time and people will enter their email address and we can get coupons on their email will be added to my website. What President abilities and, uh, visitors will be forwarded to my custom. Nick, my custom lightning. So you know that to do so let's open your wordpress website, go to your dead report And so now we need to end some code to your website, enter periods and select here editor Now we need to search here under template. You hear these? No. We counted in the after head section. We need to so Dr Z's you can enter and it cold. So here is my Google Analytics called After Eat. But you if you like it here. So here is the cold. I will post this court in the description, though, so we can simply copy and this link you can change to your link so you can forward customers and visitors to anything you work. So it's quick update file. Make sure to place the sculpting better section presented work on every beach. So let's go back to our website. Click agree fresh and let's enter. Something will check if direction is working Now give Yes, we see confirmation message and we are directed to my so you can see it's working And, uh if you like you come in style black and flamingo. Here you can see all emails, submissions, what you see on your form. So if you like to see results in one page like like I am a woman So go to blackens record had you type Here you go Greek ender insecurity So you will see. But But unlike in style now so quickly and then activate and intellect section your work They're bored You see Mingo so quickly and you'll seal submissions as well. If you go to your cortical for is it and we can mean you re contact your email address on after submissions you can see Oh, uh, in most goals, do your mail books. So guys hope this week it was helpful. Make sure to check all links and codes in the description below. Oh, nice day. Right 8. Contact form inside a scroll box tutorial: Okay, guys. So here is our conduct form. And I would like that screw box here. So, for example, if you're Quicken six menu, you can see it's expanding. Gretchen, these image. So, uh, I was looking out to my ward breasts and will add school box here. Let me show you how to do this. So I'm using Carl. Adam. Here is our shark. Got for contact form, and I need to do it here. Simple, simple style exist. My conduct forum Sharp cut Here. Here you can get size move. It's nice on box. So let's click. Save update and let's refresh our website and see how it looks like. So here these we can add the more size. Yes, we can have more size here. Approximately 100 big source. Let's add more sinners like disease. See, I'm detained and let's refresh our beach. We'll still need toe ed around 20 pixels handed to look boot. So here is how it works. Works like I put this coat in the description below. Make sure also check our grand out of marketing Serious what I'm using. Get response. You'll find a link in this with discoverable guys for any questions, please come. And under this video, galvanized eight by 9. Conditional fields on contact form 7: Okay, guys, Some working on another project on WordPress and one of my customers would like to add such options on contact form. So every time in Greek on this manner will be added more fields. Oh, uh, click again and more. He ended more fields. So how to create such options? How to exist? So very such working conditional fields for contact for himself. Uh, you should go to your blackens and you insert there, Name of this, block him and install it. Once activated, go to your contact Contact form seven and you will see the's option. Conditional Feels I'll show you now how to more fields. So what you need to do is, uh, think first here, conditional feels group create you. And in this group, issued at all content what you would like to display so you can share For example, let's end here while more fixed field. He's very so text field and it And if now we need to great condition with when to display these groups, you can get here more than one element as much elements is one. So to create great thing, drop down, drop down, at least, So we need to would hear anybody or some condition I usually use like symptoms. You're good acceptance insert mean here. We should put something playing these, for example, and more use going safe and go to condition field stuff. And here we should add you. So? So I think you're you acceptance. It is. It is. So every time when books will be checked, it's number one. It's like one east rule your balls, then show you and show you and glink safe. So when you will update all these But be warned this in this example So, guys, I hope this really helps. You make sure would like subscribe. And you will get your fresh meat. Salsa, please. Chip, like latest thinks what? I have read it in the description of all guys for any questions, please drop me coming. Someone they might 10. Contact form 7 multi step forms tutorial: Okay, guys, I will show how to set up multiply steps Web form eso here in these and so work like these selection you can enter quick next, and it moves toe another stamp you can under details. Here, click next and final sort stab. You can enter email for a great God and it'll sent. Uh, all these submissions will be sent to your email address So hard to do this. Uh, first of all, you need to go to your board. Respects I'd go to blackens Greek. Add new Here is plug and moved by step form. So when they were going blackens at you, search planes could hear by step for and here it is. So you should quick on in style and then click on active activate. But like this and as well, you should have standard Web form contact seven second conduct seven Web form. The forms and shooting started so indoctrinated. So when When the steps are land, you should go to the section contact called it forms, and you should do following. So it's a conservative free steps here. Step once that Tuesday Free Step three final. So let's quick or edit and I will show you how to grate it. So, uh, let's start from beginning. So here you can see that they have free fields, own product details. So it's drop down me and drop down menu and some text field and bucket next. So, look, as you can see, formed is wide because bigger on blank Great. And, uh, text will be displayed on the right. So this God formed color white and here is close and break it and free label. So is this one. This won't, uh, the's one creates reason every time when you create new label should put, like sees label open brackets labelled, present closed. Break it. Here you can put any text and, for example, you would like to add your textile so quick text given name default value. Would you like to don't play forms? Imposes What If you have a costume CFCs while you can put here class and click insert attack. So here it both books. Okay, So in order to good here, next bottom, you should clean on multiply step clean parents step. So this one is the first 1st 1 So I put first and we have total three steps Next page link . It's, uh, should put so free steps means free, different pages. That was same design. So I should create second page, for example, here in these and core peeling putting here inserted. So this is card works like when you insert the stick here in these before it. You should put standard seven bottle, so I d. It's style. So if you wanted a custom style like me is, these were it's in appearance theme options, and it's custom TDC's. And here you can enter style. So consist style name here in these i d. And here is a simple setting spirit. So background cooler, huh? Front bolt for size in button size and color. So when you have graded a purist step, you should coping The's called Go two pages open your mind, range from step one and put and putting the place where you would like to display this form these courts working slow. Okay, so here is our page. Put your God log and here is my web contact form Good. Same you should do for next steps. So Step two, for example, here a taste of to your details. Here are first name was name, company and postcards for Feels. It's Here's a first name last name company, Post court front color White closing Break it. Same. But next and multiply steps, please. Uh, here we can see step to from also all steps. I'm old free and link where you would like to forward next and Chelsea scored. I'll end the wage, too, and list. First step is free. So here are when we do feels email, inform and when creeping on request cord, he will deliver a mile. So this little font color white Open break. It's close brackets label email label and Simon Bottom. He's our style, Heidi and name different. One great quote. And here we should put also moved a step and step free. Total steps three. And we don't don't need to put anything any link because it will stay on this page and it'll display message. This message our supplier separate training. You can put here any custom message in went in male settings. You should boot from all steps. Thesis. Copy all these cards and put here what information you have to deliver toe to save New York email. Here is email where you would like to receive. Okay, guys. So, uh, if you have any questions, uh, just drop me a message. Comment under the CDO. And you have also Checker Holdings Industry. The description Goal. Okay, Have a nice day. 11. Custom design contact form 7: Okay, Sell it off. Questions in Google how to create custom designed for great custom designed for contact form seven WordPress. So I have created Asan Example disease form and, uh, drop down menu where people can select services and insert their name, email, phone or Skype question or any requests and customized bottom. What? Little old messages. My emails. So I will show now how fast you can create such form. It requires some skills you need to modify custom. CIA says file. So if you go, uh, in my case is in my case, it's, uh, the infusion in style. So we'll go appearance team options and a custom t s. So, uh, all right, open my form again. I just I will show you what perimeter seek and modifying one second, So a so you can see. I have left section and right section, and this one is middle. So here is good for left or right here. Recon, uh, change size. So 55% home con irritates this section and another smaller right section. So this is good for it. Okay, so next next step there are called for for these fields, and here is the coat. It's, uh Is this one called? It's Where is this one, Really? And this court? Kids for disease, More sections. So here it can. For example, at border, if you put one pixel and so it means American change color off border. And here you can change border ideas, make it more around there, or make it legs like big round Banksy's. Uh, okay, so you can change the details. You can change high, please, if you like. Um, this is good for him, Button. So American Change, please. For example, if you do not want to make full size, put here like, uh, 50 pig cells like Rabies. Uh, change size, background color did come. I will put those is courting the description. So we will be easily condemn with it. And the second court, he will show you It's for contact form contact form. It's on HTML. So here is our form or break aided. And here is good for you can see it's for this left right section. So here is your name, then. The next line these one means next line here is our drop down menu. Make sure to include I. D. Theis idea. It's style. So it's like a show before its style open again. So here is a style. You can name it different, but it should be when you it So he's one style mean legs concedes appear for this, please. This these And here is another style. This one Here it is. If you like, you can change course a cooler text, not black but for temple or ensuring the other. Um, so on. And, uh, this left and right. And it's here after this deep duck. And, uh then we put, uh, more question these and buck up. So corpus this court as well, and you'll find it in every description. So, guys and cops, this video helps you for any questions, please contact you by