As a website operator well-versed in AnQiCMS, I know that an easily accessible and content-rich 'Contact Us' page is crucial for enhancing user experience and promoting business development.Integrate such pages into navigation efficiently not only allows users to quickly find the information they need but also demonstrates the professionalism of the website and its emphasis on user needs.Below, I will elaborate on how to achieve this goal in AnQiCMS.
Create a single-page 'Contact Us' in AnQi CMS
Firstly, we need to create a dedicated single page for 'Contact Us' content in the AnQiCMS backend.This page will contain all contact information and can be added a comment form or other interactive elements as needed.
To start creating, please log in to the AnQiCMS backend management interface, then navigate to the 'Page Resources' section in the left menu, and click 'Page Management'.Here, you will see the list of all single-page lists on the current website.Click the "Add Single Page" button to enter the page editing interface.
In the popup form, you need to fill in several key pieces of information.The first is the "Page Name", here we usually fill in "Contact Us".This name will be displayed in the navigation on the backend and frontend.This is the core part of the page, known as 'single-page content'.You can use the powerful content editor of AnQiCMS to add text, images, videos, and other elements.For example, you can provide a detailed description of the company's address, service hours, and even photos of the team members.In order to facilitate management and unify style, we will later discuss how to dynamically insert contact information here.
An extremely important setting is “Custom URL”.AnQiCMS allows you to set a friendly URL path for a single page, which is very beneficial for SEO and user memorability.contact-usorcontactThis custom URL will take effect when the pseudo-static rules of the website are enabled, forming such aswww.yourdomain.com/contact-us.htmlSuch a link. Ensure that the URL you set is unique throughout the site, and the system will automatically check and prompt for duplicates.
Finally, in the "Single Page Template" option, you can choose to use the default single page template provided by AnQiCMS (usuallypage/detail.html），or create a dedicated custom template for the "Contact Us" page, such aspage/contact.htmlIf you choose to customize a template, please make sure that the template file exists in your theme template directory./template/your_theme/page/）in it, otherwise the page will not load properly. Custom templates can help you achieve more unique and personalized page layouts and styles.
After completing the settings, click "OK
Add the "Contact Us" page to the website navigation
After the single-page creation is completed, the next step is to integrate it into the website's navigation menu so that users can easily access it.
Please continue to operate in the AnQiCMS backend management interface, navigate to the "Backend SettingsThis displays all the navigation menus and their categories of the website.
Generally, you will have a category named 'Default Navigation' or 'Top Navigation', which is used for the main navigation bar of the website.You can choose to add a new navigation link under this category, or create a new navigation category to manage if your website design requires it.Click the 'Manage' button next to the navigation category you want to modify.
In the navigation link management interface, click "Add Navigation Link". At this time, a new form will pop up:
- Parent NavigationIf you wish 'Contact Us' as a top-level navigation item, please select 'Top-Level Navigation'.If you want it to be a submenu of an existing menu item, select the corresponding parent menu.
- Display Name: Here again fill in "Contact Us", this is the text the user sees in the website navigation.
- Link Type: This is a key step. Please make sure to select "Category Page Link".
- Select pageAfter selecting the 'Category Page Link', the system will pop up a page selector.Here, find and click on the 'Contact Us' page you just created.The system will automatically fill in the internal links of this page.
- Display OrderAccording to where you want 'Contact Us' to appear in the navigation bar, adjust the 'Display Order' value. The smaller the number, the closer to the front it appears.
After filling in, click “OK” to save the navigation link. Now, refresh your website's front-end page, and you will find that the “Contact Us” link has appeared in the navigation menu.
Optimize the content of the 'Contact Us' page.
To make the 'Contact Us' page more practical and professional, I strongly recommend using AnQiCMS dynamic content tags to fill in contact information and message forms.This can not only improve operational efficiency, but also ensure consistency of information.
In AnQiCMS, there is a 'Contact Information Settings' feature in the 'Background Settings'.Here, you can centrally manage contact information, such as phone numbers, addresses, email addresses, and social media links.{% contact %}Tags dynamically call them without manually modifying the page content.
For example, in the content editor of your 'Contact Us' page, you can add it like this:
- Contact:
{% contact with name="UserName" %} - Contact phone number:
{% contact with name="Cellphone" %} - Company Address:
{% contact with name="Address" %} - Email:
{% contact with name="Email" %}
This way, when the contact information on the backend changes, you only need to update the content in the 'Contact Information Settings', and all pages that call these tags will automatically synchronize the updates.
In addition, to facilitate users submitting inquiries directly through the website, you can integrate a feedback form on the "Contact Us" page. AnQiCMS provides{% guestbook %}Tags are automatically generated from the background configuration of the message form.After adding this tag to the page content, the website will automatically display a form containing the custom fields you have set in the background "Feature Management" -> "Website Message Management".This allows users to conveniently send messages, while you can manage all comments centrally in the background.
By following these steps, you not only successfully created and linked the 'Contact Us' single page in the AnQiCMS navigation, but also further optimized its content display, ensuring the accuracy of information and the interactive experience of users.This is crucial for building a user-friendly and feature-complete website.
Common Questions (FAQ)
1. I set a custom URL when creating the 'Contact Us' page, can I change it later?Of course, you can.To modify the custom URL of the 'Contact Us' page, simply go back to the 'Page Management' interface in the AnQiCMS backend, find the corresponding 'Contact Us' page, and click 'Edit'.In the editing page, find the 'Custom URL' field, modify it to the new path, and save.Please note that changing the URL may affect access to old links, it is recommended to check if there are any internal links that need to be updated or submit the sitemap to search engines after modification.
How to design a unique layout for the 'Contact Us' page that is completely different from the rest of the website?AnQiCMS supports specifying a custom template for individual pages.When creating or editing the 'Contact Us' single page, find the 'Single Page Template' option.contact_us_template.htmlThen, you need to navigate to the directory of the currently used theme template (usually,/template/您的主题名/page/Create this under【en】contact_us_template.htmla file, and write your exclusive HTML, CSS, and AnQiCMS tags in this file to build the page layout and style【en】
I want to add a Google Map or Baidu Map to the 'Contact Us' page to display my company's location. Does AnQiCMS support this?Yes, AnQiCMS fully supports embedding maps in pages. You can achieve this in two ways:
- Embed directly in the page contentGet the embed code provided by the map service provider (such as Google Maps, Baidu Maps) (usually a segment of code)
<iframe>Paste the code of the label), then copy it to the 'Contact Us' page's 'Single Page Content' editor in HTML mode. - Display dynamically through the templateYou can add a custom parameter in the "Contact Information Settings", for example named
MapEmbedCodeand set its value to the embedded code of the map. Then, in the custom "Contact Us" page template (such aspage/contact.html), use{% contact with name="MapEmbedCode" %}[en]Call and display the map dynamically. This way, even if the map code is updated, it only needs to be set once in the background.