It is crucial to clearly and effectively display contact information in website operations to establish user trust and promote communication.Whether consulting products, seeking service support, or providing feedback, a readily accessible phone, email, or address can greatly enhance the user experience.AnQiCMS (AnQiCMS) fully considers this need, providing a flexible and convenient way, allowing website administrators to manage contact information in the background in a unified manner, and easily call and display it on the frontend page through simple template tags.

Step 1: Set your contact information in the backend

To make the contact information display in the front-end template, you first need to make a unified setting in the Anqi CMS backend.This ensures that all contact information is centrally managed, making it convenient for subsequent modifications and maintenance.

Log in to the AQCMS backend management interface and you will find a module specifically designed for managing contact information. Here, the system presets multiple commonly used contact fields, such as:

  • Contact Name: Used to identify the person or department you are contacting, such as "Manager Zhang", "Sales Department".
  • Phone Number: The phone number that customers can directly dial.
  • Contact Address：Your company or store's specific location, convenient for customers to visit.
  • Contact Email：Customers can contact you through email.
  • WeChat ID and WeChat QR code：Easy for mobile users to add friends or scan to follow.
  • In addition, it also supports mainstream social media contact methods such as QQ, WhatsApp, Facebook, Twitter, Tiktok, Pinterest, Linkedin, Instagram, and Youtube.

If these preset fields still do not meet your personalized needs, Anqi CMS also providesCustomize settings parameters的功能。 EnglishYou can create any contact information field you need based on the characteristics of your business.For example, if you need to display a special customer service hotline or a specific online consultation link, you can customize a parameter named “CustomerServiceHotline” or “OnlineChatLink”, and enter the corresponding value.When setting custom parameters, you need to specify a "parameter name" (usually it is recommended to use English or pinyin, the system will automatically convert it to camel case for template calling), and assign a "parameter value" to it. You can also add "remarks" for easy management in the future.

Through centralized settings on the backend, you can ensure the consistency and accuracy of all relevant contact information on the website, avoiding the麻烦 of manual modifications on multiple pages and greatly improving operational efficiency.

第二步：In the front-end template, call and display contact information

When you have completed the contact information settings in the background, you can easily call these data in the website's front-end template next. Anqi CMS provides a simple yet powerful template tag for this.contact.

contactThe basic usage of the tag is:{% contact 变量名称 with name="字段名称" %}.The variable name is optional. If you specify a variable name, you can store the contact information obtained in a variable for multiple uses in the template; if the variable name is omitted, the tag will directly output the field value.nameThe parameter, it corresponds to the name of the contact information field you set in the background.

For example, to call and display the most commonPhone NumberYou can write the code like this: 

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

This line of code will display the phone number you entered in the "Contact Information Settings" on the page. For convenience, you can wrap it in HTML's<a>Label it and usetel:agreements:

<p>
    <a href="tel:{% contact with name='Cellphone' %}" rel="nofollow">
        电话咨询：{% contact with name="Cellphone" %}
    </a>
</p>

Similarly, callContact EmailIt is also very simple:

<p>电子邮件：{% contact with name="Email" %}</p>

If you want users to be able to send an email by clicking a link, you can handle it like this:

`twig

<a href="mailto:{% contact with name='Email'