Hello everyone, as an experienced CMS operation person in the information security field, I know that clear and convenient contact information on the website is crucial for user experience and business conversion.Today, let's delve into the details of how to configure contact information in the Anqi CMS backend and display it flexibly and accurately on various positions of the website front end.
Configure website contact information: Back-end operation guide
In the Auto CMS, managing website contact information is an intuitive and powerful process. First, we need to enter the backend management interface for configuration.
To access the contact information settings, please log in to the Anqi CMS backend, find the "Backend SettingsHere, you will see a series of default contact information settings, including contact person, contact phone number, contact address, contact email, WeChat ID and WeChat QR code, etc.These fields are designed to meet the basic needs of most corporate websites.
You only need to fill in your contact information in the corresponding input box.For example, enter your contact name in the "Contact" field, and input your business phone number in the "Contact Phone".If your WeChat QR code is ready, you can directly click the upload button to upload the image.
It is worth mentioning that Anqi CMS also provides high flexibility, allowing you to add custom contact methods according to the specific needs of the website.In the "Custom Settings Parameters" area, you can click the "Add" button to create new contact information fields, such as "WhatsApp Contact Information", "Skype Account", or "Backup Email" etc.You need to set a 'parameter name' for each custom parameter as the identifier for template calls (it is recommended to use English), and fill in the corresponding 'parameter value'.Finally, you can add a "note" for easy management and understanding of the parameter's purpose in the future.Complete all information entry and adjustments, and then click the save button to ensure that the changes take effect.
Display contact information on the website front-end: Template Call in Practice
Once the contact information is properly configured in the background, the next step is to correctly reference and display these details in the website template. AnQi CMS provides a dedicated "Contact Information Tag" for this purpose.contact），enabling template developers to easily access these data.
Call the default contact method field
contactThe tag usage is very concise, you can use{% contact 变量名称 with name="字段名称" %}of the form to retrieve the value of a specific field. If the variable name is omitted, the tag will output the content of the field directly.
The following are several examples of commonly used contact information fields, which you can place in the header, footer, 'Contact Us' page, or any location where you need to display contact information:
To display the contact name, you can use:
<span>联系人：{% contact with name="UserName" %}</span>
If you need to display the contact phone number, you can write it like this:
<span>联系电话：<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a></span>
Here we have additionally addedtel:Protocol, convenient for mobile device users to click and dial directly, and it usesrel="nofollow"properties.
Display the contact email:
<span>联系邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></span>
Similarly,mailto:Protocol allows users to click and send emails directly.
Display WeChat ID:
<span>微信号：{% contact with name="Wechat" %}</span>
For WeChat QR code images and other image resources, you need to refer to them as images.srcproperties and pay attention to using.safefilters to ensure the correct output of HTML code:
<span>微信二维码：<img src="{% contact with name="Qrcode" %}" alt="微信二维码" /></span>
Through this method, the WeChat QR code image uploaded on the backend can be displayed normally on the frontend.
Call custom contact method field
If you have customized a new contact information field in the background, such as the previously mentioned "WhatsApp contact information", its "parameter name" isWhatsApp，then the way to call it in the template is similar to the default field, just need to callnamethe parameter value with your custom parameter name:
<span>WhatsApp联系方式：{% contact with name="WhatsApp" %}</span>
Contact information call in a multi-site environment
For a CMS system with multiple deployed sites, if you want to call contact information from another site's template, you can usesiteIdParameters can be used to specify the site ID. For example, the contact phone number of the site with ID 2:
<span>其他站点电话：{% contact with name="Cellphone" siteId="2" %}</span>
However, in most cases, you will display the contact information of the current site in the template of the current site, and it is not necessary to specifysiteIdParameter.
Content Optimization and Practical Suggestions
When displaying contact information, it is equally important to ensure the correct technical call as well as the presentation of the content.
Firstly, make sure that your contact information is up-to-date and accurate.The expired or incorrect contact information may confuse and frustrate users, severely affecting user experience.Regularly check this information, especially after business adjustments or personnel changes.
Finally, considering the needs of different user groups, we try to provide a diverse range of contact methods.For example, in addition to phone and email, WeChat, WhatsApp, online customer service, and others can meet the different usage habits of various users.Ensure that these links are clickable and can guide users to the correct communication channels.
Common Questions and Answers (FAQ)
1. Why is the contact information I set in the background not displayed on the front-end page?
This is usually due to the incorrect use of the templatecontactLabel was invoked, or the template cache was not updated in time. Please check if your template file includes the corresponding{% contact ... %}label, and make surenameThe parameter matches the field name set in the background (including custom fields).If the tags are used correctly, please try to clear the security CMS system cache to ensure that the latest data can be loaded.
2. Can I make different contact information display on different pages?
contactThe label retrieves the generic contact information settings for the entire site, which cannot be changed dynamically according to the page.If you need to display unique contact information on a specific page, consider directly inserting text or images into the page content editor, or create a separate contact page using the "single page" feature and embed the required information in the content.Another advanced method is to use custom fields, adding additional contact information fields in the backend content model for specific pages, and then calling these fields in the template of that page.
3. How can I add a click-to-dial/send email feature on the contact phone number or email?
You can use HTML in the template.tel:andmailto:to implement the protocol. For example, for phone:<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a>. For email:<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a>These protocols allow users to dial a phone number or start an email client directly by clicking a link on supported devices.