Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed WordPress Basics!
You have completed WordPress Basics!
Preview
Build a contact page and create a functional contact form using a form plugin. You’ll learn how forms work and how submissions are handled.
Hosting Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In this lesson, we're going to build
the simple contact
0:01
page for our website
and add a working contact form.
0:03
Contact forms
allow visitors to send messages directly
0:07
through the website without needing
to open their email application.
0:10
We'll be using a beginner friendly
plugin called WP forms to create our form,
0:14
and then we'll add it to our contact page
using Elementor.
0:19
Let's start by installing our contact
0:24
form plugin.
0:26
Looks like Elementor has an update.
0:37
I'll update that real quick.
0:39
Okay.
0:44
From the WordPress
dashboard, select add plugin.
0:44
In the search bar, search for WPForms,
0:47
all one word.
0:51
WP forms is a drag and drop form builder
that makes it easy
0:53
to create professional forms
without writing code.
0:56
Click install now.
0:59
Then activate.
1:04
You can see
1:08
we get this landing page
and also a new item in our sidebar.
1:09
If we hover over that,
we see an Add new form option.
1:12
Let's select that.
1:16
Much like Elementor, it has its own
environment that we work in.
1:18
You can see there are a lot of templates
you can choose to start with,
1:27
but I'm just going to hover over this
simple contact form here and click
1:29
Use Template.
1:33
We can now see
1:38
a lot of form field options
we can select from on the left. Though
1:39
these lighter blue ones are reserved
for customers on their paid plan.
1:42
If we click on an existing field,
we'll see some options we can adjust
1:47
for each one, like if they're required,
what the labels say, etc.
1:50
I'm going to leave things as is,
but for this
1:56
message field
I'll add some placeholder text.
1:58
In the advanced tab
we have this placeholder text field,
2:02
and in it I'll just type type
your message here.
2:05
Cool.
2:09
Feel free to explore more and tinker
with these fields and options.
2:10
Next,
2:17
let's quickly
review how form submissions are handled.
2:18
Click settings, then click notifications.
2:21
This is where WP form sends
email notifications
2:24
when someone submits the form.
By default,
2:27
it sends notifications
to the site administrator email.
2:31
Since we're building this website locally,
email notifications may not send yet.
2:35
This is completely normal.
2:39
Once a website is hosted online, email
notifications typically work as expected.
2:41
I just wanted to show you how easy it is
to get one added to your sites here.
2:46
For example, here
you may notice a warning message
2:50
about the from field
not matching your website domain.
2:52
This is completely normal when working
in a local development environment.
2:56
Right now
3:00
our website is running on a local domain
that only exists on our computer.
3:01
Because this domain isn't
a real public website,
3:06
email providers
3:09
sometimes block or ignore messages
sent from it. In real live websites,
3:09
hosting providers usually handle
email delivery automatically.
3:14
Developers can also use plugins
like WP mail SMTP to connect
3:17
WordPress to trusted email services,
which improves reliability.
3:22
This warning does not mean
your form is broken, it just simply means
3:27
email delivery might not work perfectly
while developing locally.
3:30
So throughout here, you can click
these little tags in the corners of fields
3:34
to add dynamic
info from the form submission.
3:38
Like these others here,
but I'm happy with what's here already.
3:41
Let's click save and close this out.
3:45
Okay, now
let's add our form to the contact page.
3:52
From the WordPress dashboard,
go to pages and open the contact page.
3:55
Then click edit with Elementor.
4:00
All right.
4:05
First let's hide this page title again.
4:06
Page settings.
4:08
Hide title.
4:12
Cool.
4:15
Let's go back to the elements list
with the plus icon up here.
4:16
Let's add a new flexbox container.
4:21
Let's make it a vertical one again.
4:23
And in the Elementor panel, search for WP
4:25
forms.
4:28
There it is.
4:32
Let's drag it in.
4:33
And we get this convenient dropdown
to select our form we created.
4:37
This is awesome
4:41
if you've created multiple forms,
you can choose which one you want
4:41
specifically here.
4:44
And we've only got the one
4:46
so we'll select that.
And bam there it is.
4:47
In the styles tab we have a lot
we can do, but we only get two preset
4:51
themes with the free plan here.
4:54
But that's okay
I'll just go to the button styles.
4:56
Apply our accent color and
5:02
our text color
just like the buttons on the homepage.
5:04
Nice.
5:08
Okay, let's add a heading to the top.
5:10
This will be the pages h1.
5:16
And we'll say contact me.
5:20
Then we can adjust the font size.
5:27
I'll do 50.
5:30
Let's publish and preview
our contact page to test
5:32
the form.
5:35
Let's fill out these fields.
5:40
And submit.
5:50
Awesome.
5:53
We get a little notification there.
5:53
Okay.
5:57
One last fun thing I'd like to
show is the social icon list.
5:57
Let's search in our elements here
for social icons.
6:01
Let's drag it in right
underneath our title here.
6:05
As you can see, it gives us a few default
icons to get us started.
6:09
In our sidebar,
we can make changes to each.
6:12
So let's click this first Facebook one.
6:16
I'm going to provide a link
to Facebook's home page, but
6:19
this is where you could link
to your specific profile pages.
6:21
If we open the Link Options
gear wheel here, we can see that
6:25
it's already set to open these links
in a new browser tab, which is great.
6:29
So we can keep our portfolios tab open
for them to easily return to.
6:33
Here we can change the
6:38
official color to a custom color
for each individual icon.
6:39
There's a shortcut
6:43
to adjust them all at once though,
so I'll leave them as is for now.
6:44
Okay, next I'll click the Twitter one
and if we hover over the icon,
6:48
we can choose a new one
from a huge list of icons available to us.
6:53
I'll search for X and insert
6:58
that one instead.
7:00
And again I'll add the link.
7:04
I'm going to change this YouTube
7:08
one to a LinkedIn icon.
7:10
And then I'll add the link.
7:20
And lastly I'll add another item here.
7:26
I'll search for GitHub.
7:30
Insert that
7:34
and add the link.
7:37
Awesome.
7:41
We can also click and drag these
to arrange their order.
7:42
For example, I think having LinkedIn
7:46
first is a good idea,
so I'll drag it to the top.
7:48
Nice.
7:51
Okay, further down
we can adjust the icons shape.
7:53
We could do hard edge squares,
rounded corners or perfect circles.
7:56
I like to round it option personally.
8:02
Here you could stock
them in columns if you want.
8:05
And you can adjust their alignment here.
8:15
I like the default settings here too.
8:17
Let's go to the style tab.
8:19
Here's where we can adjust the colors
of all the icons in one place.
8:21
So let's change this official option
to custom.
8:25
For the primary color,
I'll select our global primary color,
8:30
and this secondary option
will change the logos fill color.
8:34
But I'm going to undo that
with Command or Control Z.
8:38
Here we could change the size of them.
8:42
I think 20 looks good.
8:46
The padding will adjust the inside space
around the logo.
8:50
I'm going to undo that as well.
8:53
We can adjust the spacing in between them
here.
8:56
And I think 15 pixels looks good.
8:58
And if you had these set
9:01
into multiple columns with rows
you'd adjust the row spacing here.
9:02
Down here
you can give these icons a border.
9:07
And you
9:11
can customize the border radius
if desired.
9:12
I'll leave mine as is.
9:15
Okay.
9:17
Let's open this hover option
like the buttons
9:17
before we can change the colors
and give an animation effect.
9:21
I'll change the primary to our secondary
9:25
and select the grow animation.
9:28
Nice.
9:31
Let's check it in.
9:34
Tablet.
9:35
I think that looks okay. And in mobile.
9:37
That's not bad.
9:40
I'll drop the icon sizes down to 15
though.
9:41
Cool.
9:48
Nice work here, everyone.
9:49
And that brings us to the end of this
course.
9:52
You've successfully built
a complete WordPress website from scratch,
9:55
including installing WordPress
locally, learning how the dashboard
9:59
and Elementor Page Builder works,
customizing your sites design,
10:03
building a home page,
and creating a contact form.
10:07
Remember, the site we created in this
course is running in a local development
10:11
environment, which means it only exists
on your computer.
10:15
However, if you decide
you'd like to publish your site online,
10:18
it can absolutely be migrated
to a live hosting provider
10:22
and connect it to a real domain
when you're ready.
10:25
From here,
I encourage you to continue experimenting
10:28
and making this site your own.
10:31
Try creating a personal portfolio,
building a small business site,
10:33
or exploring additional elements
or widgets
10:37
and WordPress plugins to expand your sites
functionality.
10:39
The best way to get comfortable
with WordPress is to keep building,
10:43
testing new ideas
and exploring the tools available to you.
10:46
Great work completing the course!
I'm excited to see what you build next.
10:50
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up