logo

パレット - カラフルに🎨

Palette — ビジュアルページビルダー、デザインの専門知識は不要です。

ライブデモ パレットをダウンロード

Scroll

Webform block モジュールと highslide モジュール。ブロック内のお問い合わせモジュール。

17/04/2025, by Ivan

このレッスンは古くなっています:

Colorbox Node モジュールを使う方がよいでしょう:

http://drupal.org/project/colorbox_node

モジュールの説明に使い方が書かれています。

このレッスンでは、Drupal のブロックにフォームを作成する方法を探ります。そのために、次のモジュールが必要です:WebformWebform blockContact form blocksContact(Contact モジュールは Drupal ディストリビューションに含まれています)。また、素敵な視覚効果とともに表示されるフォームの作成も試みます。まず、これらのモジュールを設定することから始めましょう。最初に、お問い合わせフォームを作成します。Site Building – Modules に移動して、Contact モジュールを有効にします。

drupal webform

お問い合わせフォームは your_site/contact のアドレスで利用できます。URL に「contact」を追加するか、管理メニューの Site Building – Contacts からフォーム設定にアクセスできます。

まず、お問い合わせカテゴリを追加します。企業サイトでは、マネージャー、技術サポート、ディレクターにメッセージを送れるべきで――それぞれに独自のカテゴリを持たせます。

Drupal webform

メールと自動返信ですべてのフィールドを記入します。ユーザーがお問い合わせフォームを訪れてメッセージを送るときに、このカテゴリをデフォルトに設定することもできます。

webform contacts

さて、your_site/contact に移動すると(便宜上メニューにリンクを追加できます)、メッセージを送れます:

Drupal webform in block

次に、サイトの他のユーザーがこのフォームを使ってメッセージを送れるように、Contact モジュールの権限を設定します。User Management – Permissions に移動して、登録済みユーザーと匿名ユーザーに必要な権限を設定します。

Drupal webform permissions

これで、ゲストもフォームを通じてメッセージを送れます。

ブロックにお問い合わせフォームを作成するには、Contact form blocks モジュールをインストールします。

Drupal webform block install

Contact Form Blocks モジュールをインストールすると、利用可能なブロックの中にお問い合わせフォームブロックが表示されるはずです。

Contact form block

お問い合わせフォームをメインコンテンツリージョンに配置するか、カスタムリージョンを作成してそこにブロックを配置できます。

Webform

では、お問い合わせフォームを別のブロックに配置しましょう。Webform block モジュールをインストールします。これは Webform モジュールを必要とします。

Drupal webform enable

Webform モジュールを使って新しいお問い合わせフォームを作成します。Drupal での webform 作成の詳細については、これまでのレッスンを参照してください。

Drupal webform install

Webform form blocks モジュールのおかげで、フォームをブロックに配置する選択肢ができました。

Drupal webform in block

設定を保存します。お問い合わせフォーム付きの新しいブロックが、ブロック一覧に表示されます。

Highslide

お問い合わせフォームをブロックに表示する方法を学びました。次に、視覚的なオーバーレイ効果を使ってフォームを表示してみましょう。そのために、Highslide モジュールを使えます。インストールするには、ImagecacheImage API モジュールが必要です。モジュールを有効にする前に、http://highslide.com/download.php から Highslide JS ライブラリをダウンロードし、highslide/highslide フォルダーに配置する必要があります。例付きのバージョンをダウンロードした場合は、highslide.js ファイルを見つけて、それだけをコピーします。highslide.min.js を使うこともできますが、コピーする前に highslide.js に名前を変更してください。

Highslide モジュールの README.txt ファイルを開くと、使い方の説明があります:

$options['attributes'] = array('class' => 'highslide-ajax-link');
$options['fragment'] = 'node-1';

ここからクラス名を取ります――highslide-ajax-link クラスを持つ任意のリンクは、Highslide 効果を使って開かれます。また、表示したいページ要素のフラグメント ID をリンク URL に追加します。

ブロックを作成して、次のコードを追加しましょう:

<a href="<?php print base_path(); ?>
contact#contact-mail-page" class="highslide-ajax-link">Contact Us</a>

contact-mail-page – お問い合わせフォームの ID。

highslide-ajax-link – Highslide モジュールの効果をトリガーするために必要なクラス。

このようにして、この視覚効果を使って任意のリンクやページの一部を表示できます。