How to call and display contact information on the Anqi CMS template?

It is crucial to clearly and conveniently display contact information on the website.In order to provide customer consultation, cooperation negotiation, or enhance brand trust, accurate contact information can play a crucial role.AnQiCMS as a content management system has fully considered this requirement, providing an intuitive and flexible way to manage and call the contact information of the website.

Background settings for contact information

Firstly, all contact information that needs to be displayed must be unifiedly configured in the AnQiCMS backend.This ensures consistency of information and facilitates subsequent centralized modification and management.

After entering the background management interface, you will find a "Background Settings" option in the left navigation bar. Clicking into it will show you a submenu named "Contact Information Settings". Here, AnQiCMS provides a series of commonly used contact information fields for you to fill in, such as:

• Contact:Generally used to display a name or title for external contact, such as 'Mr. Wang' or 'Customer Service Team.'
• Contact Phone:The main telephone number or customer service hotline of the website.
• Contact address:The company's detailed address or office location.
• Contact Email:The email address for external services.
• WeChat ID:Convenient for users to add WeChat for communication.
• WeChat QR Code:Uploadable images for users to scan and add.

The strength of AnQiCMS lies in its high flexibility.If the preset fields do not meet your specific needs, for example, if you need to display other social media contact information, you can add parameters in the "Custom settings parameters" area.For example, if your business needs to display WhatsApp contact information, you can add a parameter in this area and set itsWhatsApp(Suggested to use English letters, the system will automatically convert it to camel case, such aswhatsappwill becomeWhatsAppPlease enter your WhatsApp number or link in the "parameter value". This way, you can expand the types of contact information indefinitely according to your business needs.

Call and display contact information in the template

Once the backend contact information is configured, the next step is how to call and display this information in the website front-end template. AnQiCMS provides a special tag for this:{% contact ... %}.

The core of this label lies in itsnameproperty, you can use it to specify the specific contact method field to be called. Here are some examples of calling common contact methods:

1. Call contact phone number:If you want to display the contact phone number set in the background template, you can use:

   电话：{% contact with name="Cellphone" %}
   

   This will directly output the value you entered in the "Contact Phone" field in the background.

2. Contact email:Similarly, the method of calling the contact email is as follows:

   邮箱：{% contact with name="Email" %}
   

3. Contact address:Display detailed address information:

   地址：{% contact with name="Address" %}
   

4. Call WeChat QR code image:If the WeChat QR code image is uploaded on the back-end, you can display it as an image in the template.srcProperty to display:

   <img src="{% contact with name="Qrcode" %}" alt="微信二维码" />
   

5. Call custom contact information (such as WhatsApp):For custom fields you set up in the background,WhatsAppthe calling method is similar to built-in fields:

   WhatsApp：{% contact with name="WhatsApp" %}
   

To use more flexibly or to perform complex logic processing, you can also assign the result of the call to a custom variable. For example, assign the contact phone number tomyPhoneVariable, then proceed with the subsequent operation:

{% contact myPhone with name="Cellphone" %}
我们的热线电话是：{{ myPhone }}，欢迎致电。

For users who operate multiple sites, if they need to call the contact information of other sites, they can do so by:siteIdThe parameter specifies the site ID, but this is usually not necessary in most single-site scenarios.

Practical suggestions and techniques.

When using this contact information, there are some practical suggestions that can help you enhance user experience and website professionalism:

• Phone numbers can be clicked:Phone numbers should be wrapped in<a>Labels, and usetel:Protocol, convenient for mobile device users to directly click dial:

  
  <a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a>
  

• Email addresses can be clicked:Similarly, email addresses can be usedmailto:protocol:

  
  <a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a>
  

• Reasonable layout and style:Ensure that the contact information is displayed properly in the page header, footer, sidebar, or a dedicated "Contact Us" page, and maintains the design style of the overall website.
• Responsive design:Especially for phone numbers and QR codes, it should be ensured that they are clearly visible and easy to operate on different devices (PC, mobile, tablet).

By using the "Contact Information Settings" feature of AnQiCMS and its powerful template tags, you can easily display various contact information on your website, which not only enhances the professionalism of the website but also provides users with a smoother and more convenient communication channel.

Frequently Asked Questions (FAQ)

Q1: Can I name the contact information field arbitrarily? For example, 'My phone number'?A1: When adding custom parameters in the "Contact Information Settings" backend, although the "Parameter Name" can be entered in Chinese, we strongly recommend using a combination of letters, numbers, and underscores, such asMyPhoneNumber. The system will automatically convert it to camelCase for storage and invocation. Using English naming is better compatible with template parsing and avoids potential problems.

Q2: I have set a new contact method in the background, but it is not displayed on the website front end. What is the matter?A2: This is usually because you have not correctly called the field in the template, or it has been called in the template but hidden by CSS styles. Please check if you have used the correct in your template file.{% contact with name="您设置的参数名" %}Label, and ensure the label'snameThe property value is exactly the same as the parameter name you set in the background (note the case). In addition, please check the browser developer tools to see if the element is styled with CSSdisplay: none;Hiding properties.

Q3: If I want to display links to social media such as Facebook, Twitter, Instagram on my website, does AnQiCMS support it?A3: Yes, AnQiCMS's 'Contact Information Settings' not only includes the regular contact information but also built-in fields for mainstream social media platforms such as Facebook, Twitter, Tiktok, Pinterest, Linkedin, Instagram, and Youtube. You can directly fill in the corresponding links or IDs in the backend. Similarly, in the templates, it is done through{% contact with name="Facebook" %}or{% contact with name="Twitter" %}Call the tag.