Send Email with a Web Form

In this video we are gonna create a simple php script to process this form, and we are also gonna validate this form. So, this form is gonna be fully functional by the end of this video...

Download everything we made in this video (ZIP)

Part1: Building a Web From in Dreamweaver

Hey everybody, Greg Davis here. Now, we created this web form in one of my earlier videos, you will find that video on my channel.

In this video we are gonna create a simple php script to process this form, and take the information that somebody typed into it, and send you an email with that information.

And, we are also gonna validate this form, so people won't be able to submit it, unless they type in all the required information, a valid email address etc. So this form is gonna be fully functional by the end of this video.

So first, let's create the php script that's gonna take the information from the form, and send that information to your email address.

Let's GO under File, and New.

And I just SELECT html, we are gonna save it as a php document, even if you can select php, it does virtually the same thing, so just html, HIT Create.

And let's GO to Code View.

I SELECT all this code, and DELETE it all.

And, I just TYPE in the opening php tag: <?php

I HIT some Enter.

And I TYPE in the closing php tag: ?>

These are the open and close php tags, so you must place all of your php script between these tags.

Now, let's SAVE this document real quick. File, Save as…

I'm gonna save it into my local site.

I'm gonna CALL it: orderform.

And I SELECT Save as type: PHP Files.

I HIT Save.

And here we go! You can see that our text turned red. That's what it should do, because this is now a php file. So, let's get going. If the submit button has been pressed…

I TYPE in: if(isset($_POST['submit'])) {

Now, PHP is case sensitive, so it must be underscore POST, with uppercase letters, otherwise it won't work.

I HIT Enter.

And if the submit button has been pressed, I wanna send an email. Sending plain email is very easy in php. It has a built-in command for that. I just TYPE it in:

mail('youremail@email.com', 'Subject line', $emailbody);

And the first parameter is who we are gonna send the email to. Just type in your own email address, I'm just gonna TYPE in: 'youremail@email.com',

The second parameter is a subject line. This is gonna be the subject of your email. I just TYPE in: 'Subject line',

And the final parameter is gonna be the email body copy. I'm gonna USE a variable for now: $emailbody);
We are gonna set up this variable in just a bit.

I HIT Enter.

And the next thing we need to do is, after people hit submit, we wanna redirect them to our thankyou page. So I TYPE in:
header('location: thankyou.html');

I have already created this thankyou page. And you could type in the full url with http, but since my file is in the same site folder, I don't need to do that.

I HIT Enter, and Backspace.

And next, I wanna make sure that someone doesn't just get to this file accidentally. So I TYPE in:

} else {

I HIT Enter, and Tab.

And if someone has come to this file without using the form, I wanna redirect them back to my order page.

So I TYPE in:

header('location: order.html');
}

And now, let's set up the email body that we are going to receive every time someone submits the form. We are gonna set up THIS email body variable.

So over HERE, let's TYPE in: $emailbody =

And now I can just type in the body of the email.

So, I GO back to my form.

And my first form field is collecting the first name.

So I GO back to my php file.

And I TYPE in: 'First Name: '.$_POST[

I GO back to my form again.

I SELECT that first name textfield.

And the name of this text field is 'fname'

So I GO back to my php file.

And I TYPE in: 'fname']."\n"

You could use ALT+92 for writing a backslash. And THIS backslash-n is just for a new line.

I HIT Enter.

So basically, in the email, I will see THIS text, whatever I typed in there, 'First Name: '

And then, right next to it, I will see what the actual user typed into the form field with the name of 'fname' It's that simple. And the backslash-n is just for a new line.

And let's do this with every single form field.

I GO back to my form again.

And my second textfield is collecting the last name.

So I GO back to my php file.

And I TYPE in: .'Last Name: '.$_POST[

And again, we need the name of that text field, so let's GO back to the form.

SELECT that last name textfield

And the name of this last name textfield is 'lname'

So I GO back to my php file

And I TYPE in: 'lname']."\n" (new line)

I HIT Enter.

Next, I GO back to my form.

And my next textfield is collecting the email address. I SELECT that textfield.

And the name of this text field is just 'email'

So I GO back to my php file.

And I TYPE in: .'Email Address: '.$_POST['email']."\n" (backslash-n for a new line)

I HIT Enter.

Next, I GO back to my form.

And now I have 3 different checkboxes for product selection.

I SELECT the first one.

And the name of this checkbox is 'products'

I SELECT the second one.

And the name of this checkbox is also 'products'

And that's not good. They have to have different names, because we have to collect those 3 different data separately.
So I SELECT the first one, and it's gonna BE: 'product1'

Checked value will BE simply 'yes'.

THIS is what you are going to see in the email next to the actual product if selected.

I SELECT the second one, and it's gonna BE: 'product2'.
Checked value will BE 'yes'

I SELECT the last one, and it's gonna BE: 'product3'.
Checked value will BE 'yes'.

I GO back to my php file.

And I TYPE in: .'Product1: '.$_POST['product1']."\n"

I HIT Enter

I TYPE in: .'Product2: '.$_POST['product2']."\n"

I HIT Enter

I TYPE in: .'Product3: '.$_POST['product3']."\n"

I HIT Enter.

Next, I GO back to my form.

And I have a radio button. I SELECT it.

And the name of this radio button is 'delivery'.

Now, unlike checkboxes we just did, a radio button only collects one data. It's either download, or box in this case. People can't select both. We could have more options, but still, it only collects one data, so it's gonna be just one line of code.

I SELECT the other button, and the name of that button is also 'delivery'.

And that's fine, because only the checked value has to be different, which is the actual data we collect.
So I GO back to my php file.

And I TYPE in: .'Delivery: '.$_POST['delivery']."\n"

I HIT Enter.

Next, I GO back to my form.

And I have a drop down menu, which also collects just one data. I SELECT it.

And the name of this drop down menu is 'costumer'

So I GO back to my php file.

And I TYPE in: .'Costumer: '.$_POST['costumer']."\n"

I HIT Enter.

Next, I GO back to my form.

And I have a textfield for comments. I SELECT it.

And the name of this textfield is 'comments'.

So I GO back to my php file.

And I TYPE in: .'Comments: '.$_POST['comments']."\n"

I HIT Enter.

Next, I GO back to my form.

And the last one is a single checkbox. I SELECT it.

And the name of this checkbox is 'terms'

I GO back to my php file.

And I TYPE in: .'Terms: '.$_POST['terms'];

And since I'm at the end of the variable I'm defining, I used a semicolon to exit the command.

And my php file is ready. I just SAVE it real quick.

I GO back to my form.

I SELECT inside of it.

And on my tag selector, I SELECT my form tag.

And the action of this form is gonna be the php file we just created. So I BROWSE it.

The method is gonna be post.

And here we go! Our form is now fully functional.

We just need to validate the form, so people won't be able to submit it, unless they type in all the information we require.
And we are gonna use JavaScript to validate the form. Dreamweaver has a pretty good JavaScript for form validation, so that's what we are going to use.

I SELECT the submit button.

And let's GO under Window, and SELECT Behaviors.

I CLICK this little plus button.

And I CHOOSE: Validate Form.

And for the first name, I'm gonna SELECT required.

And I'm gonna accept anything, any kind of characters.

I SELECT lname, or last name.

I'm gonna SELECT required, and I'm gonna accept anything.

Next, I SELECT the email field.

I'm gonna SELECT required, and I'm gonna ACCEPT email address only.

And I'm not gonna do any more restrictions, so I just HIT Ok.

And you can see that this behavior is gonna run onClick, every time someone hits the submit button.

Let's PREVIEW it in a browser.

YES, save changes.

And as you can see, if I HIT the submit button without typing in all the required information, I get this popup message. Awesome!

Now, I'm not gonna test the email sending script. I know it works. I used it before. Go ahead and test it if you want. Just make sure you upload everything to your web server, because if you try it on your computer, it won't work. You have to upload everything to your web server.

So, that's it for today. I hope you learned something. I hope you enjoyed it. If you want more videos from me go to my website EasyWebDesignSystem.com, and join my list, and follow me on Twitter. Thanks a lot for watching, and see you in the next video. Bye!

Publishing your website>>>

All videos in recommended learning order:

How to design a website using Adobe Fireworks>>>

Building a Website Start To Finish With Dreamweaver>>>

How To Embed a YouTube Video On Your Website>>>

Floating Div Tags in Dreamweaver>>>

How To Create a Table in Dreamweaver>>>

Building a Web From in Dreamweaver>>>

Dreamweaver CSS Website Layouts>>>

Creating a CSS Drop Down Menu in Dreamweaver>>>

Creating a Spry Menu Bar in Dreamweaver>>>

Creating Spry Tabbed Panels in Dreamweaver>>>

Creating a Spry Collapsible Panel in Dreamweaver>>>

Working with the Spry Tooltip Widget in Dreamweaver>>>

Creating a Web Photo Gallery/Album in Dreamweaver>>>

Adding JavaScript in Dreamweaver>>>

Send Email with a Web Form>>>