Joomla 2.5 Flexi Contact Component Configuration

Size: px

Start display at page:

Download "Joomla 2.5 Flexi Contact Component Configuration"

Rudolph Singleton
5 years ago
Views:

1 Joomla 2.5 Flexi Contact Component Configuration Open Source Varsity For the configuration of Flexi Contact component in Joomla 2.5, you have to first login through the administrative panel of Joomla by simply entering the url_of_your_website/administrator in your browser. Enter the username, password and leave the Language to Default, click on Login as shown in Diagram 1. Diagram 1 After logging in to the backend, a control panel page opens as shown in Diagram 2. The Control Panel provides access to many default Joomla! functions and features. From the Control Panel, you can create and manage articles and categories. Other features available in the Control Panel are the media, menu, language, and user managers. Diagram 2 1

In the top menu, locate Components. Click Components. From the drop down menu that appears click on FlexiContact and then click on Configuration as shown in Diagram 3.

2 In the top menu, locate Components. Click Components. From the drop down menu that appears click on FlexiContact and then click on Configuration as shown in Diagram 3. Diagram 3 The FlexiContact Configuration page opens as shown in the Diagram 4. Here you can configure FlexiContact. Click each link displayed to access its configuration page. Diagram 4 2

3 1. General Configuration Enter the following details for the General Configuration as shown in Diagram 5. The following is a list of options provided: Logging Logging is off by default. If you click on Yes, all contacts are logged to the database. Send HTML If you click Yes, s are sent in HTML format to users. If you click No, s are sent in plain text format to users. Autofill This controls the automatic filling of the Name and Address for those users who are logged on to the front end of the website. Agreement Required This option allows you to require that users click a checkbox to enable the Send button in the front end. This can be done by entering some text (a text that appears after the checkbox) in the Prompt field. The Name and Link fields are optional. If they are both non-blank, the link is added after the prompt text, and when clicked, the link opens in a popup window Click Save and Close after filling all the details as shown in Diagram 5, in order to save the General Configuration and close the edit screen. You can also click on Save, in order to save the General Configuration data updated and stay on the editable screen. 2. To Admin: Diagram 5 With reference from the Diagram 4, this option allows you to specify the exact content of the sent to administrators address. 3. To User: With reference from the Diagram 4, this option allows you to specify the exact content of the sent to a user. If the checkbox " a copy of this message to your own address" is checked a copy of the is sent to the user s ID. 3

4 4. Confirmation Page: Here you can create the page that is displayed to a user after they dispatch any message via the FlexiContact form. The confirmation message can be delivered either by a link to a confirmation page on the website, OR by specifying confirmation content here as shown in the Diagram 6. NOTE: If a link is being specified its path must be relative to website root or a full URL. If you specify a link and some text, the link is used and not the text. 5. Form Fields: Diagram 6 This section allows you to configure the fields that appear on the FlexiContact form. Enter the following details for the Form Fields as shown in Diagram 7. The following are the list of options provided: Show subject This option controls the display of the subject field or not. Default subject Will hold the text that will be set as the default subject text Show copy checkbox This option controls whether the " a copy of this message to your own address" checkbox is included on the form or not. Message This is the message box where the site visitor types in a message to you. You can specify the size of the message box in width and height. 4

5 List By enabling this option you can show a dropdown list in the FlexiContact form. This is disabled by default. To use it, specify a prompt, and a list of words or phrases separated by commas. Eg. Prompt: "How did you find us?" List: Newspaper, Pamphlet, Magazine, Google, Other" Fields 1 to 5 These are all disabled by default, but you can activate them and use them to collect any specific information you want from a site visitor. Click Save and Close after filling all the details as shown in Diagram 7, in order to save the Form Fields and close the edit screen. You can also click Save, in order to save the Form Fields updated data and stay on the editable screen. Diagram 7 5

6 6. Top Text The Top Text configuration can be access via the FlexiContact configuration panel as shown in the Diagram 8 Diagram 8 On click of Top Text link the page is displayed in the browser as shown in the Diagram 9. Diagram 9 The text entered here using the wysiwyg editor will appear above the FlexiContact form. You can easily include formatting, images, and links. 6

7 7. Bottom Text The Bottom Text configuration can be access via the FlexiContact configuration panel as shown in the Diagram 10 Diagram 10 On click of Bottom Text link the page is displayed in the browser as shown in the Diagram 11. Diagram 11 The page text entered here using the wysiwyg editor will appear below the form. It can be overridden by the menu item. You can easily include formatting, images, and links. 7

8. Front end Styles The Front end Styles configuration can be access via the FlexiContact configuration panel as shown in the Diagram 12 Diagram 12 On click of Front end Styles

8 8. Front end Styles The Front end Styles configuration can be access via the FlexiContact configuration panel as shown in the Diagram 12 Diagram 12 On click of Front end Styles link the page is displayed in the browser as shown in the Diagram 13. Diagram 13 This option allows you to edit the CSS stylesheet that FlexiContact uses for the contact form. 8

9 The contact form uses a number of css classes, and loads its own style sheet. The style sheet used with FlexiContact is available at: <yourjoomlasite>/components/com_flexicontact/assets/com_flexicontact.css com_flexicontact.css defines styling rules for the following elements:.flexicontact :-The entire FlexiContact page.fc_form :-The form containing the fields.fc_table :-The table within the contact form.fc_table tr :-The rows of the table.fc_table td :-All the cells of the table.fc_table td.fc_ :-Prompt cells of the table.fc_table td.fc_ :-Field cells of the table.fc_error :-Error messages.fc_table td.fc_ :-cell that contains the captcha images.fc_table td.fc_ :-cell that contains the Send button.fc_inactive :-The styling for un-highlighted captcha images.fc_active :-The styling for the highlighted captcha image 9. Captcha Images The Captcha Images configuration can be access via the FlexiContact configuration panel as shown in the Diagram 14 Diagram 14 9

To delete images, select the images using the checkbox, and click the Delete toolbar button.

10 On click of Captcha Images link the page is displayed in the browser as shown in the Diagram 15. Diagram 15 Here you can view and delete captcha images. To delete images, select the images using the checkbox, and click the Delete toolbar button. Now click on View Site at the top-right hand corner to view the homepage of your website as shown in Diagram 16. Diagram 16 10

11 The homepage of the website opens. In the top menu click on Contact Us as shown in the Diagram 17 Diagram 17 Contact Form would now appear as shown in Diagram 18. Diagram 18 11

Joomla 2.5 Kunena Component Installation

Joomla 2.5 Kunena Component Installation For installing the Kunena component in Joomla 2.5, you have to first login through the administrative panel of joomla by simply entering the url_of_your_website/administrator