Hey everyone welcome to my youtube
channel today i'm teaching you guys how
we can add a contact form to a website
using contact form 7 plugin
before we proceed to the tutorial please
subscribe to my channel
like and comment okay let's proceed with
the tutorial now
so that's the website where i'll be
adding a contact form
using our plugin called contact form 7
and that is our contact page
here's the space where we will be adding
our contact form
so whoever will fill-up the form it
will throw up an email notification
also we will add a recaptcha using
google recaptcha service
to avoid any spams normally people
receive through contact forms
okay so first step is to install the
plugin
let's go to the dashboard
go to plugins and click on add new
search for contact form 7
hit install now
click to activate the plugin
once the plugin is activated we will go
to
our contact form section here
click on contact forms
as you can see we already have a sample
contact form
showing up here so when you install the
plugin you will already see
the same as i am seeing it here we'll
simply copy the shortcode
and place it here we are elementor and
we'll see our contact form
so let's try doing that
now we will simply add a text editor
copy the shortcode from here
paste the shortcode on the text editor
and hit update
now let's see what we see on our front
end
hit refresh
i think it wasn't updated properly we're
gonna go back to see what's
what's the issue okay maybe it wasn't
updated
let's click on the update button again
hit refresh on the front-end side
here we go our contact farm
is showing up now
now let me introduce the back end
of the contact form 7 plugin so you can
be aware if you need to create your own
contact form
these are the fields which are available
in contact form 7.
now let's start creating a contact form
from the scratch so you'll see how it
works
so i'm gonna create
my first field as first name
i'm gonna take text field
name it first name
i want it as a required field
and click on insert deck
here we have our first figure created
oops sorry
now let's save and see how it looks on
the back end
so i'm gonna hit refresh
here we go here's how it look
now i'm gonna add some more fields
let's add last name
required field
insert tag
so
another field called phone
for that we will require a number field
that's the required field
required field meaning that if someone
doesn't fill up this field
it won't be able to submit the contact
form
and now finally let's add the
description field
for this we can take text area
i'm not doing it as required field
because maybe someone doesn't want to
fill up the description detail so we can
just
leave it as optional
and insert tag
here we go
we have some other field options
available as well so we can add drop
down menu so
for example if you are selling classes
or if you have
schedule for the classes which you want
to send to your clients
you can add it on the drop down menu we
have check boxes
radio buttons and some other fields
for now we will just go with the basic
now click save
hit refresh here to see how it looks now
okay we have our contact from showing up
now
it's a little weird we'll need to add
some css to make it look
much cleaner for now we will just
do it step by step now start
adding recaptcha styling part we'll do
at the end
now i'm going to add the recaptcha to
the contact form
we'll go to the integration
click on recapture setting and track
setup integration
here we see it requires side key and
secret key
generate side key and secret key will go
to google.com
recaptcha link is already given here
so just open it up
i'm gonna click on admin console
assuming you are already logged in with
your google account
so i'm already logged in with my google
account in the console section we'll
need to fill in all the details
to generate our site key and secret key
so i'm just going to add my website name
here
click on recaptcha we three
same add a domain name here
accept that to recapture terms of
service send alerts to owner hit submit
here we go here we have our site key and
secret key
so we just gonna copy side key
paste it here similarly
with the secret key
hit save changes
okay recaptcha is active on this side
now let's see if it's showing up here
hit refresh
and here we go our recaptcha is showing
up
so we will not be receiving any spam
from our contact form
now let's style it a little bit to make
it look good
so i'm gonna remove the labels from here
and add the placeholders instead to make
it look good
so let's edit our contact form again
let's remove the label
from all of the fields
and add in the placeholders so
placeholder
first name
let's see what the first name of is
showing up fine
hit save
go to the front end
okay we have our placeholder showing up
here
oops let's
do it for all of the fields now
hit save
now let's see how it looks
okay that's how it looks after
refreshing
i guess there is a mistake so
let's see where we missed anything
okay so we misspelled it here
let's fix that issue
hit save again
now let's see how it looks
okay we have a placeholder showing up
but it's a little dull and hard to see
so we gonna fix it by css
now let's try adding some css and make
our placeholder color white
okay let's add in some css to make our
placeholder look more visible
now we're going to go to customize
and then customize we will look for a
section where we can add our custom css
so i'm using a free theme
in most of the free themes you will find
the custom css
custom css option in additional css
and here i'm gonna add the css which we
need
we need white color
for our placeholder
i'm going to copy this code uh in the
video description so you get
you guys can easily copy it now hit
publish
hit refresh to see how it looks now
okay we have our placeholder
looking up and uh
now we're gonna make our button full
width apparently it doesn't look good
so let's try doing that
now i'm gonna make it
width 100
mm okay
now let's copy this and apply the css
go to the custom css section again
and make it with hundred percent
you guys might have different type of
layout and different type of colors
but this tutorial will teach you the
basic
elements of css
and parallel to using with contact form
so you guys can make it
as per your website layout now let's see
how the button looks
okay now we have a button for it but
obviously the fields are
not the same width so we will also make
those fields
with hundred percent now let's do that
again
click on inspect and here we will
add a width hundred percent property
there we go and
we will also add some top margin
so they are not stick to each other
too closely okay should be
five pixel i guess much better
okay so let's copy
the whole thing paste it here
start the curly braces
add in the css with hundred person and
margin top
and hit publish to see how it looks now
okay now our contact form is looking
good
right feel pretty aligned
with our team and
now let's fill it
uh up on one moment so let's
update the email now to see if the email
submissions are working
as we created our custom fields we will
need to copy these shortcodes
and paste in the message body section
first name
last name
and phone number
description
now i'm gonna add my email here
hit save changes
we are still seeing the one
configuration error here
in addition to this because we don't
have your email field available
so we're gonna just remove this for now
as we don't need any additional headers
hit save changes
and there we go now we don't have any
configuration errors in the contact form
7 plugin
now we will send a test submission
let me first hit refresh and then send a
test submission to see
if it's work if it works fine first name
as
oh it's my last name
just we're gonna put the dummy phone
number for now testing
testing description for now
hit send
and our message has been sent now let's
go to the email
and see if it works now
okay here we have our email received
testing description phone number first
name last name
we can change the subject line from here
that's the subject line which we
received
we can change it to whatever we need
okay we are done with the tutorial in
this tutorial tutorial we learned how to
create a contact form how to add a
recaptcha how to style a contact form
and adding in the email settings
receiving our email in our inbox through
the contact form
i hope you guys like this tutorial
please don't forget to subscribe the
channel
hit like and comment thanks have a great
day
