Illumina show you how to rebuild
the contact page using Elementor Pro.
And specifically we're gonna be working with
the elemental pro form element.
I'm gonna go to the backend.
And first of all,
I'm going to disable
the WP forms plug-in we no longer needed.
So I'm going to deactivate.
And let's go back to the contact page.
And obviously when they're gonna
say any contact form anymore.
But I'm gonna go to Edit with Elementor right now.
Since of course we're using elements are pro,
we do have the form element,
which is absolutely fantastic.
You will find it on the pro,
you see right here form.
I'm going to let me click inside here and
actually remove this block
because we didn't have the lipid forms anymore.
But don't take any form and then just drop
it on the Contact Us title.
Just like with the WP forms plugin by default,
you will have a very,
very simple contact form
that it will have three fields of name,
e-mail, message, right here.
These are the fields you can add.
Another field like you click on
Add Item right here where you have type,
you will have different kinds of fuels.
You can add day time.
It can even add file uploads.
So if you want your potential subscribers
or customers to attach files to send to you,
you do have that field.
You can also integrate elemental with Google capture.
And then you can use the recapture version
one and version three in here for security.
And then you also have like the honeypot and so on,
not adding any additional fields.
So I'll just leave these three.
However, this is of course very subjective,
but I prefer not to have the labels.
I prefer just happened to place holders instead of
each field indicating what kind of field that is.
So I'm gonna go ahead and hide the label.
So just have name email message.
Now to edit the actual fuels themselves,
you click inside each one specific sample name.
I'm going to click on Name and
invite here I can change the label itself,
can change the placeholder.
And of course we're gonna make it required.
And then under advanced,
you will have things like the ID as well as
the short code which we will make use of very, very soon.
Same goes with e-mail in here.
It's required and then message of course
all make the message if required as well.
You can make this field is smaller or larger
depending on your tastes, and that's it.
Okay? In here you've got the input size
for the actual impute for each field.
You can make it small, medium, large.
It's entirely up to you.
You've got buttons.
Do you want to make the buttons medium-sized,
large size, but that's just the send button itself.
You can change the text right here for
the submit button itself, and so on.
Now, this is where things get very, very spicy.
Actions after submit, what happens
once the user has clicked on Send?
Right here?
By default to actions have already been enabled.
Collect submissions,
which I'll show you in just a second.
And then email, because these two are active by default,
you have clicked submissions
right here and then you have e-mail.
Now collects submissions you would
actually see in the backend.
Let me just quickly show you.
You will see in the backend,
once people begin to submit
the contact form right here where you
have elemental at UCI submissions
in here you could have submissions.
And this is where you begin to
see the person's name and so on,
in fact, will perform
an experiment very, very, very soon.
But that's it for the submissions.
Now, email right here.
You want to receive an e-mail that somebody
has submitted a contact form on your website.
Right here, you can choose
the email address to receive identification.
Of course, I'm gonna put my own admin email light there.
And then of course by default you have to subject
new message from and then your website's name.
You can customize this of course.
Then the message will contain all fields.
However, here you have the from email,
from name you want to use or choose
the data provided by the user.
Basically the from email should be the e-mail,
all of the user.
What you want to do here is this, okay?
You would go to the form fields,
go to e-mail, go to Advanced,
and then invite here,
grab the short code.
So copy the short code,
come back down here to email.
And anybody here from email.
It was not simply paste
the e-mail ID so
that you can actually see the person's email
and then from name as well,
do the exact same thing, go to the Name field Advanced,
and then simply grab the shortcut for the name field.
Go back to e-mail and then provide here from name.
Simply paste that.
And then they reply to be set to the e-mail,
of course, because you'd like to respond to
the person's e-mail address.
And that's it.
You can add your CC, you're blind,
you're blind, copy, and so on.
You can add the metadata in here as well,
such as like the page you're a real person visited,
the date, time, and so on.
Sin as HTML or plane.
This is very, very, very subjective.
It'll depend on your email service provider.
If also got steps sentence
lambda squiggly, show you what this is.
If you go back to your form fields,
maybe you want to create
like maybe you'll form is actually very,
very long for some reason and you want to break it down.
When you're adding your item on the type,
you will have step.
Once you have step now you have next.
So after the step you can then begin
to add more fields again.
So what happens is once they fill out
the false fuels in the first section and click on Next.
It will take them to the next section for the form,
that's basically what the steps,
as you can see, this is step one right here.
And then you can see step two there on the right.
That's what that is used for.
That's your steps are Settings.
And then you've also got the additional options like Hey,
do you want to customize messages like, okay,
the thermo sense successfully,
you will get back to you in 24 hours, things like that.
You have that option in here.
But they'll let me forget going back to
the actions after submit, you have many,
Apart from clicked submissions, e-mail,
you can have e-mail to you
can you can redirect them to
a separate page. You have a webhook.
And of course, if you're using
email management software like our Mailchimp,
active campaign, you can connect them in here as well.
You can connect them to Slack Discord,
open provide a pop-up message as well.
So you've got plenty of options to configure.
Alternate turn. What happens once the user
has submitted the form?
That is basically it.
Let us go ahead and close that one.
And that's, I'm gonna go ahead now and simply updates.
And of course, let's take a look at
the new page right here.
Oops, my internet is misbehaving.
Yet again.
My apologies. Okay.
That's right Now you can see
the new Contact Form
built with elements of Pro Arte lemon.
I'll show you an example of the submissions.
I'm gonna pause the video and simply
submit a message and then
you will see the results in here.
Welcome back.
And as you can see right now,
I've actually sent to contact forms,
filled out to contact from one to seven browsers.
One from John James and then one
from Bob Billy at yahoo.com.
Now, I should have pointed this out previously.
For the contact form,
you can change the name
right here where you have the form name.
So you can see I've just gonna have to
change mine to contact form.
And I noticed this when I send
the first form from John gyms.
You can see righted the form, Nemo's new form.
That's why new form because we didn't change the name.
So the second time I changed the name to contact form,
submitted a new form from mobility and
that's where it can now say that the fall now
says our contact form.
So that's basically it.
You've got the IDs, you've got
the page that the formal submitted in.
And of course you can view the actual message itself.
So you click on view right here.
You can see the full name, the email,
and then the actual message from the user and invited.
You've got the additional metadata information
when the message was sent,
what browser was used, and so on.
That's basically how the contact form
with Elementor Pro Walks. Thank you for watching.
I will see you in the next class.