It is crucial to clearly and conveniently display the contact information of the website in website operation.Whether for customer consultation, cooperation negotiation, or enhancing brand trust, accurate contact information plays a crucial role.AnQiCMS as a content management system, fully considers this requirement and provides 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 uniformly 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 on it will take you to 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:Used to display a name or title for external contact, such as 'Mr. Wang' or 'Customer Service Team'.
- Contact phone number:The main telephone number for consulting or customer service of the website.
- Contact address:The detailed address or office location of the company.
- Contact email:The email address for external services.
- 微信号：EnglishConvenient for users to add WeChat for communication.
- WeChat QR Code:Images can be uploaded 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.WhatsApp（Suggested to use English letters, the system will automatically convert it to camel case, such aswhatsappEnglishWhatsApp），and fill in your WhatsApp number or link in the "Parameter Value". This way, you can endlessly expand the types of contact information according to your business needs.
Call and display contact information in the template
Once the background 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 tag is itsnameproperty, you can use it to specify the specific contact method field to be called. Here are some examples of calling common contact methods:
Call contact phone number:If you want to display the contact phone number set in the background in the template, you can use:
电话：{% contact with name="Cellphone" %}This will directly output the value you filled in the 'Contact Phone' field in the background.
Call the contact email:Similarly, the method to call the contact email is as follows:
邮箱：{% contact with name="Email" %}The method to call the contact address:Display detailed address information:
地址：{% contact with name="Address" %}Call WeChat QR code image:If the WeChat QR code image is uploaded on the backend, you can display it as an image in the template.
srcAttribute to display:<img src="{% contact with name="Qrcode" %}" alt="微信二维码" />Call custom contact methods (e.g., WhatsApp):For the one you customized in the background,
WhatsAppthe calling method is similar to built-in fields:WhatsApp：{% contact with name="WhatsApp" %}
In order to use more flexibly or perform complex logic processing, you can also assign the result of the call to a custom variable. For example, you can assign the contact number tomyPhoneVariable, perform subsequent operations:
{% contact myPhone with name="Cellphone" %}
我们的热线电话是：{{ myPhone }}，欢迎致电。
For users who operate multiple sites, if they need to call contact information of other sites,siteIdParameter specifies the site ID, but this is not required in most single-site scenarios.
Practical suggestions and techniques
When using these contact information, there are some practical suggestions that can help you enhance user experience and website professionalism:
- Phone numbers are clickable:Enclose the phone number in
<a>Label it and usetel:Protocol, convenient for mobile device users to directly click to dial:<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a> - Email address is clickable:Similarly, email addresses can be used
mailto:agreements:<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a> - Reasonable layout and style:Ensure that the contact information is displayed well in the page header, footer, sidebar, or a dedicated "Contact Us" page, and maintains the design style consistent with the overall website.
- Responsive design:Especially for phone numbers and QR codes, it should ensure that they are clear and easy to operate on different devices (PC, mobile phone, tablet).
Through the "Contact Information Settings" feature and its powerful template tags of AnQiCMS, 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 more smooth and convenient communication channel.
Common Questions (FAQ)
Q1：Can I name my custom contact information field freely? For example, 'My phone number'?A1: When adding custom parameters in the "Contact Information SettingsMyPhoneNumber。System will automatically convert it to camel case for storage and invocation. Using English naming will better compatibility with template parsing and avoid potential issues.
Q2: I have set up 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 did not call this field correctly in the template, or it was called in the template but hidden by CSS styles. Please check if you used the correct{% contact with name="您设置的参数名" %}Tag, and ensure the tag'snameThe value is exactly the same as the 'parameter name' you set in the background (note the case). In addition, also check the browser developer tools to see if the element is affected by CSSdisplay: none;Hides 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 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. In the template, the same is true.{% contact with name="Facebook" %}or{% contact with name="Twitter" %}Call tags as needed.