Hey, everyone, in this video, we are going to put this contact form to work, and for this we won't
be writing any JavaScript, actually, we are not going to be doing any coding.
We just need to adjust our e-mail a little bit and this is going to work.
But the reason why I have included this in this project is because this is something very common and
very useful.
If you have your own website or you're doing websites for other people, it's very likely that you have
to do something like this.
So I just wanted to show you a simple way of doing it.
If you want to build a contact form from scratch and do your own code.
This is going to be a bit more complicated.
You won't be able to do it in JavaScript in the front, and you will need a back and language like page
B or C sharp.
If you want to do it in JavaScript, you will need something like no jass.
So this is a bit more complicated, but I thought it would be interesting to show you an easy way.
So for this, we are going to use a service called Post Mail so you can go to post Mayodan in votes
dot com.
This service is going to do all the backend work for us, so we won't have to worry about anything.
Just one thing that I need to tell you before we get started, as this is a free service.
Don't expect this to be very safe.
Don't expect this to be very reliable.
Sometimes this is just not working.
So if you are doing this for a website that we have many contact requests per day, maybe this is not
the best option.
But if you have a website with just a few people contacting you like two or three times a week, then
I think this service is going to work really well for you.
So to get started, we just need to inform our e-mail and we will get an access token.
So let's do this.
So I just put my email and if I go to my email.
I've just received an access token pretty good.
Let me copy this.
And now going back to the page, like I said, we won't have to write any JavaScript, we just need
to go to the actual HTML form.
So going to Visual Studio, let's go to the HTML file and let's find this form.
So here it is, here's the contact form, I'm just going to zoom this out a little bit so we can see
it better.
I think this is good now I'm just going to leave this.
Access token here.
So let's go back there to see how we can set this up.
So I'm just going back to the start page again, and as you can see, all we need to do is just copying
their form.
So they have a few hidden feuds, I'm going to talk about them in a minute, let's just copy this and
take it to our code.
So this is the form I'm just going to leave this here, so shift out a to comment all this and I'm just
going to use their form instead.
So if you're doing this in your own project, just be a bit careful, because, as you can see, I'm
already using the same ideas as them.
So my success is not going to be affected.
The form is still going to render very well on the page.
So just be a bit careful with this.
And now a just base to this and this forum is a bit different from the one we had, as you can see,
we had full name, email and message, and this one has only message and subject.
But we are going to adjust this in a minute.
So the first thing we need to do is using the actual access token.
So here it is.
So here we have a hidden feud.
With the name of axis token, we just need to change its value to the axis, so can we received pretty
good and that's it.
If we wanted to use these fields, that's all we need to do.
So I'm just going to save this.
And now going back to our page, I'm going to refresh this so as you can see, the success is OK because
I'm using the same I.D. I had before.
So let's test this out.
I'm just going to send a test email for myself since I used my email address to get this access token.
This is where they are going to send this message to.
So just going to write testing in votes.
I'm going to hit send.
And now I just got an error message here, something just went wrong with the service and like I said,
there are a few downsides of using a free service.
But what I've realized is that sometimes they just do not update that code on the front page.
So let me just go back here.
If you see that error, what you can do instead of getting this form here, you can go to your email,
go to the email where you received the access token and go to this link at the bottom.
So here you can make a few changes to your account, so here you have the code.
For the contact form already with the axis token, so let's just get this, and this is actually a bit
better.
Because this is going to come with a few commented.
Fuds here, where you can change a few things like their reply to email or other things, so we can
just copy this, as you can see.
There's also a JavaScript, but this is optional.
We don't have to use it for now.
I'm just going to copy this and I'm going to use this form instead.
If you use the one from the front page and it worked, that's fine.
If not, if you got the same error as I did, you can just go here and try this other one.
So I just copy this.
Let me go back there and now let's replace the form.
Now, I have another one that's a bit bigger, let's just organize the indentation here a little bit.
All right, this is batter.
So now, again, subject message, let's try again, I'm just going to save this.
Now, refreshing the page, let's try again so the subject is going to be test, just going to ride
testing.
Post e-mail.
I'm just going to click send.
And now this is working.
If I go to my email now, you can see that I've successfully received the message sent from the website,
but now we need to adjust a few things because we don't want to go to their front page after we send
the message.
So let's go back here, going to the code.
Let's also remove this.
So going back to our code.
So here's the form, so here's the powered by message.
If you want to keep it, you can keep it, it's as you can see here, this is not required, but if
you want to help them out, you can just leave it there.
So here's where the user is going to be redirected in case of success, so if the message is successfully
send.
You can just go back to your front page, to the front page of your website, and if there's an error,
you can also show a.
Specific error message, so the user knows that the message wasn't sent in our case, we won't be able
to use this because this must use a website that's published online and our project is just hosted in
our computer.
So just to make a test, so you see how this works, we're just going to use Google's website, so.
ETOPS.
Calling forward slash, forward slash, let's just ride Google's front page here, so Google dot com.
Let's use the same one for the error message, so if you were doing this for a real website, all you
had to do was just put in the address.
You want to redirect the person if the email was sent successfully and if you want a specific, you
are all for the error message.
You can also set one here.
So, for example, let's use Google and let's see if this is better.
Refreshing the page.
Let's try again.
So test to.
Redirect to Google.
I'm just going to send this message.
And now it seems that everything went well.
We were just redirected to Google, and if we go to our mailbox, we can see that we are getting the
messages correctly.
So this is fine.
This one is done.
I just want to show you that, as I said, we have a few other things that we can do with this so we
can set the reply to email.
And here they are explaining that we can add more fuds.
So if you want to add a phone number, you can do it.
In our case, we had some different fields like full name and email, and we didn't have a subject.
So for this example, let's just add the full name and email to our form.
So let's get this example feud that they are giving us.
So we have the subject, let's leave the subject, let's just add the full name.
And the emails, so let's change the name to.
Full name and the place holder as well.
Full name and let's do the same thing for the email address.
So email.
And email address, let's save this.
Let's see if this is still working.
Going back to our page now, we have a bigger form, so let's test subject.
Of message, full name.
I'm just going to write my name, email address.
And the text message quickly send.
The redirect worked correctly, if I go to the inbox, you see that the subject is here and inside the
message.
This is still not working.
We are just getting the message, so let's see why is this happening?
All right, so as you can see, we need to use the extra prefix.
So let's use this extra.
Before the names of the feud's, so for the email, let's use extra email and for the full name, extra
for name.
Let's save this and let's try again.
So now, again, my name.
Let's send it again.
Now, let's check if the feud's were included and now, as you can see, we have the test message and
the two extra fuds we have included are here.
So we have the full name and the email of the person.
So pretty good.
So as you can see very easily, we just put this contact form to work.
Of course, the code that they had on the front page did not work.
We just had to go to the link.
They sent the email.
So this is the downside of using a free service.
Sometimes things like this happen, but that's fine.
We just put it to work.
And like I said, sometimes this is just not going to work.
The service may be down for a few minutes, but if you have a website with only a few contact attempts
per week, I think this service is a very good option.
So this part is done and we just have a very simple thing to do to end this first project, which is
the year in this copyright message.
So we are going to do this in the next video.
I'll see you then.