Video Transcript
Hi, this is Alex. Today we’re going to see together how to install and set up contact form seven.
Contact form seven is a plugin that we will install on wordpress, and which will be extremely useful, especially for your visitors to
contact you.
So here we are on my site, Twaino, twaino.com,
and so typically, I’m going to need
add indeed…
Uh…here in the “contact us” section, I will need to add a
form, to actually help people to contact me much more easily. Good.
So, what I’m going to do, so to do that, first of all, so we’re going to go
on the admin console
of your wordpress. So, if you have not installed
contact form seven, you click here on “add” and then at the top right…
That’s it.
So you see, it’s this one. I’ve already installed it, so I’m not going to reinstall it again.
But this is a little trick, a little Japanese design,
because I think the creator by the way is Japanese, and you see it’s an add-on that is extremely popular, that works extremely well
and overall
I highly recommend it.
So, once you have installed it,
you will have
in your sidebar, a part that will be called “contact”. In fact, contact form seven is uh, it’s
This is actually the contact part with the little envelope here.
So,
if you click on it,
you’re going to have here, there are several possibilities. So, what we’re going to do together is that by default, there’s always a uh…
a form that has been created automatically. Okay, what I’m going to propose in this video,
is to show you from scratch how to do it. So, to do that, you have to press “create a form”.
Okay. So, in the first instance, what you can do, obviously
it’s going to be setting up, well, giving a name. So for example uh,
it can be uh…
so form one.
And then, you see, there are different, so already there are several uh, there are several windows here, okay?
The first
window, this is what will allow you to
of,
set up your form. Ok,
the second um…
So, obviously don’t worry, I’ll get into the details in a moment.
Then, the second tab is related to emails, so typically, when people are going to send a form,
well, you will receive their information
in your email. So typically, you can set this field.
I personally, often by default, it’s very well set up, so I don’t necessarily touch it, ok?
And the third tab, it will be the default messages which are
sent. For example, if a person
type something wrong or if ever there are mandatory fields
in your form that are not filled out, of course, there will be an automatic message that will be sent
through
contact form seven.
And then there are additional elements…
Um well, I’m not necessarily going to go into the details of that but actually, for if you need to go further,
there are additional settings that can be made.
So,
my form is called form one, I’ll save it.
Okay. So there you see, when we record,
then we get the code directly. Okay. So this code is what we’re going to do,
is that we will copy it,
and um, what I will do is I will create
Then, hop…
I will create a tac page, so “add”.
Once the form is clean, I will integrate it directly on my homepage. But here, for pedagogical reasons,
it’s easier to show you through this. So, the code that we got here,
What we’re going to do is, once we’ve copied it, you’re going to click on “text” here.
Not on visual but on “text”. If you copy directly here on “visual”, and copy and paste directly
the code here, it won’t necessarily work. So well on “text” here, and we copy, well we paste here. Okay?
So once it’s done,
you will see, so here, there is different information that is provided. So for example, it seems a little bit …,
a little rough like that but don’t worry, it will be clear in a few moments.
So there is your name ok, then your email address,
subject, your message, and finally submit, so <>, and send. Ok,
so typically on the page where I put my code,
we will press “preview”.
And you see
so your name,
your email address,
subject, your message.
So it’s exactly the same fields. And typically what we’re going to do,
and what I’m going to show you in this video is how to change some of these fields, add some more,
potential benefits, and what are the different modalities
finally, that you will be able to use
to customize, to finally improve your contact form. Ok.
So,
already, the thing to remember is that, it will always start with ,and it will always end with
also like that, okay? So this is the equivalent of a section. For example, this,
this, that, or this, okay?
This text here is one of the elements that we can finally change. We can change the name.
For example, if instead of mandatory in brackets, you wanted to put a small star,
and you register,
well when we do “overview”,
you see,
automatically well we changed directly here. So we went from “mandatory” to the little star. So in other words,
this text here, it’s something that you can change to your liking, okay? The part that’s below,
is what will be linked in quotation marks to,
a bit of code actually. Don’t worry, if it doesn’t speak to you at all, in a few moments it will,
because in fact, to help you create
this mini code, there are these buttons that are here, okay?
So typically, uh…
how does it work?
So there is the “name” ok, then your “email address”. You see, these are also elements that are
mandatory. Then it’s “subject”, then “your message”. So, that means here,
if you wish, for example, to add
uh…a question, for example
“where do you live?”,
and that… So there you go, so you want to ask that question there
to your audience, and so what you’re going to do is, you’re going to add a “text” part.
And so, this is where, in quotes, the parameterization is done.
So in this text part, so actually it would be a text part exactly like this.
In this text part, you have several elements. For example, you can make your field mandatory.
For example,
if a person does not fill in this field, and presses “send”,
there will be an error message to say, that the message is not sent because this specific field is mandatory.
So if you check, you make this field mandatory.
Then here you can give a name. Typically, this is something I don’t change
never, and for example, you can also put a default value. For example, uh I don’t know as a default value, you can put “Paris”.
Okay, “Paris”, “Lyon”… In short, a city.
Hum
then, another element here actually for…
You can use another add-on that I would recommend, which is called << Akismet >>
and which effectively prevents spam. So, this is an element that we can
have and that we can add on top of that. Okay?
So, based on that, you fill in according to your needs. So, there are also “attributes” and “class attributes”.
Overall, these are things that I don’t use. Uh…but it does allow you to identify, uh….
The information is more simple, but overall…
Well, you can do as you like if you want to push the thing a little further. But here really,
it is not the most important element. If you ever
click on “insert tag” this way, it will work. Okay?
So there, for example, if we record,…
Hop, I’ll put “preview”…
That’s it! So here now, I have a new field that has been added, where people can actually complete
their city, can complete
the elements that interest us. So that’s the first uh, that’s the first
option one.
Hop
Second option then, you can add the e-mail.
So this is not necessarily a case I’m going to deal with because by default, you see the email is here and,
when you see here that there is a small star, it means that it is a mandatory field.
Ok so, if ever for some reason you have to uh…
how? By deleting all the information that is here, you can add it quite easily, okay?
Then the URL.
So, this will typically be an element
indeed that will interest me.
So, I’m going to do it typically for,
for the form I want to create.
So…
So, uh…
your website…
So tac, your website, and what I’m going to do so, I’m going to go here, and I’m going to press “URL”.
So, again, you can make this field
mandatory or not.
By default you can also give a value. For example I will show you. For example, if we do tac…
so default value for the site, well the URL would be www.exemple.com. Hm…
and then you press “OK”, there you see, there is a preview of the code. And when you press “insert tag”,
so the tag is installed here. So if we save….
So there now, you see here actually so your website, and by default, there is an information that is here so with,
with uh…
the example I gave. Okay, so it can be useful sometimes, to help
some users who are not necessarily inspired to put keywords or that kind of thing.
So there you go! So, what I’m going to do is typically… I prefer when it’s clean…
so I’ll leave it at that.
Then, of course, you can also add
a phone (phone number), certain numbers, certain dates. For example, um…
for example your birthday.
Hop
So we’re going to do it like this, “/label”,
and we’re going to go right ahead here and put “date”.
So, we can put for example mandatory field… No, we’re not going to put it in anyway… No, ok default value, um…
hop…
And so you see here
eSo there are days, months and years. And so, if you want to click directly,
you can choose your date directly and it will be filled in, ok?
So pretty simple.
Hop
Then, indeed, there are other elements. For example, “text box”, then “drop down menu”. So,
A drop-down menu for example, is when you will have several possibilities. For example,
would you like?…
Would you like to
get more traffic to your site?
So same principle, we put the labels,
and then we come to the front,
and so we will click here on “drop-down menu”.
So again, you can put in a required field or not. And so then,
you can here then,
enter the different answers that are expected. So, for example, it could be “yes”.
“no”, well in a very simple way, or for example “a little”.
There, you effectively
to propose a multiple selection.
So, we can have “yes, a little”. So there you have it, in the context of my example, it doesn’t really lend itself to that, but it does,
you can add these elements there and you can also add a blank choice. Okay, so
hop, “register”…
So, “do you want to get more traffic to your website?”
So tac, yes/no/somewhat. And here typically you see, you can only select one answer.
Ok,
so effectively, so with drop-down menu, we can also have an option so “check box”,
which has more or less the same principle as the drop-down menu. The only thing is that you can also use exclusivity criteria.
For example if you check a box,
then some other boxes will not be checked by default. Things like that.
Then, we can have effectively then, the option “radio button”.
So,
for example we can do,
“do you know SEO?” tac,
and so here, we can actually put “radio button”. So for example,
“yes”, “no”, “a little”,
“a lot”. Tac
Hop
So here, for example here we have so, “do you know SEO?”
Yes/No/Somewhat/Lots, okay.
Ok.
Then indeed, there can be also confirmations. For example, if you need
to have for example, I don’t know, mentions
legal or that kind of thing, you know at the bottom of the forms sometimes, it’s things that are more or less pre-checked.
Well typically there you go, you can uh,
you can activate this kind of thing.
There is a quiz part that I never use. I think it’s not necessarily the best
way of making quizzes. There are tools that are much more powerful. But hey,
contact form seven offers it. Another element that can be interesting is the “files”.
At the file level, you can, for example, collect certain files. For example, then tac,
we will copy this,
for example I don’t know,
your CV for example or other information.
So if you put “files” here, if you make the field mandatory, you can limit the size…uh…if you
want, you can also put the types of accepted files, so for example pdf, and if you admit insert here and that we save…
hop, and so here I put “overview”…
So now you see your file…no file chosen, and then you can select
the documents you are interested in
Ok,
so this can also be useful in the context of a form.
And finally, there is the “send” button.
Uh…So here it is, with the wording that you want to indicate, uh…
so what exactly is,
finally, to the same thing as this one,
ok ?
So typically, what I’m going to do now is uh…
then tac,
I will check what it looks like
this form.
So your name, your email address,
your website, subject, your message.
So,
me what I will do, what I like to do,
is that I’m still going to change that element. And what I usually do is, yes, I would like to put stars.
So, the website I’m not going to make it mandatory,
but typically, uh…
Hop,
there when you see stars, it means that people must,
the people who will contact you via this form
must
absolutely fill in
this information. Ok ?
So, now that’s done. I’m going to record.
And just to show you what it looks like in practice, we’re going to fill it in together.
Hop
So for example if I press here, so “send”, well
obviously, there you see, all the uh… There are plenty of errors that are present,
simply because in fact,
these are mandatory fields.
So for example “website”,
I did not put it, made it mandatory because sometimes, there may be people who will contact you and who will not have a website.
But overall, this will prevent you from sorting out a minimum of content that you will receive.
So for example, if I put Alexandre Marotel tac, then my website https://www.twaino.com,
uh…so,
“improve my traffic”.,
then, “hi Alex,
can you help me to improve
my traffic
on my website?”,
“Thank you”, “Kiss”.
So, when we send hop, so you see we have the message so, “thank you, your message has been sent correctly”, and so there,
hop if I surrender
on, so “Twaino”,
“improve my traffic”…
Tac, so this is the image I received. And so typically, here it is, so I’m reviewing the message that I just wrote of course
and,
it is different, the way to arrange this information here.
In fact, it is nothing else
that the information you can
set up here, right? So
I don’t change it overall. You can do it, if you don’t like it, the way it’s presented.
Uh, but by default, it works fine. So now that it’s all done,
and that, therefore, we
has a form uh…
that suits me,
what I’m going to do is I’m going to integrate it now on my homepage, okay? So right now, I’m going to close this,
so I won’t be recording.
Okay. So this is a site that I’m building right now,
hum…
and so I’m going to have to do a little bit of filling in on some places.
But anyway, overall here it is. So I have to incorporate it here.
So, the way to do it, we’ll go to “edit page”…
The way I will proceed now to integrate the code, will be different from the way
as I did at the very beginning on the articles page.
Simply because in fact here, so my theme is called Avada, and so, I work in particular
with Fusion Builder. And so, typically good, the way to do
is a little bit different. But basically, the way to do it on Avada is quite simple. So here we press “+” on “Elements”,
then we press here “code block”. So we type “code block”,
and then we’ll just take this code here,
and paste it there, and save. So we’ll update,
and then we will preview.
Okay. So, let’s check it out.
Okay, so now you see the information here
are correct.
So email address, website, your message,…by the way, I’ll have to add a little star here.
Hop, that’s what I’ll do now.
Register…
And so, overall, it’s a form that suits me, it’s a contact form that’s perfect. So uh….
so if people who visit Twaino want to contact me, want to get in touch with me, well, then they’ll have either,
via the phone of course, or if they prefer directly via their email.
But sometimes indeed, we can have the will to use
directly a
contact form and therefore, this is exactly what you can do
contact form seven.
Donc, I hope that this video, it will have interested you, it will have pleased you.
Contact Form Seven, the element that I was able to show you is really the installation and the basic settings.
What you need to know is that it’s a plugin that’s also open to many other things. In particular, it allows, uh, we can for example,
paramétrer
contact form seven directly with mailchimp, which allows you to automatically collect the emails you receive.
So that could be an interesting element. I will have the opportunity to make a video on the subject if you are interested.
There is also the possibility of
with
contact form seven to create what we call redirections. So the idea is not to be technical, it’s just that
when a person, for example, will send you a form or will send you an e-mail,
It could be interesting to redirect this person to another page, for example a thank you page.
So, it might sound a little weird, why do this?
In fact, it’s interesting to do this, because from an SEO point of view, you will be able to track
the number of people
who have been redirected to this thank you page, and you will be able to follow
the number of people over time. And so, in terms of your conversions, you’ll be able to have a much clearer picture
from day to day, week to week, month to month, the number
of people who will contact you and, of the number of e-mails you have in addition.
That will be in future videos. In any case, uh… See you soon !
