How to obtain and display the contact information, such as phone number, address, and email of a website?

In website operation, a clear, easy-to-find contact method is a key factor in building user trust and promoting communication conversion.Whether seeking a partner for cooperation or a user in need of assistance, you can be quickly found through the contact information provided on the website.The AnQiCMS provides flexible and convenient functions for managing and displaying contact information, allowing you to easily obtain and display various contact details such as contacts, phone numbers, addresses, and email addresses.

1. Manage your contact information centrally in the background

The website contact information is centrally managed in Anqi CMS, making it convenient for you to configure and update uniformly. All contact information related to the website can be found in the "" menu of the back end.Backend settings" menu under the "Contact information settingsPage configuration.

On this page, you will see a series of predefined common contact fields, such as:

• Contact Person (UserName): It is usually the contact name you want to display externally.
• Contact Phone (Cellphone)：Your main contact phone number, users can call by clicking.
• Contact Address (Address)：The detailed address of the company, convenient for users to navigate or send items.
• Contact Email (Email)：The address used to receive user emails.
• 微信号（Wechat）：方便用户添加您的个人或企业微信。
• 微信二维码（Qrcode）：直接展示二维码，用户扫码即可添加。
• Additionally, there are various social media contact methods such as QQ, WhatsApp, Facebook, Twitter, Tiktok, etc.

If these default fields do not meet your business needs, Anqi CMS also provides powerfulCustomize settings parametersEnglish function.You can add any new contact methods as needed, such as 'customer service hotline', 'online consultation link', or specific business person in charge.ServiceHotline)，and fill in the corresponding "parameter value" (actual contact information). This greatly enhances the flexibility of contact information display.

II. Call and display contact information in the front-end template.

After you have completed the contact information setup in the background, the next step is to call and display it on the frontend page of the website. The Anqi CMS provides a special template tag for this.contactLabel, its usage is very intuitive and flexible.

contactThe basic syntax of label is: {% contact [变量名称] with name="字段名称" %}.

• nameThe parameter is the core you need to pay attention to, it corresponds to the English identifier of the field in the background "Contact Information Settings" (for exampleUserName/Cellphone/Address/Email), or the "Parameter Name" you set when customizing the parameter.
• You can optionally specify a "variable name" for the contact information obtained (for example,myContactPerson), so you can use it in the template code later{{myContactPerson}}Translate this value to English, making the code more concise. If there is no need for repetition, the variable name can also be omitted, and the label can be directly accessed and output within.

Let's see some common examples:

1. Display contact name:If you want to display the contact name on the page, you can call it like this:

   {% contact with name="UserName" %}
   

   Or assign it to a variable and output it:

   {% contact myContactPerson with name="UserName" %}
   <span>联系人：{{ myContactPerson }}</span>
   

2. Display contact phone number and add a dialing link:Contact numbers should not only be displayed, but usually also be convenient for users to directly click and dial.

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

   Here,rel="nofollow"The attribute helps inform the search engine that this is a clickable but not recommended link for users.

3. Display the company's address:Display your detailed address directly on the page:

   {% contact with name="Address" %}
   

4. Display contact email and add an email link:Like phone numbers, email addresses are often set to be clickablemailtoLink.

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

5. Display WeChat QR code:If you have uploaded a WeChat QR code, you can display it in the following way:

   {% contact wechatQR with name="Qrcode" %}
   {% if wechatQR %} {# 建议添加判断，如果后台未上传二维码则不显示 #}
   微信扫码：<img src="{{ wechatQR }}" alt="微信二维码" style="width: 120px; height: 120px;">
   {% endif %}
   

6. Call a custom contact method (taking WhatsApp as an example):Assume you have customized it in the backgroundWhatsAppfield.

   {% contact whatsappNumber with name="WhatsApp" %}
   {% if whatsappNumber %}
   WhatsApp：<a href="https://wa.me/{{ whatsappNumber }}" target="_blank" rel="nofollow">{{ whatsappNumber }}</a>
   {% endif %}
   

   Here through{% if whatsappNumber %}Determine, make sure that the front-end will display this part of the content only when the WhatsApp number is set in the background, to avoid displaying empty content.

Three, integrate contact information into the website page

The contact information of a website is usually displayed in the footer, the "Contact Us" page in the top navigation bar, or as a separate sidebar module.You can combine the above tags based on the overall design of the website and user habits.

This is an example of integrating multiple contact methods into a 'Contact Us' area:

<div class="contact-info-block">
    <h3>联系我们</h3>
    <ul>
        <li>
            <strong>联系人：</strong> {% contact with name="UserName" %}
        </li>
        <li>
            <strong>电话：</strong> <a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a>
        </li>
        <li>
            <strong>地址：</strong> {% contact with name="Address" %}
        </li>
        <li>
            <strong>邮箱：</strong> <a href="mailto:{% contact with name="Email" %}" rel="nofollow">{% contact with name="Email" %}</a>
        </li>
        {% contact wechatAccount with name="Wechat" %}
        {% if wechatAccount %}
        <li>
            <strong>微信号：</strong> {{ wechatAccount }}
        </li>
        {% endif %}
        {% contact wechatQR with name="Qrcode" %}
        {% if wechatQR %}
        <li>
            <strong>微信扫码：</strong>
            <img src="{{ wechatQR }}" alt="微信二维码" style="width: 100px; height: 100px;">
        </li>
        {% endif %}
        {% contact customHotline with name="ServiceHotline" %} {# 假设后台自定义了"ServiceHotline" #}
        {% if customHotline %}
        <li>
            <strong>客服热线：</strong> {{ customHotline }}
        </li>
        {% endif %}
    </ul>
</div>

Through the above methods, you can easily manage and display all contact information of the website in the APT CMS, providing users with a convenient communication channel.Flexible backend configuration and simple template call tags make it possible for website maintainers to efficiently respond to business changes, update contact information at any time, and maintain the accuracy of website information.

---

Common Questions (FAQ)