How to customize the contact information field in AnQi CMS and display it in the template?

As a website operator who is well-versed in the operation of AnQiCMS, I understand that the core of content management lies in the combination of flexibility and user experience.Contact information is an indispensable part of a website, and its ability to customize the display directly affects the shaping of the corporate image and the convenience of communication with users.The AutoCMS provides very friendly support in this aspect.

How to customize the contact information field in AnQi CMS and call it to display in the template

In modern website operations, a clear and convenient contact method is crucial for gaining user trust and promoting business conversion.As an efficient content management system, AnQi CMS not only provides basic contact information management functions, but also allows website operators to flexibly customize more contact fields according to their own needs, and accurately call and display them in the website front-end template, thereby meeting various business scenarios.

Understand the contact information management mechanism of AnQi CMS

An auto CMS is built-in with a comprehensive contact management module, the core idea of which is to allow you to manage all external contact information centrally in the background.To access and configure this information, you need to log in to the Anqi CMS backend, then navigate to the "Contact Information Settings" option under "Backend Settings".

In this interface, the system has preset some commonly used contact fields for you, aiming to cover the daily needs of most enterprises. These default fields include:

  • Contact (UserName)：通常是您希望用户联系的负责人姓名。
  • Contact Phone (Cellphone)：企业的对外联系电话。
  • 联系地址 (Address)：公司的物理地址。
  • Contact Email (English)：用于接收用户邮件的电子邮箱。
  • 微信号 (Wechat)：The WeChat personal or public account number of the enterprise.
  • 微信二维码 (Qrcode)：The image for users to scan and add WeChat.
  • and such mainstream social media contact methods as QQ, WhatsApp, Facebook, Twitter.

These default fields are sufficient to support the basic contact information display of a corporate website.When your business has special requirements, such as the need to display contact information for a specific department, or an account for a niche instant messaging software, the custom features of Anqi CMS are particularly important.

Customize the detailed steps of the contact method field.

The flexibility of AnQi CMS is reflected in the fact that you can easily extend even if the default fields do not meet your personalized needs. The steps to customize the contact information field are as follows:

First, log in to the Anqi CMS backend, go to "Backend SettingsAt the bottom of this page, you will find a "Custom Settings Parameters" area.This is where you can show your skills.

Click the "Add Parameter" button in this area, and a form will pop up requiring you to fill in three key pieces of information:

  1. Parameter NameThis is the unique identifier used when calling this custom field in the template. I strongly recommend using concise and meaningful English letters as parameter names, for exampleSalesWhatsApp/SupportEmailorTelegramID.Although the system supports Chinese parameter names and will automatically convert them to camel case, English parameter names are**practical.Please make sure to remember the parameter name you set, as it will be matched precisely when called in the template.

  2. 参数值 (Parameter Value)：Here fill in the specific content of your customized contact information. For example, if your parameter name isSalesWhatsApp, then fill in the WhatsApp number of the sales department; if the parameter name isTelegramIDThis value can be a text, a number, or even a URL to an image (such as a custom customer service QR code link).

  3. RemarksThis is the internal description of the custom parameter, it will not be displayed on the website front-end and is only for administrators to view and understand the purpose of this field in the background.Entering clear remarks helps with team collaboration and future maintenance.

After filling in, click Save. Your custom contact information field has been successfully added to the system and can be modified at any time in the background.

Call and display custom contact information in the template

After you have configured all contact methods in the background, including default fields and custom fields, the next task is to present them to visitors on the website's front-end template. Anqi CMS provides a specialcontactTemplate tags make this process simple and intuitive.

contactThe basic usage of the tag is{% contact 变量名称 with name="字段名称" %}.变量名称is an optional parameter, if you set it, you can use the variable to refer to the value of the contact information in the template later; if not set,contactthe label will output the field value directly.nameThe parameter is the core, it needs to match exactly the default field name or custom parameter name you set in the background.

For example, if you want to display the default contact phone number in a template, you can write it like this:

<span>联系电话：{% contact with name="Cellphone" %}</span>

To call the one you customized in the background before:WhatsAppField (assuming you set the parameter name to:WhatsApp），method is also the same:

<span>WhatsApp联系方式：{% contact with name="WhatsApp" %}</span>

If you have used the multi-site management function of Anqi CMS and want to call the contact information of other sites on the current site,contactadd tags to itsiteIdSpecify the site ID with parameters, for example:

<span>其他站点电话：{% contact with name="Cellphone" siteId="2" %}</span>

Embed this call code into the HTML structure of your website template (usually in the footer, contact us page, or sidebar, etc.), a complete contact information block may look like this:

<div class="contact-information">
    <h3>与我们取得联系</h3>
    <ul>
        <li>
            <strong>联系人:</strong> <span>{% contact with name="UserName" %}</span>
        </li>
        <li>
            <strong>电话:</strong> <a href="tel:{% contact with name="Cellphone" %}">{% contact with name="Cellphone" %}</a>
        </li>
        <li>
            <strong>邮箱:</strong> <a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a>
        </li>
        <li>
            <strong>WhatsApp:</strong> <span>{% contact with name="WhatsApp" %}</span>
        </li>
        <li>
            <strong>地址:</strong> <span>{% contact with name="Address" %}</span>
        </li>
        {%- comment -%} 假设您还自定义了一个名为 "TelegramID" 的字段 {%- endcomment -%}
        {%- with telegramId = contact with name="TelegramID" -%}
        {%- if telegramId -%}
        <li>
            <strong>Telegram:</strong> <a href="https://t.me/{{ telegramId }}">{% contact with name="TelegramID" %}</a>
        </li>
        {%- endif -%}
        {%- endwith -%}
    </ul>
    <div class="wechat-qrcode">
        <h4>扫码关注微信</h4>
        <img src="{% contact with name="Qrcode" %}" alt="微信二维码">
    </div>
</div>

Please note that in actual application, you may need to adjust according to the specific HTML structure and CSS style of the templatecontactThe placement of the label and the external wrapping elements to ensure the display effect meets the design requirements.At the same time, for fields like Telegram ID, you can also combine links for display to enhance the user experience.

Through these features provided by the Anqi CMS, whether it is the basic enterprise contact information or the personalized contact methods for specific marketing activities or customer service channels, you can easily manage and expand them in the background, and flexibly call and display them in the front-end templates, providing the most convenient communication途径 for website visitors.This high degree of flexibility is one of the major advantages of AnQi CMS as an enterprise-level content management system.

Common Questions and Answers (FAQ)

问：I have customized the contact information field in the background and saved it, but it does not display in the template. Why is that?

答：Firstly, please carefully check that you have entered in the templatecontactTagsnameThe parameter value must be exactly the same as the 'Parameter Name' you custom-set in the 'Contact Information Settings' backend, including the case.其次，though the security CMS can be updated in real time, in some cases, especially in the production environment where caching is enabled, you may need to manually clear the website cache or click the "Update Cache" button in the background to ensure that the latest configuration takes effect.

问：我能否自定义图片类型的联系方式字段，例如一个专属客服的二维码？

答：安企CMS的“联系