---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/add-forms'
title: '向页面添加表单 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:23:36+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  这里您在一个版块中将注册表单放在消息旁边。表单是 Drupal 区块，因此任何开放的 webform 都可以这样放置。要在现有页面中放表单，请使用本页。要带地址、地图和开放时间的完整页面，请遵循 构建联系页面。
  本视频为健康诊所构建订阅注册。
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: |-
        这里您在一个版块中将注册表单放在消息旁边。表单是 Drupal 区块，因此任何开放的 webform 都可以这样放置。要在现有页面中放表单，请使用本页。要带地址、地图和开放时间的完整页面，请遵循 构建联系页面。
        本视频为健康诊所构建订阅注册。
      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:36+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/add-forms'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/add-forms'
      description: |-
        这里您在一个版块中将注册表单放在消息旁边。表单是 Drupal 区块，因此任何开放的 webform 都可以这样放置。要在现有页面中放表单，请使用本页。要带地址、地图和开放时间的完整页面，请遵循 构建联系页面。
        本视频为健康诊所构建订阅注册。
      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

- [创建联系页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/contact-page)
- [Drupal Blocks](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks)

这里您在一个版块中将注册表单放在消息旁边。表单是 Drupal 区块，因此任何开放的 webform 都可以这样放置。要在现有页面中放表单，请使用本页。要带地址、地图和开放时间的完整页面，请遵循 [构建联系页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/contact-page)。

本视频为健康诊所构建订阅注册。

  ## 开始之前

- 您的角色有 **Edit with DXPR Builder** 权限。
- 表单存在，例如用 Webform 模块制作的网络表单。
- 页面在页面构建器中打开。新页面请前往 **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`），然后点击 **Save**.

## 第 1 步：添加着色版块

1. 点击 **Add Elements** 在空白页面上并选择 **Section** 从 **Layout** 选项卡。
2. 悬停版块并打开 **More** > **Settings**。打开 **Style** 面板，选择浅灰色 **Background** 并点击 **Save**.

## 第 2 步：添加两列

1. 点击 **+** 在版块上并选择 **Row**。新行带两个等宽列到来，即此处需要的拆分。

## 第 3 步：编写注册消息

1. 点击 **+** 在左列中并选择 **Text** 从 **Content** 选项卡。
2. 输入 "Get health tips by email" 并设为 **Heading 2** 从工具栏。
3. 添加一行说明订阅者获得什么及频率，然后点击 **Save**.

## 第 4 步：插入表单

1. 点击 **+** 在右列中。
2. 打开 **Drupal Blocks** 选项卡。
3. 选择表单的区块并点击 **Save** 在其设置对话框中。表单在列中渲染。

## 第 5 步：保存并预览

1. 点击 **Save** 在页面构建器工具栏上。
2. 打开视图菜单（ **眼睛图标**），然后选择 **Preview** 以在表单旁看到消息。

## 表单来源

视频中未展示：

- **Webform module**：每个开放的 webform 都列在 **Drupal Blocks** 选项卡为 "Block: DXPR builder: Webform:" 后跟其名称。在 **Search** 中输入名称，或在 **Filter by category** 下选择 **DXPR builder**。
- **核心 Contact 模块**：其表单位于 **Structure** > **Contact forms** 没有自己的区块。贡献的 Contact Block 模块添加 **Contact block** 到同一选项卡。

## 设置表单样式

视频中未展示。表单采用主题样式。要更改：

- 在以下位置添加类 **HTML classes** 在区块的 **General** 面板，并在主题中设置这些类的样式。
- 设置区块表单周围的边距和内边距，位置为 **Style** 面板。

## 您会看到的内容

灰带左侧是标题和一行文本，右侧是表单。在预览中表单如访客所见工作，提交进入表单自己的处理器。选择 **Edit** 在眼睛菜单中以继续工作。

## 如果您看不到表单

- **您的网络表单不在 Drupal Blocks 选项卡中。** 页面构建器仅列出开放的网络表单。前往 **Structure** > **Webforms** (`/admin/structure/webform`）并将表单状态设为 **Open**。
- **Drupal Blocks 选项卡缺失或为空。** 页面构建器仅在核心 **Block Content** 模块开启。在以下位置打开它 **Extend** (`/admin/modules`).
- **访客在表单应在的位置看到空列。** 该区块向可能无法提交的人隐藏网络表单。允许其角色在网络表单的以下位置创建提交 **Access** 设置。
- **重新加载后更改消失。** 您在点击之前离开页面 **Save** 在页面构建器工具栏上。如果 Save 报错，参见 [更改无法保存](/zh-hans/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)。

## 接下来做什么？

- [联系页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/contact-page) 用于带表单、地图和开放时间的完整页面
- [Drupal 区块](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) 用于页面中可放置的每个区块