--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/contact-page' title: 'お問い合わせページを作る | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:52:31+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- ここではお問い合わせページを作ります。住所の地図、アイコン付き3つの連絡手段、 お問い合わせフォームです。メニューが「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: |- ここではお問い合わせページを作ります。住所の地図、アイコン付き3つの連絡手段、 お問い合わせフォームです。メニューが「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:52:31+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/contact-page' articleSection: 'Volg een tutorial' - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/contact-page' description: |- ここではお問い合わせページを作ります。住所の地図、アイコン付き3つの連絡手段、 お問い合わせフォームです。メニューが「Contact」で指すページに使います。別ページ内に フォームだけ置くには代わりにページにフォームを追加するを ご覧ください。 動画では市議会のお問い合わせページを作ります。 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 - [Video (embedded)](/hc/documentation/learn-dxpr-builder/elements/video) - [ランディングページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) - [Drupal Blocks](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) ここではお問い合わせページを作ります。住所の地図、アイコン付き3つの連絡手段、 お問い合わせフォームです。メニューが「Contact」で指すページに使います。別ページ内に フォームだけ置くには代わりに[ページにフォームを追加する](/ja/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**をクリックし、**Layout**タブから**Section**を選びます。 2. セクションの**+**をクリックし、**Content**タブから**Map**を選びます。 3. 入力するのは**Address**で、**Map height**を400にして**Save**をクリックします。 地図は住所中心のGoogle Mapを埋め込みます。 ## 手順2: 連絡先を追加する 1. セクションにホバーして**Add Section Below**をクリックします。新セクションの**More** > **Settings**を開き、**HTML classes**下で**Align text center**を選び、**Style**パネルで薄灰色**Background**を選びます。**Save**をクリックします。 2. セクションの**+**をクリックして**Row**を選びます。2つの均等カラム付きで入ります。グリッドアイコン (**Column layout**) をクリックし、**1/3 + 1/3 + 1/3**プリセットを選んで**Save**をクリックします。 3. 1つ目のカラムの**+**をクリックして**Text**を選びます。「お越しください」を**Heading 3**で入力し、住所と営業時間を加えて**Save**をクリックします。 4. 同じカラムの**+**をクリックして**Icon**を選びます。テキストの上に載ります。**Font Awesome Free Solid**セットを選び、`location-dot`を検索してアイコンをクリックします。**Size**を**Extra Large (2x)**にして**Save**をクリックします。 5. 2つ目のカラムに「お電話ください」と`phone`アイコンで、3つ目に「メールください」と`envelope`アイコンで繰り返します。 3つのアイコンは同じ**Size**にするとローが揃います。 ## 手順3: フォームを追加する 1. 追加するのは**Add Section Below**で3つ目のセクションで、**Align text center**クラスを付けます。 2. セクションの**+**をクリックし、**Drupal Blocks**タブを開きます。 3. お問い合わせフォームのブロックを選んで設定ダイアログの**Save**をクリックします。フォームがセクションに現れます。 4. セクションの**+**を再びクリックして**Text**を選びます。フォームの上に載ります。「メッセージをお送りください」を**Heading 2**で入力し、1行加えて**Save**をクリックします。 対象は**Structure** > **Contact forms** (`/admin/structure/contact`) 製のフォームで、Drupalコアのブロックはありません。コントリビュートContact Blockモジュールが同じタブに**Contact block**を追加します。 ## 手順4: 保存してプレビューする 1. ビルダーツールバーの**Save**をクリックします。 2. ビューメニュー (**eye icon**、目のアイコン) を開き、**Preview**を選びます。 ## さらに進む 動画にはありません。 - **タップで発信**: テキスト内の電話番号を選び、ツールバーのリンクボタンをクリックし、入力するのは`tel:+31104001234` - **クリックでメール**: アドレスを選び、リンク先は`mailto:info@example.com` - **任意のブロック**: **Drupal Blocks**タブはサイトのブロックを埋め込みます。検索フォーム、ニュースレター申込、カスタムブロックなどです ## 表示結果 住所の400ピクセル地図がページ上部いっぱいに広がります。下の灰色帯に3つの中央寄せカラムが並び、各カラムにアイコン、見出し、連絡先があります。フォームが中央寄せの「メッセージをお送りください」見出し下でページを締めます。 ## 図通りにならない場合 - **地図が違う場所を示しています。** Google Mapは入力通り住所を検索します。郵便番号、市、国を**Address**に加えて保存し直します。 - **フォームがDrupal Blocksタブにありません。** ビルダーは公開中ウェブフォームだけ挙げ、コアお問い合わせフォームにはContact Blockモジュールが必要です。ウェブフォームの状態は**Open**にし、**Structure** > **Webforms** (`/admin/structure/webform`) で設定します。 - **アイコン同士で大きさが違います。** 各アイコンは独自**Size**を保ちます。各アイコンの設定を開いて同じものを選びます。 - **再読み込み後に変更が消えています。** ビルダーツールバーの**Save**をクリックする前にページを離れました。Saveがエラーを出す場合、[変更が保存されない](/ja/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)をご覧ください。 ## 次はこちら - [Videoエレメント](/hc/documentation/learn-dxpr-builder/elements/video): オフィスの仮想ツアー追加用 - [ランディングページ](/ja/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing): 主要マーケティングページ用 - [Drupal Blocks連携](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks): ブロック埋め込み詳細用