--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/contact-page' title: '创建联系页面 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:23:58+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 这里构建联系页面：地址地图、三种带图标的联系方式和联系表单。用于菜单链接为 "Contact" 的页面。仅在另一页面内放表单，请遵循 向页面添加表单。 本视频构建市议会的联系页面。 tags: - 'Volg een tutorial' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 创建联系页面 description: |- 这里构建联系页面：地址地图、三种带图标的联系方式和联系表单。用于菜单链接为 "Contact" 的页面。仅在另一页面内放表单，请遵循 向页面添加表单。 本视频构建市议会的联系页面。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:23:58+0000' dateModified: '2026-10-24T09:09:48+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/contact-page' articleSection: 'Volg een tutorial' - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/contact-page' description: |- 这里构建联系页面：地址地图、三种带图标的联系方式和联系表单。用于菜单链接为 "Contact" 的页面。仅在另一页面内放表单，请遵循 向页面添加表单。 本视频构建市议会的联系页面。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 首页 item: 'https://dxpr.com/zh-hans' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: zh-hans --- [Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # 创建联系页面. Learn DXPR BuilderBuild pagesVolg een tutorial ## In this guide Related guides - [Video (embedded)](/hc/documentation/learn-dxpr-builder/elements/video) - [构建营销落地页](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) - [Drupal Blocks](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) 这里构建联系页面：地址地图、三种带图标的联系方式和联系表单。用于菜单链接为 "Contact" 的页面。仅在另一页面内放表单，请遵循 [向页面添加表单](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/add-forms)。 本视频构建市议会的联系页面。 ## 开始之前 - 您的角色有 **Edit with DXPR Builder** 权限。 - 联系表单以区块存在，例如用 Webform 模块制作的开放网络表单。 - 页面在页面构建器中打开。新页面请前往 **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`），然后点击 **Save**. - 新元素落在版块或列顶部。逆序添加列的元素，或之后拖拽到位。 ## 第 1 步：添加地图 1. 点击 **Add Elements** 在空白页面上并选择 **Section** 从 **Layout** 选项卡。 2. 点击 **+** 在版块上并选择 **Map** 从 **Content** 选项卡。 3. 输入您的 **Address**，设置 **Map height** 为 400 并点击 **Save**. 地图嵌入以地址为中心的 Google Maps。 ## 第 2 步：添加联系详情 1. 悬停版块并点击 **Add Section Below**。打开新版块的 **More** > **Settings**，选择 **Align text center** 在 **HTML classes**，然后浅灰色 **Background**：**Style** 面板。点击 **Save**. 2. 点击 **+** 在版块上并选择 **Row**；它带有两个等宽列。点击其网格图标（**Column layout**），选择 **1/3 + 1/3 + 1/3** 预设并点击 **Save**. 3. 点击 **+** 在第一列中并选择 **Text**。输入 "Visit us" 为 **Heading 3**，添加地址和营业时间，并点击 **Save**. 4. 点击 **+** 在同一列中并选择 **Icon**；它落在文本上方。选择 **Font Awesome Free Solid** 设置，搜索 `location-dot` 并点击图标。设置 **Size** 为 **Extra Large (2x)** 并点击 **Save**. 5. 在第二列用 “Call us” 和 `phone` 图标重复，第三列用 "Email us" 和 `envelope` 图标。 选择相同的 **Size** 为三个图标统一设置，以便行对齐。 ## 第 3 步：添加表单 1. 添加第三个版块，其中包含 **Add Section Below** 并为其提供 **Align text center** 类。 2. 点击 **+** 在版块上并打开 **Drupal Blocks** 选项卡。 3. 选择联系表单的区块并在其设置对话框中点击 **Save**；表单出现在版块中。 4. 点击 **+** 在版块上再次并选择 **Text**；它落在表单上方。输入 "Send us a message" 为 **Heading 2**，添加一行并点击 **Save**. 表单制作于 **Structure** > **Contact forms** (`/admin/structure/contact`） 在 Drupal 核心中没有对应区块。贡献模块 Contact Block 增加了一个 **Contact block** 到同一选项卡。 ## 第 4 步：保存并预览 1. 点击 **Save** 在页面构建器工具栏上。 2. 打开视图菜单（ **眼睛图标**），然后选择 **Preview**. ## 进一步了解 视频中未展示： - **Tap to call**：选择文本中的电话号码，点击工具栏上的链接按钮并输入 `tel:+31104001234` - **点击发邮件**：选择地址并将其链接到 `mailto:info@example.com` - **任何区块**：**Drupal Blocks** 选项卡嵌入网站上的区块，如搜索表单、订阅注册和自定义区块 ## 您会看到的内容 400 像素的地址地图填满页面顶部。下方灰带显示三个居中列，每列有图标、标题和您的详情。表单在居中的 "Send us a message" 标题下结束页面。 ## 如果您看不到如图所示的页面 - **地图显示错误位置。** Google Maps 按输入搜索地址。添加邮编、城市和国家到 **Address** 并再次保存。 - **您的表单不在 Drupal Blocks 选项卡中。** 页面构建器仅列出开放的网络表单，核心联系表单需要 Contact Block 模块。将网络表单的状态设为 **Open**：**Structure** > **Webforms** (`/admin/structure/webform`)。 - **图标大小不同。** 每个图标保留自己的 **Size**。打开每个图标的设置并选择同一个。 - **重新加载后更改消失。** 您在点击之前离开页面 **Save** 在页面构建器工具栏上。如果 Save 报错，参见 [更改无法保存](/zh-hans/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)。 ## 接下来做什么？ - [Video 元素](/hc/documentation/learn-dxpr-builder/elements/video) 以添加办公室虚拟游览 - [Landing page](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) 用于您的主要营销页面 - [Drupal 区块集成](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) 了解更多区块嵌入