[Tutorial] B2J Contact from extension for Joomla ! it's Free...

文件介绍:

B2J Contact 是由Bang2Joom 團隊針對Joomla 3 核心開發的一款免費的聯繫表單組件。它與Joomla! 核心自帶的com_contact 聯繫表單組件相比，主要優勢就是提供了添加自定義字段的功能。
B2J Contact 組件可謂是aiContactSafe 聯繫表單組件在Joomla 3 平台上的完美替代品。
B2J Contact 聯繫表單組件特色：
響應式佈局；
自帶聯繫表單模塊，便於在側邊欄顯示快速聯繫表單；
除了指定收件人email 地址外，還可指定“抄送”及“暗送”地址；
可聯合Joomla 核心自帶的“站內信”組件，給收件人發送站內信通知（表單提交的內容同時以站內信形式發送給收件人）；
支持添加無限量自定義字段；
支持的字段類型包括：單行文本框；多行文本框；email；日期；驗證碼；勾選框；下拉選單；小標題；文件附件；
可指定附件文件的類型及大小限制；
可選擇附件文件的傳送模式：存放在網站內（http 鏈接）及/或以email 附件發送到收件人郵箱；
強大而易用的組件後台界面；
提供“敏感詞過濾”（bad word filter）功能，一旦訪客提交的郵件內容中含有指定詞彙，就拒絕提交該郵件；
豐富的“成功提交後操作”選項，不僅可以“顯示致謝文字”（與Joomla 核心自帶聯繫表單組件相同），還可以“轉向指定的頁面”，或者“先顯示致謝文字然後轉向指定頁面”。
支持“發送郵件副本給寄件人”；
下圖是B2J Contact 聯繫表單組件前台的演示：

After the installation the first thing you should do is to go to Components -> B2J Contact and add a new contact form by clicking the "New" button.
On the image below you will find all the settings of the contact form you are creating grouped in 5 tabs - BASIC OPTIONS, DEFAULTS, FIELDS, EVENTS, SECURITY.



Tab #1: Basic Options

In the ‘Basic Options’ you have to name your new contact form. Contact ‘Name’ is just a label for a contact form and is used only for administrative purposes. To edit it, click on the text and it will change to an editable field. You can use any title you like, e.g. “Job Application Form,” “Form for Event″ and so on. 
Then write down the email addresses or Joomla! users’ inboxes where you wish all the forms to be forwarded after being submitted.

Tab #2: Defaults

In this tab you may set some default parameters for this contact form. This page includes the following sections:

Page Display Options



Page Subheading- Choose the subheading for your contact form 
Form width- set width of the whole contact form inserting a desired value in pixels, percents or just choose the Automatic, for automatic width control.

Page top text, Page bottom text- The text inserted here will display on contact form, helping your users clearly understand the purpose or other details of the form.

Field Labels



Show Field labels- Choose the place where ‘Field’ labels display. Options available are ‘beside’ and ‘inside’ fields.

Form layout- Choose the appearance of the form layout. The options available are ‘Compact’, ‘Extended’ and ‘Stacked’.

Fields labels width in px.- Allows you to set desired width of ’Field Labels’ of the contact form.

Text Fields, Dropdown List Fields, Text Area



Click the default numbers in pixels to make the fields editable and just set the desired values for the ‘Width’ of ‘Text Fields’ and ‘Dropdown List Fields’ (fields with single-line inputs) and ‘Width’ and ‘Height’ of ‘Text Area’ (the latter field allows multi-line inputs).

Note that you can allow or disallow attachments to the form. Let’s see what settings are available here.



Enable attachments- Choose ‘No’, to disallow and ‘Yes’ to allow the attachments

Receive uploads as- Choose the way you will receive the uploaded attachments The available options here are - http links, email attachments, both 

Upload Description, Upload Button Text, Reset Button Text- Modify text texts on Upload and Reset Buttons and add Upload Description to easily guide your users through attachment submitting process.

Size limit(Kb)- Limit the size of uploading attachments here.
You can also enable ‘File Type Filter’ to allow only predefined types of attachments for uploading. To do it , choose ‘Yes’ in the dropdown menu next to ‘Enable Files Filter’ just like we did it. If you choose ‘No’, all types of attachments will be allowed by default.



In case of enabling ‘File Types Filter’, select which file types to allow with Files Filter Rules. Choosing ‘Yes’ in the dropdown menu next to file type names, you will allow the file. To disallow exact file types, choose ‘No’. In the shown example, Audio and Video files are not allowed, and Images, Documents and Zipped Archives are allowed to be uploaded as an attachment. 

To make the form more user-friendly and easier-to-submit enter suitable texts for ‘Submit’ and ‘Reset’ buttons, and choose the type of buttons. Note that ‘Reset’ button can be also be disabled.


Let’s choose the most essential part.

Tab # 3: Fields +


Here you may add unlimited dynamic fields and add them to the already created groups or to create a new group instantly. After you add a new field, you should choose the type of the field.
Now it supports the following field types:


We will continually add new field types. You may also suggest your versions on Bang2Joom Forum.
After you select the field type you should be prompted to name the field, add a placeholder text, change the state of the field to Disable, Optional or Required, and to add the field to an existing group or create a new group. Let’s see how simple it is on the example of ‘Text’ field.


By adding different types of fields you will get your contact form ready to be published.

NOTE: All the changes will not apply until you click the SAVE button in the top-left corner of the component.

Tab #4: Events



In this tab you will be able to control the events your user will experience during the filling process of the forms.

TEXT TO DISPLAY WHEN EVENTS OCCUR

In this section you may choose whether to give a custom "Thank You!" message to the users, who have successfully filled in the form. You can also redirect them to a specific "Thank You!" page.

SEND A COPY TO THE SUBMITTER

In this section you will be given a chance to edit the email subject and email body that will be sent to the submitter upon a successful session.

Note: Sender’s email is the dynamic field e-mail, which is mentioned as default. 

Tab # 5:Security

The Security section includes settings for Anti-Spam and CAPTCHA.


Anti-Spam

You can add some enable the spam filter and add some words, separated by a comma to filter and also change the spam message.

CAPTCHA

This section will allow you to enable or disable the CAPTCHA on your custom contact form as well as to change:

Description
Type - Mathematical & Alphanumeric
Number of characters
Image width
Image height
Font and Font sizes
Max. rotation angle
Background Color
Text color
Disturbance color

Override CSS

If you want to add custom CSS, you should copy components\com_b2jcontact\css\b2jcontact.css into templates\your_temp\css\ folder and make your changes in that file.

In conclusion, the B2J Contact component is an out-of-the-box solution to create unlimited custom forms on your Joomla website.
All the forms are created in the B2J Contact Component. To show a single contact/custom form you should use either Menu Item or B2J Contact Module. All the settings and options are set within the B2J Contact Component, but not the module or menu item.
If you still have questions about this component, please don't hesitate to ask your questions on Bang2Joom Forum.

Feel free to visit Features Request for B2J Calendar also, if you have requests.

P.S. If you use B2J Contact Component please don't forget to post a review on Joomla Extension Directory.

Thank you!

This module is designed to show the B2J Contact Component on any Joomla! module position you wish.

To see this module in action you should:
1. Create a new contact in B2J Contact Component, add the desired custom fields, Save it!
2. Go to Module Manager -> Add new module
3. Choose the B2J Contact Module
4. Add a name for the module
5. Choose the module position on which you wish to publish the module
6. Assign the module to a menu item
7. Finally, from the right panel of the module, choose the contact you have created in the step 1.

That's it!

Assigning a single contact form to a menu item will create a new page on your Joomla! website and show the contact form inside of the component view of your template.

This can be done by going to Menus -> Choose a Menu -> Add new menu item.
1. Select a Menu Item Type
2. Choose B2J Contact -> Contact page
3. Select a contact from the list of the contacts that you have created before
4. Write a menu title
5. Save

You may also add a new class suffix to the component view by going to Advanced Options -> B2J Contact Options -> Component class suffix