---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/add-forms'
title: 'フォームを追加する | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:52:08+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  メッセージ横に申込フォームを1セクションに置きます。フォームはDrupalブロックなので、
  公開中の任意ウェブフォームをこの方法で置けます。既存ページ内のフォームにはこの
  ページを使います。住所、地図、営業時間付き全ページにはお問い合わせページを作るを
  ご覧ください。
  動画では健康クリニック向けニュースレター申込を作ります。
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: |-
        メッセージ横に申込フォームを1セクションに置きます。フォームはDrupalブロックなので、
        公開中の任意ウェブフォームをこの方法で置けます。既存ページ内のフォームにはこの
        ページを使います。住所、地図、営業時間付き全ページにはお問い合わせページを作るを
        ご覧ください。
        動画では健康クリニック向けニュースレター申込を作ります。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:52:08+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/ja/hc/documentation/learn-dxpr-builder/tutorials/add-forms'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/add-forms'
      description: |-
        メッセージ横に申込フォームを1セクションに置きます。フォームはDrupalブロックなので、
        公開中の任意ウェブフォームをこの方法で置けます。既存ページ内のフォームにはこの
        ページを使います。住所、地図、営業時間付き全ページにはお問い合わせページを作るを
        ご覧ください。
        動画では健康クリニック向けニュースレター申込を作ります。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: ホーム
            item: 'https://dxpr.com/ja'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ja
---
[Help Center](/ja/node/75)/[Documentation](/ja/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

- [お問い合わせページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/contact-page)
- [Drupal Blocks](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks)

メッセージ横に申込フォームを1セクションに置きます。フォームはDrupalブロックなので、 公開中の任意ウェブフォームをこの方法で置けます。既存ページ内のフォームにはこの ページを使います。住所、地図、営業時間付き全ページには[お問い合わせページを作る](/ja/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**をクリックし、**Layout**タブから**Section**を選びます。
2. セクションにホバーして**More** > **Settings**を開きます。**Style**パネルを開き、薄灰色**Background**を選んで**Save**をクリックします。

## 手順2: 2カラムを追加する

1. セクションの**+**をクリックして**Row**を選びます。2つの均等カラム付きで新ローが入ります。ここで欲しい分割です。

## 手順3: 申込メッセージを書く

1. 左カラムの**+**をクリックし、**Content**タブから**Text**を選びます。
2. 「メールで健康のヒントを受け取る」と入力し、ツールバーから**Heading 2**にします。
3. 申込者が得る内容と頻度の1行を追加し、**Save**をクリックします。

## 手順4: フォームを挿入する

1. 右カラムの**+**をクリックします。
2. 開くのは**Drupal Blocks**タブです。
3. フォームのブロックを選んで設定ダイアログの**Save**をクリックします。フォームがカラムに描画します。

## 手順5: 保存してプレビューする

1. ビルダーツールバーの**Save**をクリックします。
2. ビューメニュー (**eye icon**、目のアイコン) を開き、メッセージ横のフォームを見るには**Preview**を選びます。

## フォームの入手先

動画にはありません。

- **Webformモジュール**: 公開中の全ウェブフォームが**Drupal Blocks**タブに「Block: DXPR builder: Webform:」付き名で並びます。名を**Search**に入力するか、**Filter by category**下で**DXPR builder**を選びます。
- **コアContactモジュール**: **Structure** > **Contact forms**のフォームに独自ブロックはありません。コントリビュートContact Blockモジュールが同じタブに**Contact block**を追加します。

## フォームのスタイル

動画にはありません。フォームはテーマのスタイルを使います。変更には次の通りです。

- ブロックの**General**パネルの**HTML classes**下にクラスを追加し、そのクラスをテーマでスタイルします。
- ブロックの**Style**パネルでフォーム周囲のマージンとパディングを設定します。

## 表示結果

灰色帯の左に見出しと1行テキスト、右にフォームが載ります。プレビューでフォームは訪問者向け通り動き、送信はフォーム独自ハンドラーへ行きます。作業続行は目メニューの**Edit**を選びます。

## フォームが表示されない場合

- **ウェブフォームがDrupal Blocksタブにありません。** ビルダーは公開中ウェブフォームだけ挙げます。**Structure** > **Webforms** (`/admin/structure/webform`) を開き、フォーム状態を**Open**にします。
- **Drupal Blocksタブがないか空です。** ビルダーはコア**Block Content**モジュールオン時にだけブロックを挙げます。**Extend** (`/admin/modules`) でオンにします。
- **訪問者にはフォームのあるべき場所が空カラムに見えます。** ブロックは送信不可の人からウェブフォームを隠します。ウェブフォームの**Access**設定でそのロールの送信作成を許可します。
- **再読み込み後に変更が消えています。** ビルダーツールバーの**Save**をクリックする前にページを離れました。Saveがエラーを出す場合、[変更が保存されない](/ja/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)をご覧ください。

## 次はこちら

- [お問い合わせページ](/ja/hc/documentation/learn-dxpr-builder/tutorials/contact-page): フォーム、地図、営業時間付き全ページ用
- [Drupalブロック](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks): ページに置ける全ブロック用