フォームを追加する.

Learn DXPR BuilderBuild pagesVolg een tutorial

メッセージ横に申込フォームを1セクションに置きます。フォームはDrupalブロックなので、 公開中の任意ウェブフォームをこの方法で置けます。既存ページ内のフォームにはこの ページを使います。住所、地図、営業時間付き全ページにはお問い合わせページを作るを ご覧ください。

動画では健康クリニック向けニュースレター申込を作ります。

はじめる前に

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

次はこちら