New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Dynamic Dreamweaver Websites: Creating and Validating Forms
Illustration by

Adding a CAPTCHA image


From:

Dynamic Dreamweaver Websites: Creating and Validating Forms

with Candyce Mairs

Video: Adding a CAPTCHA image

We are now going to take a look at setting up a ReCAPTCHA within a form. Within the Images folder for this completed chapter, Chapter 7 Start Files that is, so if you have not copied over the Chapter 7 Start Files into your htdocs folder within XAMPP or MAMP, please go out and get the Chapter 7 Start Files. The image we're going to look at is one of the files I've added to the Chapter 7 portion.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Dynamic Dreamweaver Websites: Creating and Validating Forms
3h 34m Intermediate May 19, 2011

Viewers: in countries Watching now:

Forms perform an essential function in modern websites, making it possible to gather information from users and validate that information. In this course, Adobe Certified Expert Candyce Mairs shows how to create forms to email user information and validate user data using various methods of form validation. These validation methods include client-side, server-side, and custom validation; CAPTCHA images; and Spry validation fields. You'll also see how to set up a PHP testing environment and preview PHP pages in Dreamweaver. Along the way you'll build your skills in areas like using admin consoles, commenting code, working with variables and includes, and much more.

Topics include:
  • Installing XAMPP on a Windows system
  • Installing MAMP on a Mac system
  • Using admin consoles
  • Creating PHP pages
  • Commenting code
  • Working with web forms
  • Adding custom validation
  • Using redirects
  • Dealing with email issues
Subjects:
Developer Web Web Design Web Development video2brain
Software:
Dreamweaver
Author:
Candyce Mairs

Adding a CAPTCHA image

We are now going to take a look at setting up a ReCAPTCHA within a form. Within the Images folder for this completed chapter, Chapter 7 Start Files that is, so if you have not copied over the Chapter 7 Start Files into your htdocs folder within XAMPP or MAMP, please go out and get the Chapter 7 Start Files. The image we're going to look at is one of the files I've added to the Chapter 7 portion.

So, ReCAPTCHA keys is what we're looking at, in case you want to preview this later. And when you sign up for a ReCAPTCHA, within your account you get your own personal keys. So your personal key would be listed here, and it's a sequence of a whole bunch of characters. So you don't want to have to type it out. You want to make sure you can copy and paste this information. So the public key is what goes into coding for the users. And your private key is what goes into the private key area for a script sitting on the web server.

So we'll walk through this piece, but you do not use the same public or private key as I do. Everybody signs up for their own account. They get their own personal key. So let's take a look at the form we're going to use, and this is the Contact Us ReCAPTCHA.php file. So this is going to add the ReCAPTCHA image down at the bottom of the page, underneath Comments. If we move out to the code view, and scroll down towards the bottom of the page, this PHP piece on line 69 is what adds the captcha image. You can see it's underneath the Comments, and above the Submit code. And this information is provided to you.

If you go into the instructions within the ReCAPTCHA website, it explains all of this for you as well. Now there is one file that you must have within your course files in order for this to work. And this must be on the web server itself. And if it wasn't sitting in the right folder, you might have issues. So this must be sitting in the right folder. So if we go out to our Course files, we have that file.

I've placed it in the Course files for you so you don't have to do that. But for your own website, you would need to place it within your website and make sure that file is on the server, or this will not work correctly. Notice within our form there is an area for the public key, line 70 in my form. And I have this marked with your public key goes here. So when you sign up for your ReCAPTCHA image, and you get that private key, you get a public and a private. So this public key that they are talking about is right here in your personal key when you signed up.

The characters listed in this line for your ReCAPTCHA account need to be copied into this area here within the webpage, where I have your public key goes here, that text. Now within the Action page, you have to put your private key. So I'm going to open up ReCAPTCHA Action. There's some coding on this page. This upper portion is going to test to see if the captcha image matches. It's going to test the answer that the user plugged in. So this is where your private key must go.

And just like the actual form for the private key, before that line, we need this ReCAPTCHAlib.php file. So you have to make sure that's in your red folder. And it's on the web server, so it can be found. Now this is not complete, as you can see. I don't have my private key set up here, and I don't have my public key set up here. So I will need to do that in order to test this form. So we'll go ahead and test this form, and I'll show you how it can work.

Let's take a look at the ReCAPTCHA in action. So I'll put this in my browser. There's a ReCAPTCHA image. Now if you can't read it, if you are a user, you can click this Refresh button. So you can see, it changes the text to make it easier. So I will fill this out, type it in, there is a period there within this one. Click Contact Us, and you can see it took me out.

I did not fill out the form, so we don't have much information in my form, but it moved me to the ReCAPTCHA Action page. So it matched, it worked. ReCAPTCHA validated the form, and I was able to get to my form data. What happens if it doesn't validate? I'll just put in a couple of characters. I click Contact Us. You can see, this is what occurs. So there is some text that prints out to the page, and you can certainly modify this text as you wish. That works just fine, but I wanted you to see this in action, and what happens when it doesn't enter correctly.

So that is a ReCAPTCHA image, and you have to plug in your personal, each person gets their own, public and private keys in order to work with it. If we take a look at the ReCAPTCHA Action page, you can see this has some coding in it. And I got this coding directly from the ReCAPTCHA website, so they provide this for you. I didn't have to create it. And underneath here is where you can enter different code.

So, if the captcha was not entered correctly, here is the message that pops up. So you can modify this section to have something happen if the captcha wasn't entered correctly. You don't have to use this specific text. If it wasn't entered correctly, the text shows, that's the die portion. If it was entered correctly, you can see it says, your code here to handle a successful verification. Within this section, I place code that I want to have occur if the ReCAPTCHA image passed, so that verification or the ReCAPTCHA form validation passes. So that is a ReCAPTCHA.

You need some information on the form itself to create the image. You need information on the Action page telling your form what to do if it passes verification. And you may want to modify what occurs if it doesn't pass validation. So that is inserting a ReCAPTCHA image within a form.

There are currently no FAQs about Dynamic Dreamweaver Websites: Creating and Validating Forms.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dynamic Dreamweaver Websites: Creating and Validating Forms.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.