お問い合わせページを作る.

Learn DXPR BuilderBuild pagesVolg een tutorial

ここではお問い合わせページを作ります。住所の地図、アイコン付き3つの連絡手段、 お問い合わせフォームです。メニューが「Contact」で指すページに使います。別ページ内に フォームだけ置くには代わりにページにフォームを追加するを ご覧ください。

動画では市議会のお問い合わせページを作ります。

はじめる前に

  • ロールが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がエラーを出す場合、変更が保存されないをご覧ください。

次はこちら