In website operation, clearly and effectively displaying contact information is crucial for establishing user trust and promoting communication and exchange.Whether it is to consult products, seek service support, or provide feedback, a readily accessible phone, email, or address can greatly enhance the user experience.AnQiCMS (AnQiCMS) has fully considered this need, providing a flexible and convenient way, allowing website administrators to centrally manage contact information in the background, and easily call and display it on the front-end page through simple template tags.

Step 1: Set your contact information in the backend

To display the contact information 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.

After entering the Anqi CMS backend management interface, you will find a special module for managing contact information. Here, the system has preset multiple commonly used contact information fields, such as:

  • Contact Name: Used to identify your contact person or department, such as "Manager Zhang", "Sales Department".
  • Contact phone number: The phone number that customers can directly dial.
  • Contact address: Your company or store's specific location for easy customer visits.
  • Contact email: Customers can contact you through email.
  • WeChat ID and WeChat QR code: Convenient for mobile users to add friends or scan and follow.
  • In addition, it supports mainstream social media contact methods such as QQ, WhatsApp, Facebook, Twitter, Tiktok, Pinterest, Linkedin, Instagram, and Youtube.

If these preset fields do not meet your personalized needs, AnQi CMS also providesCustom settings parametersfunction. You can create any contact information fields you need based on your business characteristics.For example, if you need to display a special customer service hotline or a specific online consultation link, you can customize a parameter name of "CustomerServiceHotline" or "OnlineChatLink" and enter the corresponding value.When setting custom parameters, you need to specify a "parameter name" (usually recommended to use English or pinyin, which will be automatically converted to camel case for template calling), and assign a "parameter value" to it, and you can also add "notes" for future management.

By 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, greatly improving operational efficiency.

Step 2: Call and display contact information in the front-end template

After you have completed the contact information setup in the background, you can easily call this data in the website's front-end template next. Anqi CMS provides a concise and powerful template tag for this——contact.

contactThe basic usage of tags is:{% contact 变量名称 with name="字段名称" %}In which, 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 label will directly output the field value.The core lies innameThe parameter corresponds to the name of the contact information field you set in the background.

For example, to call and display the most commonContact phone numberYou can write the code like this:

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

This line of code will directly display the phone number you entered in the background "Contact Settings". To make it convenient for users to click and dial directly, you can wrap it in HTML's<a>Labels, and usetel:protocol:

<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 email by clicking on a link, you can handle it like this:

`twig

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