Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Before we get really started in this chapter, let's take a minute to go over exactly what we're going to be building. We're going to build a simple contact form extension that will create a contact form page where the details of the form can be e-mailed to us. I'm going to show you the extension first and then we'll spend the rest of the chapter building it. You'll find the extension under the Chapter 8 folder. It's called SimpleContactForm.zip. So, we'll install this extension. I'll just click the plus icon here in the Extensions view. I already have my Chapter 8 folder selected so I'll pick that zip file, click Open and here we can say it creates a simple contact form.
I can right-click anywhere in my Project view to install it. Click Next again. There is my license. I'll accept the license agreement. Then I'll choose my server. All these steps were the same as when we went through using an extension in the previous chapter. Next once more and then Finish. Extension was successfully installed so I'll click OK. And now I'll show you how to use the extension. I can right-click anywhere in here. I'll choose Dan Short and Simple Contact Form, and all I need to do is specify the name of a file that I want to save and then where I want this form contents to be e-mailed to.
So, I'll click Browse and I see the list of my projects and I can choose where I want my file to go. I'll click OK and I then have some validation here. I can see the fileName cannot be empty, so I'll go around here and pick a file name. I can also ensure that it's a valid file name. If you notice, I'll not fill it out completely. Then I need to provide an e-mail. Here, we can see now that I've gone to the e-mail field then actually put in some data.
There is some additional validation that's been run on the filename. The filename must have a valid .cfm file. So, I guess I have to add a .cfm there. Now that the form is complete, the OK button is enabled, so I'll click OK. I then get a dialog that says A new file has been written. I'll click Close, and now I can see that file here in my Project View. If I open that up, we can see it's just checking to make sure that a form has been submitted. It's doing some simple validation and then running a cfmail tag, but you can see that it's being sent to email@example.com, the exact same e-mail address that I provided in my dialog.
So, basically, what we're going to do is, if you take a look at the Begin folder, we're going to take this formTemplate.cfm. Let's go ahead and open that up. And we have a number of placeholders here. You'll notice I have two brackets and then the string mailTo. I have two brackets in mailSubject. I'm basically going to take all of the input that's provided to me through the extension dialog and I'll loop through each of those values that get sent and do a replace inside of my formTemplate. So, if I scroll over here you can see I also have data for the mailServer, the username, the password.
All of the details that I asked for in that form are going to be replaced where these brackets are. And if I go and take a look at the extension itself, I need to refresh this to get it to show those new files that got added. You'll see I have an ide_config file just like our previous extensions we've looked at. Then in the handlers directory, I have a formTemplate.cfm and a single index.cfm. This index.cfm is going to be my handler, which we're going to cover later in this chapter.
So, that's our project for this chapter. We're going to build our extension UI and then we're going to use all of the data provided through that UI to do some simple replacements inside of our formTemplate.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100051 Viewers
56 Video lessons · 113110 Viewers
71 Video lessons · 81964 Viewers
131 Video lessons · 39323 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.