Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
We have now reached the final version of our form. The moment you've all been waiting for. Let's open up, contact us dash final. This is the final version of our form. This particular version of the form is not using a recaptcha image. I showed you how to do that earlier in this course, but our final version we've decided not to use a recaptcha. This final version does have Java script attached to the form for client side validation using Dream Weaver beavhiors. This form does have server side validation.
It's the same server side validation that was looked at in the server side validation piece for the contact us form. So the server side validation is identical to what's in this file. Server validate does not add the email piece. So this final version, does add the email piece. Now, this will not work, if you preview it in the browser, it will not send an email.
In your local host environment, we do not have the entire email setup, within Apache, the SMTP portion configured. And even if we did, in a local host environment, most of the time you cannot get an email to work correctly. So in order to actually have this form send an email, what you want to do is put this Contact us final onto a live web server.
That does have SMTP configured within it. But let's take a look at this form. Now up at the top of this page, I do have a note. This page is live. It's out on my website, so you can go out to this hyperlink and preview this page on a live server. You will not be the one to get the email however, I put an identical version of this page on my website so you can see how it works.
But I will be the one to get the email once it's out of my site at this link, if you are using this version. Feel free to take this contact us final. You will need some additional files in order to preview it correctly, including the images on your website. But this particular version is identical to the one on my site. So, up at the top, this is our server side validation being built. This is the exact same Server Side Validation, as in Server Validate, the piece that is different, begins on line 58.
Within this section, we have an email message being built. And let me close up my Insert bar, up at the top, so I have a little more room here. So if this a valid form, if it passes our server side validation piece, this is where the email will be sent. So in your version you'd want to put your email address here. I told you I have an identical form on my website, so I needed to put in email addresses.
Here's the subject of the form. So when that email comes into me, that will be in the subject line. The dollar message part is actually building the email message portion. So you can see it has a subject. The form name is plugged in. This is coming from a hidden form field, in the form, ad then we have what the user plugged in, so we have their name, email, topic, present customer, tour date, and if they filled in the comments area we will get the comments inlcuded in our email.
The headers portion is listing who this is from. It's also CCing another email address. I wanted to show you how to add this piece in case you need to do it. And line 92 is actually sending the email to the web servers. SMTP server if it is set up. PHP does not actually send the email that web server does. So PHP gathers all this information up and forwards it to the mail transport agent for the web server. Once the user has filled out the form they will be redirected to this particular page, you can see within the scope of that folder on my website, we have the thank you page.
Since you can go out to my website to fill out this form, I wanted to make sure you were redirected when you did to a nice looking thank you page, and then the entire process is exited. So that is what sends our email. Here is our client-side validation. This is built by Dreamweaver behaviors. I'm not using the custom client-side. Here is our actual form. And if I put it InDesign view. It's the exact same form, we looked at in the server side validation piece. If I preview this in the browser, you will see, there's our form. If I click summit, the server side validation will work just fine within your local enviroment.
It's just the actual email Well not get sent out by the web server in this local environment, so if I plug in my name, click submit, name is gone, you can see it turns black once again, and email. If I plug in a good email address and click Submit, we are all set. Add a topic that one disappears. So you can see as we fill these out correctly. Now what if I supply an email address such as this you can see it is not a valid email address. So, you'll have a completely functional form in this version. called Contact us-final, this file is only located within the chapter seven Start files, within your Course files.
Chapter seven is a more complete folder of files, so if for some reason you do not have this one, you want to replace your files with the chapter seven start files. And then retest this page. So that is our final form, complete with client side validation, server side validation and an email script that will sent the email to whoever you specify to send it too. Isn't it amazing how much work it is to put together a single form for a website.
Most people in my classes are amazed at how much work it is. And once you understand that, you tend to be a little less critical of forms out on the web. But they are a part of every website. It's the easiest way to gather data from the user and when you use a form, the web server is spending the information so the user can fill out that form, whether they are on their own machine or whether they are traveling and using somebody else's machine.
So that is a web form, and how to send a webform and it's data in an email out to get our information from a user.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100255 Viewers
56 Video lessons · 113228 Viewers
71 Video lessons · 82109 Viewers
131 Video lessons · 39405 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.