How to display a company's contact information on the front-end page, including custom fields?

It is crucial to clearly and conveniently display a company's contact information in website operation.It not only enhances the visitor's trust in the website, makes it convenient for potential customers to consult, but is also the foundation for promoting business transformation.AnQiCMS (AnQiCMS) understands this and provides powerful and flexible features that allow you to easily manage and display various corporate contact information on the website front end, including custom fields.

One, background configuration: Establish your corporate 'contact book'

In AnQi CMS, all contact information is concentrated in the "System Settings" under the "Contact Information Settings" module. This is the core area where you define the company's external contact window.

1. Core Contact Information

After logging into the backend, click on the "System Settings

  • Contact:Generally, this is the name of the business person you want to publish to the outside (e.g., Mr. Wang).
  • Contact Phone:Visitors can communicate with you directly by phone, and it is recommended to fill in a convenient contact number.
  • Contact address:The location of your company or usual office address, which helps visitors understand your geographical location.
  • Contact Email:An important channel for email communication.
  • WeChat ID/QR code:In the domestic market, these two fields are convenient ways for customers to add WeChat friends and scan to follow.

These fields are the basic information that the website displays to the public and provides services, please fill in the details according to the actual situation.

2. Flexible Expansion: Customize contact information

With the globalization of business or special requirements, you may need to display more diversified contact methods, such as WhatsApp, Skype ID, etc.The AnQi CMS provides a "Custom Parameter" feature, allowing you to freely add new contact fields according to the template's call needs.

Below the "Contact Settings

  • Parameter name:This is the name used when calling the front-end template. For example, if you want to add a WhatsApp contact method, the parameter name can be set asWhatsApp.
  • Parameter value:The specific content stored by the parameter name, for example, your WhatsApp number.
  • Note:Convenient for you to record the purpose of the parameter, which will not be displayed on the front end.

In this way, you can infinitely expand your corporate contact methods to meet the needs of different scenarios and users.

2. Front-end display: Make it easy for visitors to find you.

After you configure all the contact information in the background, the next step is how to display it on the website's frontend page. Anqi CMS provides simple and efficient template tagscontactTo achieve this goal.

1. Core Tool:contactTag

contactThe tag is used to retrieve all information from the "Contact Settings" on the backend page. Its basic usage method is:{% contact 变量名称 with name="字段名称" %}.nameThe property is used to specify the specific contact information fields you want to retrieve.

2. Calling standard contact methods

For example, see how to call them in your template using several common fields:

  • Display contact phone number:

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

    This has been usedtel:Protocol, visitors can make a call by clicking,rel="nofollow"Can be added according to SEO strategy.

  • Display contact address:

    <span>地址：{% contact with name="Address" %}</span>

  • Display contact email:

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

    mailto:The agreement allows visitors to send an email through the email client by clicking.

  • Display WeChat QR code:

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

    srcThe attribute is used to specify the link of the QR code image.

3. Show custom contact information

It's as simple to call a custom contact method as it is to call a standard field, the key isnameThe value must match the parameter name set in the "Custom Settings Parameters" on the backend.

  • Display WhatsApp number:If you set the parameter name of WhatsApp in the backgroundWhatsAppThen you can call it on the front end:
    
<a href="https://wa.me/{% contact with name="WhatsApp" %}" target="_blank" rel="nofollow">
    WhatsApp：{% contact with name="WhatsApp" %}
</a>
    Usewa.me/The link can directly jump to the WhatsApp chat.

4. Organize page layout

These contact methods can be flexibly placed in any location on your website. The most common and recommended practices include:

  • Website footer (Footer):Place the core contact information (phone, address, email) at the bottom of the website for easy access by visitors while browsing any page.
  • Contact us page: On a dedicated contact page, all contact information can be listed in more detail, including maps, message forms, etc.
  • Website header or sidebar:For the most important contact number or consultation entry, consider placing it at the top or side bar of the website to make it more prominent.

To avoid repeating the same code on each page, you can put these contact details into a template snippet (for example_partial/contact_info.html)，then use{% include "_partial/contact_info.html" %}Labels are referenced in the required display location, greatly improving the maintainability of the template.

3. Advanced Techniques and **Practice**

1. Conditional judgment: display content only when it exists.

To make the page display cleaner, you can use the conditional judgment feature of the Anqin CMS template to display the corresponding code block only when there is content in a contact method.This avoids the appearance of blank labels or unattractive text on the page due to a field not being filled in.

For example, it is displayed only when the WeChat QR code image is uploaded on the backend:

{% set wechatQrcode = "" %} {# 先定义一个变量 #}
{% contact wechatQrcode with name="Qrcode" %} {# 获取二维码URL并赋值给变量 #}
{% if wechatQrcode %} {# 判断变量是否有值 #}
    <div class="wechat-qr">
        <img src="{{ wechatQrcode }}" alt="微信二维码" />
        <p>扫码添加微信</p>
    </div>
{% endif %}

This method can ensure the dynamic adaptability of page content and improve user experience.

2. Distinguishing global information and contact information

In addition to AnQi CMScontactTags are also used to obtain contact information, as well assystemTags are used to obtain global system settings (such as website name, filing number, etc.). Although both can configure custom fields, it is recommended to configure fields related to corporate contact information uniformly in the "Contact Information Settings" and throughcontactLabel calling. This can keep the background settings logic clear, and it is also convenient for future management and maintenance.

By following these steps, you can easily, flexibly, and professionally display your business contact information on the front end of the website with the strong support of Anqi CMS, including various customizable communication channels, thus better serving your visitors and customers.

Frequently Asked Questions (FAQ)

1. I filled in the information in the "Contact Information Settings" on the backend, why isn't it displayed on the frontend page?

This usually has several reasons:

  • The template has not been called:You need to use the correct tags in the frontend template (such as the footer, contact us page) to call this information. Only filling it in the background will not automatically display on the frontend.{% contact ... %}Caching issue:
  • Cache problem:Clear the website cache or browser cache, as old page data can sometimes prevent new content from being displayed immediately.
  • Spelling error:Check the template inname="字段名称"of字段名称Is it consistent with the English name configured in the background (for preset fields) or the "parameter name" (for custom fields), including case.

How to display a contact phone number or email address on multiple pages (such as headers and footers) at the same time?

The most recommended practice is to encapsulate the code segment that displays contact information into a separate template file, for example in/template/您的模板目录/partial/contact_info.htmlwrite code. Then, on the pages where this information needs to be displayed (such asbash.htmlorindex.htmlUse it in{% include "partial/contact_info.html" %}tags to refer to it. This way, you only need to modify one file to synchronize updates to all pages referencing the template snippet.

3. Can AnQi CMS add other contact methods besides phone, email, and WeChat? For example, Skype ID or customer service hotline?

It is completely possible. The "Contact Information Settings" module of Anqi CMS supports the "Custom Parameter Setting" function. You can click the "Add" button to customize a parameter name (for exampleSkypeIDThen,