I just sort of built out the blog page and now
let us build out another very important page,
and that's going to be the Contact page.
Now ideally, of course, on your contact page you want to
have some sort of contact form,
maybe even some Google map.
If you have a physical location.
Or we don't have a physical location,
but we're going to add a contact form.
Now, there are several plugins
out there for creating contact forms.
And in fact, if you're using
the paid version of elemental,
you will have the form element.
But we're using the, the free version of elemental.
So we're going to install another plugin.
And this plugin is called the WP Forms plugins.
So let me type in WP forms.
And it's the one right here.
Alright, so let's go ahead install.
And we're going to now activate the plugin.
All right, so we're just gonna go ahead and click
on create your first form right here.
The good thing about this particular plugin is that it's
integrates very well with elemental.
I'm going to type in a name right here.
So that's going to be the contact form.
That will be the name of this form.
Contact Form are in here.
You do have our different templates,
are gonna choose the simple contact form factor.
We can view the demo in here.
You can see this is the demo right here.
Very, very simple.
You will have the name, email and then message fields.
So that should suit our purposes on,
I'm gonna go ahead and simply click on Use template.
That's itself, but just gonna make
a few changes the
way the plug-in works as they're right here,
you've got the fields available
for you with the free version,
there is a paid version where you have access to
these fancy fields and
the payment fields and so on, but we don't need them.
So the ginger I'm gonna make here would be
to edit the name field.
So I'm simply going to click inside.
And right here you do have the format.
I prefer the simple format where you just
have one single line for the name.
But you have forced middle,
last, and first, last, and so on.
On the Advanced, you can change
the field size to launch two small,
depending on your taste and what you prefer.
You can add your CSS glasses in here.
You've also got smart logic,
which, oops, I'm sorry about that.
I forgot.
This is only available with the paid version anyway,
for the field options.
That's it. So you can go back in here and add
additional fields like a drop-down checkboxes.
If you wanted to.
Under setup in here,
I'm sorry, under settings,
whether right here, this is where you can
change things like the actual form name itself.
You can change the text for
the button and influence applications.
This is where you can
setup the kinds of notifications you want to
receive whenever anybody sends
the fills out the contact form.
We want to be notified in here by default,
the admin email associated
with your WordPress website will be in here,
but you can add your own custom e-mail elements.
Show you something, okay, right here,
where you have from name.
By default, it will be set to your website's name,
but will make a lot more sense to set these to
the actual name of the person sending the message.
So right here I click on Show smart tags.
Simply choose the name field,
or your FirstName, LastName,
depending on the kind of feel that you have for the name.
And then same for from e-mail as well.
We'll simply choose the email field.
And I'm gonna go ahead and simply save.
You do have the conformations in here as well like okay,
what happens once they filled out the contact form?
Do they get a message? If so,
this is where you can edit the message.
You can show them at particular page and it'll
be a special beauty of created all.
You can simply redirect them to
an external URL if you wanted to go.
We're not gonna do any of that.
Let's go ahead now simply TO
save one more time, close this.
Now we're gonna go over to the contact page.
Let's go ahead and edit the page
first of all from the WordPress backend.
Then from here I'm going to click
on edit with Elementor so we can now
use the Elementor interface and check this out.
All right, oops, I forgot to do one thin.
My apologies.
We need to enable
the WP forms are add-on for the essential items plugins.
So let's quickly do this.
I'm gonna go to essential atoms in here.
Let's go to elements.
And then down here you have the form styling elements.
You will see WP Forms.
Let's go ahead and now activate that.
You can see you have access to
other kinds of forms like fluent forms,
Gravity Forms, which is actually very,
very good Ninja Forms and so on.
Anyways, let's go ahead and save our settings.
And I'm going to close this.
Let's refresh this page one more time.
Okay, so the thing about WE forms
is that even with the free version of elemental,
you will have access to the element.
Once you've installed and activated the plugin,
you can see it right here on the basic,
you have WP forms by Elemental.
I'm going to click drag inside in here.
And I'll show you the difference between this
one and the one provided by essential add-ons.
Let's go back, scroll all the way down here.
Let's add the one for
essential add-ons into a different section.
Now you're going to see the main difference, okay?
This is the one for the essential atoms.
I'm going to choose the contact for
mortality rate. It says select form.
Let's choose that. Now right here.
Compare this one with the one up here.
Let's go with the one for elements of first.
Let's choose the contact form as well.
The thing is, you only
have access to the kind of form to choose.
The display options are good.
You want to shoot the form name,
description and then advanced.
There's nothing more to it.
However, for the one with essential add-ons,
you have access to a lot more.
You can show the description labels, please hold her.
You even have our error messages.
You want to show error messages
or do you want to hide them?
So for example, if somebody
didn't fill out the name field and then the
press Submit you wanted to
display the error message or not.
You have access to plenty of styling options.
You can add a form background color.
You can align the form at your width margins.
You have all sorts of styling options for
the title and description labels and so on.
All this time options,
you don't get them with the one
with the element provided by
the free version of elemental.
That's why I prefer to
use the one provided by essential atoms.
So I'm gonna go ahead and close this one by Elemental.
Let us walk on this one.
Very, very simple.
We're not gonna make any huge changes in here except
we will simply hide the title of the phonebook.
Everybody knows it's a contact form,
so there is no need to change anything in here.
One thing we will do though,
is to hide the page title.
And then we'll add our own heading.
All right, and we'll simply choose this one's
on it as an H1 go to
style typography, which is primary.
And we'll simply coldest Swan our Contact Us.
That's it.
We'll add some padding to the section link values.
We're gonna go with 50 on top and then 50 below.
Actually come to think of it.
The Contact Us is actually very, very large book.
It's okay, let's just align this one to the middle.
And we'll just add some pattern for
the actual form itself.
I'm going to click on the form element.
Let's go to Advanced.
And we'll also add some padding as well.
Just give it some distance between
the actual title and the form itself.
So go ahead and update.
That's what I'm going to go ahead now and view the page.
And that's it for the Contact Us page.
Now again, you can make this a bit more exciting.
You can go with maybe two columns
as opposed to on section.
The first column you can add a,
an image of somebody who maybe calling or
somebody send in an e-mail, stuff like that.
So there are different ways to modify
the Contact Us page and make it more
exciting if you wanted to.
But this is very, very simple,
very straightforward, and it suits our purposes.
So thank you for watching and
I will see you in the next class.