As an experienced website operations expert, I know the importance of flexible content display for website operation efficiency and user experience.AutoCMS (AutoCMS) offers great customizability, providing great convenience in handling seemingly simple but crucial information such as website contact details.{% contact %}Tags call their values.

Auto CMS Template: A Practical Guide to Precisely Calling Custom Contact Information Fields

In the digital age, the contact information of the website is the bridge for users to communicate with us, and it is also a key link in building trust and promoting business conversion.However, traditional CMS systems usually only provide a limited number of contact fields, such as phone, email, and address.For enterprises pursuing refined operation, this is obviously insufficient.Different business lines may require independent contacts or phone numbers, while global businesses may need international communication apps such as WhatsApp, Telegram, or may need to display localized contact information in specific regions.

The strength of AnQi CMS lies in its 'flexible content model' concept, which not only manifests in the management of content articles but also extends to the basic configuration of the website, including our contact information.By customizing the contact method field, we can easily expand the communication dimensions of the website, meeting various complex operational needs.

Step 1: Customize Your Contact Information Flexibly in the Background

To display custom contact information in the front-end template, we first need to set it up in the AnQi CMS backend. This process is intuitive and easy to operate:

  1. Log in to the Anqi CMS backend.
  2. Navigate to the "Background Settings" area of the left menu and click to enter the "Contact Information Settings".
  3. On this page, you will see some default contact information fields, such as contact person, contact phone number, contact email, and so on.Scroll down, and you will find a section named "Custom Setting Parameters".
  4. Here, you can click "Add New Parameter" to create the custom field you need. You need to fill in three core pieces of information:
    • Parameter name:This is the 'key' you use when calling this field in the template.Suggest using English or pinyin, for example, “WhatsApp”、“SalesPhone”、“SupportEmail” and so on.It should be noted that if you enter Chinese, the system will internally try to convert it to CamelCase naming style for template invocation, but to avoid unnecessary confusion, it is strongly recommended to use English parameter names directly.
    • Parameter value:This is the specific content of this contact method, such as your WhatsApp number, the dedicated line phone number of the sales department, or the customer service email address.
    • Note:This is an optional field used to explain the purpose of the parameter, which is convenient for future maintenance and understanding by oneself or team members. It will not be displayed on the front end.

For example, we might add a parameter name called “WhatsApp” with a parameter value of “+86 13800138000”; and then add a parameter name called “WeChatPublicAccount”（WeChat Official Account）with a parameter value of “anqicms”.Save these settings and the background configuration work is completed.

Step two: Apply{% contact %}Accurate tag call

Complete the backend custom settings, and then it's time to display this information on the front-end template of your website. SafeCMS provides a dedicated{% contact %}Labels, it is exactly the core tool we use to achieve this goal.

{% contact %}The basic usage of labels is very simple and clear. It is usually used withnameparameters.nameThe value of the parameter is the 'parameter name' defined in the background.

Call the default contact method field:

If you want to call the default contact phone field, you can write it in the template like this:

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

This code will directly output the value you filled in the 'Phone Number' field under 'Contact Information Settings' in the background.

Exactly call the custom contact information field:

Now, let us call the WhatsApp contact method we customized just now in the background. If your "parameter name" is set to "WhatsApp", the calling method in the template is as follows: 

<p>我们的WhatsApp热线：{% contact with name="WhatsApp" %}</p>

This code will execute, and the page will display “Our WhatsApp hotline: +86 13800138000”.

Assign the field value to a variable for flexible use:

To improve the readability and flexibility of the template, especially when you need to further process a contact method value (such as using it as part of a link), you can{% contact %}The value obtained by the label is assigned to a variable: English

{% contact whatsappNumber with name="WhatsApp" %}
{% if whatsappNumber %}
    <p>通过WhatsApp联系我们：<a href="https://wa.me/{{ whatsappNumber }}" target="_blank">{{ whatsappNumber }}</a></p>
{% endif %}

{% contact publicAccount with name="WeChatPublicAccount" %}
{% if publicAccount %}
    <p>关注我们的微信公众号：{{ publicAccount }}</p>
{% endif %}

In the above example,whatsappNumberandpublicAccountit is the variable name you define, which will carry the corresponding contact information value obtained from the background. Then, you can embed them into the HTML structure like other variables, even combiningifLabel condition judgment, ensure that the page does not display blank information only when the field has a value.

Step 3: Advanced Application and Practical Skills

  • Build dynamic links:For phone numbers, email addresses, or social media accounts, you usually want them to be clickable links. For example, combining with phone numbers'tel:agreements or WhatsApp'swa.me/agreements:

    {% contact phone with name="Cellphone" %}
{% if phone %}
    <p>客服热线：<a href="tel:{{ phone }}">{{ phone }}</a></p>
{% endif %}


{% contact email with name="Email" %}
{% if email %}
    <p>商务合作：<a href="mailto:{{ email }}">{{ email }}</a></p>
{% endif %}

  • Call in a multi-site scenario:If your security CMS is deployed across multiple sites and you want to call another site's contact information from a template in one site,{% contact %}Tags also providesiteIdParameters are used to meet this requirement. You just need to specify the ID of the target site when calling it:

    {% comment %} 调用站点ID为2的WhatsApp联系方式 {% endcomment %}
<p>姊妹站WhatsApp：{% contact with name="WhatsApp" siteId="2" %}</p>

  • Robustness considerations: handling of null values:In actual operation, certain custom fields may not always be filled in. In order to avoid templates