Webformでテーブル形式にしたい

カテゴリ コンテンツの作成 コアバージョン 7.38 関連モジュール Webform

Webformはとても便利で、ある部分は標準ノード編集より使いやすい(ユーザーフレンドリー)なところがあり、U/Iの観点からノードを投稿するのではなく、一旦Webformで投稿し、自動的にノードを生成するような使い方もアリです。
Webform4からは、送信内容確認機能も追加され、Conditional(状態判定機能)、複数ページ機能と合わせると相当良いU/Iを作れます。

ただ、残念ながら、生成出力されるタグが<div>中心のため、表示崩れや、日本受けしないなどの理由から採用を躊躇してしまうこともあります。
CSSやテンプレートで頑張れば、それなりに対応できますが、Webform全てに対応するのは時間がかかります。

やはり、和風なテーブル表示形式に対応し、内容確認画面共々テーブル表示することで安定したフォームを作りたいものです。

コメント

ユーザー actbrain の写真

Webformのテーブル化は、下記手法で実現します。

1.hook_form_alter()でsubmission(フォーム)とpreview(内容確認)全体をテーブルでラップする。
2.各フォームを<tr>〜</tr>でラップする。

参考)下記のようなコードになります。

/**
* Implement hook_form_alter() {
*/
function モジュール名_form_alter(&$form, $form_state, $form_id) {
if (strpos($form_id, 'webform_client_form_') === 0) { // Webform client form?
// フォームをテーブル化する。
foreach (array('submitted', 'preview') as $type) {
if (isset($form[$type]) && is_array($form[$type])) {
$form[$type]['#prefix'] = '<table><tbody>';
$form[$type]['#suffix'] = '</tbody></table>';
_モジュール名_erase_title_display($form);
foreach ($form[$type] as $field_name => &$field) {
if (strpos($field_name, '#') !== 0 && is_array($field)) {
$label = $required = $display = $visibility = '';
if (isset($field['#title'])) {
$label = $field['#title'];
}
$required = !empty($field['#required']);
if ($required) {
$label .= '<span class="form-required" title="このフィールドは必須です。">*</span>';
}
if (!$label) {
$display = 'display: none;';
}
// tr.class.
$tr_class = str_replace('_', '=', $field_name).'-tr';
// th, td.
foreach (array('#prefix', '#suffix') as $t) {
if (!isset($field[$t])) {
$field[$t] = '';
}
}
$field['#prefix'] = str_replace(
array('[tr_class]', '[tr_style]', '[th_style]', '[label]'),
array($tr_class, $display, $visibility, $label),
'<tr class="[tr_class]" style="[tr_style]"><th style="[th_style]">[label]</th><td>'
).$field['#prefix'];
$field['#suffix'] .= '</td></tr>';
}
}
}
}
}
}

function _モジュール名_taxonomy_parents_push($tid) {
static $tree = array();
$term_name = '';
if ($term = taxonomy_term_load($tid)) {
$term_name = $term->name;

if (!isset($tree[$term->vid])) {
$tree[$term->vid] = array();
$t = taxonomy_get_tree($term->vid);
foreach ($t as $obj) {
$tree[$term->vid][$obj->tid] = $obj;
}
}
if (!empty($tree[$term->vid][$term->tid]->parents[0])) {
$term_name = _モジュール名_taxonomy_parents_push($tree[$term->vid][$term->tid]->parents[0]).($term_name? '-'.$term_name: '');
}
}
return $term_name;
}

ページ

OTHER FAQ

Drupal開発・運用の疑問/質問の答えはここに

無料ユーザー登録すると質問できます。

カテゴリ降順で並び替える Core Ver. 関連モジュール タイトル
Apache2.4 7.50 Apache2.4のアクセス制限
Calendar 7.34 Calendar CalendarモジュールとGoogleカレンダーを同期するには
CentOS 7.50 消せないファイルを消すには
Commerce 7.34 Commerce kickstart, Commerce file Commerceモジュール利用時のダウンロード製品登録方法
Commerce 8.6.x Commerce Payment Order Commerceで歴代購入数/金額を集計する方法
Commerce 8.6.x Commerce Payment Gateway オリジナルCommerce決済モジュール(Offsite)で決済サーバーへのPOST時のエンコードを変更する方法
Commerce2 8.6.x Commerce Shipment Commerceで配送情報を得る方法
Commerce2 8.6.x Commerce Order Commerceで注文情報から全Itemを得る方法
css 7.38 Webform Webfomの送信内容確認ページで表示が崩れる
CSV Download 7.34 Views Excel Export Drupal7:Viewsで表示した内容をCSVダウンロード
Custom module 8.3x Custom module Twig Block Cache カスタムモジュールのレンダリングを非キャッシュ化する方法
Database 7.34 PHP データベースクエリ(SELECT)時のSQL関数
Drupal Commerce 7.34 Commerce order Drupal Commerce:カート内や購入手続きページ内の「Order total」が翻訳できない
Drupal Commerce 7.34 Commerce profile Drupal Commerceの請求情報、配送情報の住所を日本的(郵便番号、都道府県、市区町村、住所、、、)
drush 7.54 Drush Drushでdrupalサイトをインストールする方法
Gmian 8.8.x Gmail Gmail:外部メールサーバー経由のメール送信ができなくなった場合の対処方法
Google 7.38 robots.txt Google Search Console Teamから「CSS および JS ファイルに Googlebot がアクセスできません」
GoogleMaps 7.28 Javascript IE9でGoogle Map APIを利用した住所情報所得がうまくゆかない
Initial 8.4x Subscriber hook_init() 〜 drupal_goto() を drupal8でやる方法
Japanese mail 7.15 Webform, Mail System, Mime Mail, Japanese Mail Helper Webformから文字化けしないメール送信を行うには

ページ