1 00:00:00,000 --> 00:00:05,000 One of the notable pages missing from this Web site is a contact page. 2 00:00:05,001 --> 00:00:10,001 Right now I have no way for anyone to contact this company anywhere on this Web site. 3 00:00:10,002 --> 00:00:13,002 There's no contact information anywhere. 4 00:00:13,003 --> 00:00:14,003 Fortunately, Joomla 5 00:00:14,004 --> 00:00:16,004 ships with a Contacts component. 6 00:00:16,005 --> 00:00:21,005 And in that Contacts component, you have the ability to list your contact 7 00:00:21,006 --> 00:00:24,006 information, and you can have a contact form. 8 00:00:24,007 --> 00:00:27,007 People can fill out that contact form to contact you, and that way you don't 9 00:00:27,008 --> 00:00:31,008 have to put your e-mail address on the Web site directly, which might lead to a 10 00:00:31,009 --> 00:00:34,009 spammer picking it up, and sending you all kinds of e-mail you don't want. 11 00:00:34,010 --> 00:00:38,010 So to do this, I'm going to hop into the back-end of Joomla, 12 00:00:38,011 --> 00:00:42,011 and I'm going to start working with the Contacts component. 13 00:00:42,012 --> 00:00:47,012 So here under Components, we have a component called Contacts, and here on the 14 00:00:47,013 --> 00:00:48,013 flyout, there are two options; 15 00:00:48,014 --> 00:00:50,014 the Categories, and the Contacts. 16 00:00:50,015 --> 00:00:55,015 These categories are different than the categories that you have associated with articles. 17 00:00:55,016 --> 00:00:59,016 So these are contact categories instead of article categories. 18 00:00:59,017 --> 00:01:01,017 But the process works exactly the same. 19 00:01:01,018 --> 00:01:04,018 We're going to create a category for Contacts. 20 00:01:04,019 --> 00:01:07,019 We're going to create the contact itself, and then we're going to link that 21 00:01:07,020 --> 00:01:11,020 contact to the menu, and that's what I am going to cover in this video. 22 00:01:11,021 --> 00:01:14,021 So, I am going to start by making a contact category, 23 00:01:14,022 --> 00:01:18,022 and when you click this, you'll see that we only have one category by default; 24 00:01:18,023 --> 00:01:20,023 that's the Uncategorized category. 25 00:01:20,024 --> 00:01:24,024 I am going to go ahead and make a new category, and I am going to do that by 26 00:01:24,025 --> 00:01:28,025 clicking the New button, and I am going to give this a title. 27 00:01:28,026 --> 00:01:29,026 Let's call it The Management. 28 00:01:29,027 --> 00:01:33,027 That's all you need to put in to create a category, just the same way you saw 29 00:01:33,028 --> 00:01:36,028 with the article categories, works the same for the Contact categories. 30 00:01:36,029 --> 00:01:38,029 And I am going to say Save & Close. 31 00:01:38,030 --> 00:01:39,030 So that's step one. 32 00:01:39,031 --> 00:01:44,031 Step two is to create the contact itself, and that would be under my Contacts 33 00:01:44,032 --> 00:01:48,032 link, which I can get to here in left navigation, or I can go to the dropdown, and 34 00:01:48,033 --> 00:01:49,033 select it from there. 35 00:01:49,034 --> 00:01:53,034 As you see, I have no contacts right now. 36 00:01:53,035 --> 00:01:57,035 But I can add one by clicking the big green New button, and I am going to fill 37 00:01:57,036 --> 00:01:58,036 out this information. 38 00:01:58,037 --> 00:02:00,037 So first of all is the Name. 39 00:02:00,038 --> 00:02:04,038 In your Exercise Files, you'll find that I have given you the company address 40 00:02:04,039 --> 00:02:05,039 and contact information here. 41 00:02:05,040 --> 00:02:09,040 You can just go ahead and copy the company name as the name that we'll put 42 00:02:09,041 --> 00:02:15,041 in. Highlight, Ctrl+C or Command+C to copy: Ctrl+V or Command+V to paste here into the Web site. 43 00:02:15,042 --> 00:02:18,042 The Category, of course, will be The Management. 44 00:02:18,043 --> 00:02:22,043 And that's all you need to configure here in this particular tab. 45 00:02:22,044 --> 00:02:26,044 Now I am going to switch to the Contact Details Tab, and here is where I can put 46 00:02:26,045 --> 00:02:28,045 in some additional information. 47 00:02:28,046 --> 00:02:33,046 I don't have to fill in absolutely everything, but I'm going to fill in a few of these things. 48 00:02:33,047 --> 00:02:38,047 One thing that you should fill in if you want a contact form is the e-mail address. 49 00:02:38,048 --> 00:02:39,048 So I am going to highlight that; 50 00:02:39,049 --> 00:02:45,049 Ctrl+C or Command+C, and then Ctrl+V or Command+V. The e-mail address is really 51 00:02:45,050 --> 00:02:49,050 important, because if you don't have an e-mail address specified here, the 52 00:02:49,051 --> 00:02:50,051 contact form won't appear. 53 00:02:50,052 --> 00:02:54,052 This Email address is the receiving e-mail address. 54 00:02:54,053 --> 00:02:58,053 So when someone comes to your Web site, and they fill out the contact form, this 55 00:02:58,054 --> 00:03:02,054 is where the contents of that form will be e-mailed; to this address. 56 00:03:02,055 --> 00:03:05,055 This address, however, will not be displayed on the Web site. 57 00:03:05,056 --> 00:03:09,056 If you do not specify an e-mail address in this blank, you will not have a 58 00:03:09,057 --> 00:03:11,057 contact form on the Web site, 59 00:03:11,058 --> 00:03:13,058 and the reason why is very simple; 60 00:03:13,059 --> 00:03:18,059 if somebody fills out that contact form, and hits Submit, but yet, there's no 61 00:03:18,060 --> 00:03:23,060 e-mail address specified, where do the contents of that contact form go? We don't know. 62 00:03:23,061 --> 00:03:25,061 So that's why we don't even give you the contact form at all. 63 00:03:25,062 --> 00:03:29,062 Then we're going to put in the address for the Web site, 64 00:03:29,063 --> 00:03:34,063 and that is right here: 123 KinetEco Drive, Ctrl+C or Command+C to copy; Ctrl+C 65 00:03:34,064 --> 00:03:36,064 or Command+V to paste. 66 00:03:36,065 --> 00:03:40,065 Then I am going to put in my City, State, and ZIP; that's Los Angeles, California, 67 00:03:40,066 --> 00:03:48,066 90025, so Los Angeles, CA, 90025. 68 00:03:48,067 --> 00:03:53,067 I am not going to fill in the Country; KinetECO is pretty much doing business in 69 00:03:53,068 --> 00:03:57,068 the US right now. And I am going to copy over the phone number, highlight that, 70 00:03:57,069 --> 00:04:02,069 Ctrl+C, and Ctrl+V to paste that on into the Telephone blank. 71 00:04:02,070 --> 00:04:05,070 You could continue to fill out these blanks if you want, but that's our basic 72 00:04:05,071 --> 00:04:06,071 information here for KinetECO. 73 00:04:06,072 --> 00:04:10,072 And I am going to go ahead now, and just say Save & Close. 74 00:04:10,073 --> 00:04:14,073 So we've created a category for our contact, we've created the contact itself; 75 00:04:14,074 --> 00:04:16,074 is there anything showing on the Web site? 76 00:04:16,075 --> 00:04:21,075 Well, no, not yet, because this is a component, and the only way components 77 00:04:21,076 --> 00:04:25,076 display on the Web site is if they are linked through the menu, and we haven't 78 00:04:25,077 --> 00:04:26,077 made a menu link yet. 79 00:04:26,078 --> 00:04:28,078 So that's our last step in this process. 80 00:04:28,079 --> 00:04:34,079 So, I am going to go to Menus > Main Menu > Add a New Menu Item. 81 00:04:34,080 --> 00:04:38,080 And my Menu Item Type, I will click on the Select button. 82 00:04:38,081 --> 00:04:41,081 This time, rather than going to Articles, I want to link to a contact, 83 00:04:41,082 --> 00:04:44,082 so I should look under the Contacts portion of the screen. 84 00:04:44,083 --> 00:04:50,083 And here inside of Contacts, I have several choices. The one I want, though, is a single contact. 85 00:04:50,084 --> 00:04:53,084 I'm just linking to this one contact's information. 86 00:04:53,085 --> 00:04:55,085 Which contact would I want to link to? 87 00:04:55,086 --> 00:04:57,086 Click on this button, there's only one, 88 00:04:57,087 --> 00:04:59,087 so that's the one I am going to pick. 89 00:04:59,088 --> 00:05:02,088 And then for my Menu Title, I will just call this Contact. 90 00:05:02,089 --> 00:05:05,089 That's all of the required information that I want to fill out. 91 00:05:05,090 --> 00:05:09,090 I want this menu item to show up at the same level as Home, 92 00:05:09,091 --> 00:05:11,091 so my Menu Item Root will stay exactly where it is, 93 00:05:11,092 --> 00:05:15,092 and I'm going to go ahead, and say Save & Close. 94 00:05:15,093 --> 00:05:20,093 Now, when I refresh the front-end of the Web site, I have a link for my Contact page. 95 00:05:20,094 --> 00:05:24,094 When I click on that, as you see here, I have my contact information listed 96 00:05:24,095 --> 00:05:27,095 here, and then underneath, I have a Contact Form. 97 00:05:27,096 --> 00:05:31,096 When I click on that, this will pull up the contact form that I can fill out. 98 00:05:31,097 --> 00:05:34,097 Now, I'm not terribly excited about the way this page looks. 99 00:05:34,098 --> 00:05:39,098 I think these icons are kind of cheesy, and the contact form is really hard to find, 100 00:05:39,099 --> 00:05:43,099 so I am going to change a little bit of the formatting, and I will show you how 101 00:05:43,100 --> 00:05:45,000 to do that in the next video.