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, its ability to customize the display method is directly related to the shaping of the corporate image and the convenience of communication with users.AnQi CMS provides very friendly support in this regard.

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

In modern website operations, clear and convenient contact information is crucial for winning user trust and promoting business conversion.AnQi CMS is an efficient content management system that 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, thus meeting various business scenarios.

Understand the contact information management mechanism of AnQi CMS

The AnQi CMS is built-in with a complete contact information management module, its core idea 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 and then navigate to the "Contact Information Settings" option under "Backend Settings".

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

Contact (UserName): This is usually the person you want to contact the user.
Contact Phone (Cellphone): The company's public contact phone number.
Contact Address (Address): The physical address of the company.
Contact Email (Email): Used to receive the email address of the user.
WeChat ID (Wechat): The WeChat personal account or public account number of the company.
WeChat QR Code (Qrcode): The picture for users to scan and add WeChat.
and mainstream social media contact methods such as QQ, WhatsApp, Facebook, Twitter.

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

Detailed steps for customizing contact information fields.

The flexibility of AnQi CMS is reflected in the fact that you can easily expand 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 Settings", click "Contact Information Settings".At the bottom of this page, you will find a "Custom Setting Parameters" area.Here is where you can show off your skills.

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

Parameter Name (Parameter Name)This is the unique identifier used when calling this custom field in the template. I strongly recommend using concise and meaningful alphabetic names as parameters, such asSalesWhatsApp/SupportEmailorTelegramID. Although the system supports Chinese parameter names and will automatically convert them to camel case, but for the standardization of template calls and to reduce potential errors, English parameter names are**practical. Remember the parameter name you have set, as it will be exactly matched when calling the template later.
Parameter ValuePlease enter the specific content of your custom contact information. For example, if your parameter name isSalesWhatsAppThen enter the WhatsApp number of the sales department; if the parameter name isTelegramIDFill in the corresponding Telegram username or link. This value can be text, numbers, or even a URL of an image (such as a custom customer service QR code link).
RemarksThis is the internal description of the custom parameter, it will not be displayed on the website frontend, and is only for administrators to view and understand the purpose of this field in the backend.Fill in clear remarks to help the team collaboration and future maintenance.

After filling out, click save. Your custom contact information field has been successfully added to the system and can be modified at any time from the backend.

Call and display custom contact information in the template

After you configure all contact methods in the background, including default fields and custom fields, the next task is to present them to visitors in the front-end templates of the website. Anqi CMS provides a specialcontactTemplate label, making this process simple and intuitive.

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

For example, if you want to display the default contact 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 toWhatsApp)，the method is the same:

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

If you have used the multi-site management function of Anqicms and want to call the contact information of other sites on the current site, you cancontactadd in thesiteIdParameters to specify the site ID, 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, you can also combine links with fields like Telegram ID to enhance user experience.

Through these features provided by Anqi CMS, whether it is basic corporate contact information or 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 channels for website visitors.This high degree of flexibility is one of the major advantages of Anqi CMS as an enterprise-level content management system.

Frequently Asked Questions (FAQ)

Ask: I have customized the contact information field in the background and saved it, but it does not display when called in the template, why is that?

Answer: First, please carefully check the template you are usingcontactlabel'snameThe parameter value must match the parameter name you have customized in the background "Contact Settings" exactly, including the case.Secondly, although Anqi CMS usually updates in real time, in some cases, especially in production environments 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.

Ask: Can I customize the contact information field of image type, such as a dedicated customer service QR code?

Answer: Anqi CMS's "Contact

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