Send emails from a HTML Contact Form

 

0:00

hello internet and welcome to another

0:03

one of my tutorial

0:04

this time all about making a contact

0:06

form that actually sends

0:08

the email so if you're anything like me

0:10

and love to watch web dev tutorials

0:12

you might notice there's so much out

0:14

there on the internet about contact

0:15

forms

0:16

how to create them so how to make them

0:18

in html and css

0:20

but there's not that much out there

0:21

about how to actually you know like

0:23

link up the logic for it to do something

0:25

so i am

0:26

here to show you how to do that in a

0:29

super

0:30

simple way i'm gonna be doing this with

0:32

html

0:33

and just html okay so i'm gonna be

0:35

making the contact form in html i'm

0:37

gonna be then choosing

0:39

what kind of inputs i wanna have so

0:41

perhaps i wanna

0:42

have like a first name input and then an

0:44

email input so the person can put in

0:46

their emails so i

0:47

know to email them back and then just

0:50

like a little text form or something

0:52

and then a submit button now the submit

0:55

button will essentially send whatever we

0:57

put in

0:58

to your email address so we'll be

1:00

testing that out too

1:01

and then send you to a thank you page

1:04

this tutorial is a great way to

1:07

essentially

1:08

hide your email address to the i guess

1:11

average user's eyes we're going to be

1:12

taking away the email address that you

1:14

sometimes put

1:15

on your static web page and hiding it

1:18

behind a form

1:19

okay so if you inspect the page it's

1:20

going to be there okay

1:22

so hopefully that makes sense if not

1:24

don't worry because i'm going to be

1:26

showing you how to do this step by step

1:29

contact form let's go please do like and

1:33

subscribe to my

1:34

channel it would really mean a lot as

1:36

that is how i can keep creating

1:39

more content for you guys so thanks very

1:42

much and

1:43

let's do it

1:46

okay so to start off i just have

1:49

a simple html file

1:53

in my project that i have called contact

1:55

form

1:56

it's just got some basic boilerplate

1:59

html for us

2:01

this is what we're going to start with

2:03

let's go

2:05

now the first thing that i want to do is

2:07

actually refer to the documentation that

2:09

i'm going to be using

2:11

for this i'm going to be using form

2:13

submit

2:15

i'm using form submit for no other

2:17

reason that it's the only one that i

2:18

really know that allows me to

2:21

edit the thank you forwarding page

2:24

relatively

2:24

easily they are free to use so

2:28

if you do use them please go ahead and

2:29

sponsor them support them i really do

2:32

appreciate anyone

2:33

who opens up their work to us like this

2:37

form submit essentially allows us to

2:39

connect our form

2:41

to their form endpoint and they will

2:43

email out the submissions

2:45

for us so this is going to be super easy

2:47

like i said

2:48

we are just going to be using html

2:51

there are some other options available

2:53

but what's the point i mean

2:55

html is the easiest let's go ahead and

2:58

do that

2:59

so to start off i'm simply going to copy

3:01

this here

3:04

and put it in our project

3:08

so this will essentially create a form

3:10

for us with an

3:11

action that uses the form submit

3:13

endpoint

3:14

and i'm just going to put my email

3:16

address in here

3:18

so i'm just gonna put in my generic

3:20

email address

3:22

that i use so people can contact me and

3:25

don't forget to keep the method as

3:27

post okay so if i now save this file

3:30

and view this in the browser so i'm just

3:33

going to get

3:34

our browser up that's what you will see

3:38

that is just a basic form that we can

3:41

have

3:42

all i've done is left an input for our

3:46

name that is required and an input for

3:48

the email that is required

3:50

and then a button to send

3:53

so before we carry on doing this i'm

3:56

just going to show you how you can

3:58

personalize this a little bit further

4:00

so we can have a thank you page so that

4:03

if we submit

4:04

it can take us to our own personal thank

4:06

you page that we have met

4:08

the default is just taking you to form

4:10

submits thank you page

4:12

so if we have a look at the docs here we

4:15

are using the

4:16

action attribute to essentially

4:20

enable submissions to be sent to our

4:22

email address

4:24

and next we also have an explanation as

4:26

to what the

4:27

input tag is and what we have put in our

4:30

code

4:32

so the other things that we can

4:33

personalize are for example if we want

4:36

to include a reply to so

4:40

if we want to make this required so for

4:43

example i can put this

4:44

in here and what i will be doing with

4:47

this

4:48

is actually asking the user

4:51

to put in their email address so i can

4:52

email them back

4:54

so now let's refresh our contact form

4:57

and there we go so now i am required

5:01

to put in my email address in order to

5:03

send my form

5:05

if i try send it without it i will get

5:08

a little message show up that is because

5:11

we put

5:12

required i'm just going to make this

5:14

smaller for now

5:16

so that is one thing that i've decided

5:17

that i want to have another thing that

5:19

we have is for example the thank you

5:22

page

5:22

so i think it's quite nice to have a

5:24

personalized thank you page

5:26

so i'm going to put that in here too it

5:28

really is that simple

5:30

and then i would just simply put my

5:32

domain name

5:33

and the file of choice so

5:36

i know that i'm going to be deploying

5:38

this onto

5:40

anya

5:45

kugo.com and

5:47

let's make this a thank you page like so

5:50

so now i'm going to actually have to

5:52

make that thank you page so let's go in

5:54

here

5:54

and i'm just going to create a thank you

5:58

html file let's put in some boilerplate

6:01

so i'm just simply going to copy that

6:03

paste this here

6:05

get rid of the form and let's call this

6:10

thank you page

6:13

and then in here i'm just going to have

6:15

an h1 tag

6:17

that says thank you this is just going

6:19

to be super basic because i'm sure you'd

6:21

like to do the styling yourself

6:24

i could also put this in a pages folder

6:26

just to make things a bit

6:27

neater and more realistic so now the

6:30

thank you html

6:31

file is in the pages folder and if i go

6:34

here well i just have to put pages

6:38

like so i'm just going to make this

6:40

smaller so you can see

6:42

we can also choose to have a subject

6:47

so i can choose for a subject to be

6:51

essentially hard coded for us when we

6:54

receive the email

6:55

so i can even put new

7:00

email

7:04

like so and of course a bunch of other

7:07

things autoresponse

7:08

template and so on

7:12

we can even choose to upload files but

7:14

i'll leave you to do that

7:15

by yourself okay so let's look back here

7:20

i can get rid of this as this is a

7:23

duplicate of

7:24

this one right here so i'm just going to

7:25

get rid of that and the

7:27

text input once again i'm just going to

7:30

put a place

7:32

i'm just going to put a placeholder here

7:34

so we can see

7:35

in the browser what this is for write

7:39

your message here and then

7:43

we can have other stuff for example a

7:46

first name

7:47

and so on we can make this bigger but as

7:49

this is

7:50

just a quick uh tutorial i think this

7:53

should be

7:54

fine okay so

7:57

now let's actually deploy this onto the

8:00

internet

8:00

in order to hook it up and so our form

8:03

works

8:04

and so that we get redirected to the

8:06

thank you page

8:07

on my domain so i'm just going to use

8:11

hostinger to do this just purely because

8:13

i already have a site that i own

8:15

on here and i want to essentially host

8:19

it on anyakubr.com so i

8:21

previously bought this so i'm just going

8:23

to manage my site

8:25

and put the files that we have just

8:27

written on it

8:28

so this will take a short second

8:33

i'm simply going to upload my file

8:36

select the file

8:41

and in my contact form project

8:44

i'm just going to upload the files so

8:47

i'm uploading the

8:48

index html page i'm just going to do

8:50

this one by one for you

8:52

that we made and then i'm also going to

8:55

create a directory called pages

8:57

so i'm literally just copying the

9:00

structure that we had in our project

9:02

and once again i'm just going to upload

9:05

the

9:06

thank you page and upload like so

9:11

great so now if we visit anyakubr.com

9:17

you will see our project now lives on

9:19

this

9:20

domain and if i write an email

9:24

so for example

9:28

let's put

9:32

joeblogs.

9:35

at gmail.com wants to message me and he

9:38

wants to email me something he wants to

9:40

say

9:41

hi i like

9:45

your videos for example

9:48

so all we are doing if i inspect the

9:50

page is we are getting rid of

9:52

my email to be visible from the user's

9:55

eye

9:56

but we can actually still inspect it

10:00

we're simply just putting it here

10:02

instead okay

10:04

so you know if you're a dev or you're

10:06

someone who knows what you're looking

10:07

for and i want to look then of course

10:09

people can see your email but you know

10:12

it's nice not to have it

10:13

on your page okay so let's click send

10:19

i need to activate this first before

10:22

using it so let's go ahead and do that

10:26

okay let's try again and send

10:30

we can actually get rid of this

10:32

recapture from form submit completely so

10:34

that it's just our own branding the

10:36

whole way through

10:37

i'll show you how to do this even though

10:38

it's not recommended so

10:40

stick with me got a filter

10:44

and we are directed to the thank you

10:46

page

10:47

that we made see

10:50

the correct path and everything

10:54

and then of course let's check our email

10:56

you will see there is an

10:57

email with the title new email woo

11:00

and if you look into the email you will

11:02

see that someone submitted an email

11:04

on the website the email will do blogs

11:07

and the message was hi

11:08

i like your videos amazing

11:12

if you want to get rid of any external

11:14

branding you can disable the recaptcha

11:18

however is not really recommended

11:21

because

11:21

it does help to avoid some technical

11:23

limitations

11:25

which form submit impose from time to

11:27

time in order to filter out bots

11:29

spam and other malicious programs but

11:32

you know if we really wanted to i'm just

11:33

going to show you what that will look

11:34

like

11:35

i'm going to take that line here and

11:37

then i'm going to go back

11:39

into my project that i am hosting

11:44

online i'm going to go into my domains

11:48

get annie okubo and then just find my

11:52

index.html file and actually edit it

11:54

from here so i'm just gonna post it like

11:57

so and click save

12:00

okay so now if we go to my website

12:05

and i'm just gonna put joe blogs

12:10

second email click

12:13

send and you will see it goes straight

12:16

to the thank you page

12:18

so hopefully you found this useful it's

12:21

just a quick tutorial that i wanted to

12:23

show you

12:24

i like form submit however there are a

12:26

few others

12:27

out there so if you have another one

12:29

please do comment

12:30

in the description below i'd love to

12:33

check it out too

12:35

thanks so much again for watching and

12:37

i'll see you soon