WordPressを利用して、ブログではなくCMSとして企業サイト・企業ウェブサイト作成・商用ホームページ制作のテクニックを公開。WordPressの最新ニュースやプラグインの紹介、自作プラグインやテーマも開発中。
複雑なお問い合わせフォームを作成するプラグイン cforms II

複雑なお問い合わせフォームを作成するプラグイン cforms II

cforms II » delicious:days
cforms II » delicious:days

お問い合わせフォームを作成するプラグインとして以前、お問い合わせフォームを簡単に作成するプラグイン Contact Form 7を紹介したが、Contact Form 7は簡単にお問い合わせフォームを作成できるが、checkboxやradioボタンが使えない等の制約(最新バージョンでは使用できる)があり、複雑な質問事項を含むようなお問い合わせフォームを作成することができない。そこで、より詳細なお問い合わせフォームの作成を可能にするプラグインが、cforms IIである。

このcforms IIは現在、バージョン6.0まで更新されており、積極的に機能拡張が進められている。Formタグを使った設定はほとんどできるのではないだろうか。しかしながら、日本語の翻訳ファイルはまだないので英語で使うしかない。日本語翻訳ファイルを作成したので、cforms II 日本語翻訳ファイルのページを見てほしい。

ダウンロードはcforms II » delicious:daysより行う。インストールは簡単で、圧縮ファイルを解凍すると、cformsというフォルダが作成され、その中にcontactformsというフォルダがある。pluginsフォルダにはcontactformsのみをアップロードし、有効化するだけである。管理メニュー欄にcforms IIが増えているはずだ。

cforms II メニュー

メニューには以下の四項目がある。

  • cforms II
  • Global Settings
  • Styling
  • Help!

お問い合わせフォームの作成はcforms IIで行う。

cforms II Form Name

最初にForm Nameを設定する。Form Nameと書かれた右横にYour default formとあるので、それを適当な名前に変更し、Update Settingsを押す。フォームを追加したい場合は、Add New Formのボタンを押すか、現在のフォームをコピーして追加する場合はDuplicate This Formボタンを押す。

cforms II Form Input Fields

次にフォームのInputフィールドを設定する。フィールドのオプション設定として、Required(必須項目)、E-Mail(メールアドレスチェック)、Auto Clear(カーソルを合わせると自動的に入力内容を消す)、Disabled(入力不可)を設定できる。フィールドには下記のものが設定できる。フィールドの順番はドラッグアンドドロップで変更できるので便利だ。

  • Text only (no input)
  • Single line of text
  • Multiple lines of text
  • Check Box
  • Check Box Group
  • Select Box
  • Multi Select Box
  • Radio Buttons
  • CC: option for user
  • Multiple Recipients
  • Visitor verification (Q&A)
  • Captcha verification (image)
  • File Upload Box
  • New Fieldset
  • End Fieldset

cforms II Redirection, Messages, Text and Button Label

フォームのフィールド設定が済むと、表示されるメッセージやボタンのラベルを変更する。そして、お問い合わせ内容を送るメールアドレスを設定し、送られてくるメールの形(HTMLメールも可能)を整形すれば、基本的なフォームの設定は終了である。

Global Settingsでは、Popup Date Picker(日付入力補助)、SMTP Server Settings(SMTPサーバーの設定)、Global File Upload Settings(ファイルアップロードに関する設定)などの設定をすることができる。

また、ここでぜひ設定しておきたいのが、Database Input Trackingの項目だ。Enable Database Trackingにチェックを入れて保存すると、管理メニューにTrackingが追加される。お問い合わせ内容がデータベースに保存されるため、WordPressの管理画面でも内容を確認することができる。万が一メールが届かなかった場合でも安心というわけだ。

cforms II スタイル設定

フォームのスタイルはStylingで設定できる。最初からいくつかのスタイルが同梱されており、これらをカスタマイズして使用してもいいし、新しくcssファイルを作成してもよいだろう。Basic CSS editorがついているので、その場で編集することもできる。

以上で、フォームの設定は終了である。あとは投稿画面、ページ作成画面で、<!–cforms–>を挿入するだけである。ビジュアルエディタを使用していれば自動でフォームを挿入できるボタンが追加されているはずだ。

cforms II ヘルプ

簡単ではあるがcforms IIの使用方法を紹介した。しかしながら、とてもじゃないが、すべてを説明しきれていない。ヘルプが充実しているので、詳しくはヘルプを参照してほしい。

Contact Form 7は簡単にお問い合わせフォームを作成でき、管理メニューが日本語化されているという点で利点がある。しかしながら、複雑なフォームを作成する場合はこのcforms IIがお勧めだ。カスタマイズするのが大変だが、より複雑なお問い合わせフォームを作成する必要がある場合はcforms IIを使ってみてほしい。

77 Comments

  1. kzktanakaさん、こんにちは。

    cforms IIを携帯で使用されたいとのことですが、調べてみた感じだと、コードの改変をしないとなかなか難しいかもしれません。

    お使いの携帯電話はauかソフトバンクでしょうか?”全ての必須項目を埋めてください”と出るのはおそらくemailのチェックで引っかかっているせいだと思います。

    cforms IIのFormタグを見ると、enctype=”multipart/form-data”が指定してあるのですが、これがあるとauとソフトバンクの場合POSTを自動的にURLエンコードしちゃうみたいです。そのため、emailアドレスの@が%40になってしまい、メールアドレスのチェックで必ずエラーが出るようです。

    この問題と文字コードの問題(Ktai StyleはデフォルトのテーマがSJISのようですが、cforms IIはUTF-8)もあると思うので、そこら辺を解決すればなんとか使えるようにはできるんじゃないかと思います。

    実際にコードをいじるところまではやってないので何とも言えないですが、参考にしてください。

    Wordpress Go Go
  2. 確認している携帯はauです。

    URLエンコードと文字コードの2点の問題ということですね。

    PHPはわからないのですが、チャレンジしてみたいと思います。

    kzktanaka
  3. Pingback: チリリズム» Blog Archive » お問い合わせフォームプラグイン

  4. 素敵なプラグインをご紹介頂きありがとうございます。
    ところで、ラジオボタンの選択を必須にしたいのですが、管理画面でタイプにラジオボタンを指定すると必須の選択ができない状態になってしまうんですね。
    これでお困りの方は他にもいるんじゃないかな?
    カスタマイズする方法があるなら、どなたか博識な方に教えていただきたいです。

    cko
  5. ckoさん、こんにちは。

    さて、ラジオボタンを必須にされたいとのことですが、確かにラジオボタンを必須項目に指定することはできないようですね。

    現状でなんとかするとすれば、ラジオボタンを最初からどれか一つ選択しておけばいいんではないでしょうか。そうすれば必ずどれか選ぶことになると思うのですが。

    まぁ、選んでない状態からユーザーに自発的に選ばせたい、という状況でのラジオボタンも無きにしも非ずなので、そうなるとソースの改良をするか、プラグインの作者の方に要望を出してみるか、になってくると思いますね。

    とりあえず参考まで。

    Wordpress Go Go
  6. 素晴らしいプラグインを有難う御座います。
    今年、6月からWPでサイトを再構築し、このcforms IIを使用していました。確か設置したときはVER8.6だったと思います。その当時は、綺麗なフォームに満足していましたが、その後最新バージョンがリリースされていますと表示されていたので、VER UPしたところ、CSSが全く反映されない状態になり、復旧使用と試みていますが、何が原因なのか・・・。

    VER UP後は、cforms II管理画面の中まで表示がおかしくなっています。

    周りに詳しいものがおりませんで、お手数お掛けしますが、考えられる原因を教えてもらえないでしょうか?宜しくお願いします。

  7. どうもこんにちは。

    cforms IIはver9.0で大きく仕様が変更されたので、バージョンアップの際に移行がうまく行われなかったのではないでしょうか。

    移行は画面の指示に従ってきちんと行いましたでしょうか?CSSが全く反映されていない、とのことですが、設定画面のスタイリングはきちんと設定されていますでしょうか。

    あとは、ヘッダーにcforms関連のソースがきちんと読み込まれているか、確認してみるといいと思います。

    Wordpress Go Go
  8. Pingback: 花風Milk-Tea* - WPサイトを始めました

  9. Pingback: 花風Milk-tea* - WPサイトを始めました

  10. 良いツールを教えていただいてありがとうございます!すごく便利なプラグインで、おまけに日本語化もされて、ということなしです!

    1つご質問させてください。
    携帯での文字化けについてなのです。自分で何とかしようと試みたのですが、できそうに無く、お知恵をお借りできないでしょうか。

    携帯電話で問い合わせを行うと(ktai styleを使用した形態サイトでもpcサイトでもどちらでも)携帯に返信される問い合わせ内容が文字化けしてしまい、こちらでコメント欄に記載されている対応を行っても直りません。

    また、文字化けは、送信内容全体ではなく、フィールドの値のみなのです。

    例えば、自動返信で、
    ———
    {yourname} //これは全角
    {email} //半角
    {コメント} //全角
    上記内容でお問い合わせを受け付けました。
    ———
    と送ると、
    お名前とコメントの内容のみ文字化けし、「上記内容でお問い合わせを受け付けました。」の文字やメールタイトルには文字化けはありません。

    いきなりコメントして、ずうずうしいお願いで恐縮ですが、困ってしまって・・・
    どのように対応すればよいか、アドバイスいただけませんでしょうか。
    よろしくお願いします。

    ton
  11. WordPress Go Go様
    早速のレスありがとうございます。

    >コメント欄に記載されている対応を行われたということですが、下記の変更を行われたのでしょうか。
    >https://wpgogo.com/development/translation_cforms_ja.html#comment-654

    そうです、そうです。
    この変更で、PCサイトでなら、携帯メールの送信も問題なくできるようになったのですが、携帯電話からのアクセスで(ktai STYLEを使用させていただいているのですが)送信されたメールが文字化けしてしまうのです。
    ヘッダを見てみると、Pcサイトのほうでは、Content-Transfer-Encoding: 7bit
    Content-Type: text/plain; charset=”ISO-2022-JP”
    と、エンコードが指定したとおりに変換されているのに比べ、携帯の方では、
    Content-Transfer-Encoding: base64
    Content-Type: text/plain; charset=”UTF-8″
    となっており、メーラーによってはヘッダの件名から読み出せていないものもあるので、どうも、エンコードの変換がうまくいっていないようです。

    lib_ajax.phpのL256あたりで、
    ———-
    if ( strtoupper(get_option(‘blog_charset’)) ‘UTF-8’ && function_exists(‘mb_convert_encoding’))
    $value = mb_convert_encoding(utf8_decode( stripslashes( $params[‘field_’ . $i] ) ), get_option(‘blog_charset’));
    ———-
    文字コードがUTF-8で無かった場合に一旦UTF-8へデコードしているのですが、nonajax.phpでは、L210あたりでその処理が入るべきなのにない、ということなのかな?と想像し、コードを入れてみたりもしたのですが、ダメでした。

    Content-Transfer-Encoding: base64
    となっているということは、添付ファイル扱いになってしまっているのでしょうか?(T_T)

    携帯サイトとPCサイトの違いは、エンコードだけだと思っていたので、違うヘッダーが書き出されているというのがナゾです・・・

    昨日からずっとコードとにらめっこしながらテストして、自分で分かった範囲はこの程度でした;;
    お力をお借りできると助かります。
    ご迷惑をお掛けしますはよろしくお願いします。

    ton
  12. なるほど携帯からのフォーム送信だったんですね。

    これは恐らく以前調べた時の問題に該当するんじゃないかと思います。

    https://wpgogo.com/plugin/plugin_cforms.html#comment-886

    最近なかなか忙しくて時間が取れないので、もし有料でもよろしければ対応させていただくことは可能です。

    詳しくはお問い合わせください。

    Wordpress Go Go
  13. Pingback: お問い合わせフォームを設置する | SOHOという名のひきこもり生活

  14. Pingback: wikeb » cforms II 日本語翻訳ファイル

  15. はじめまして。

    素晴らしいプラグインを有難う御座います。

    一つ質問させてください。

    現在、エックスサーバーとコアサーバーの二つのサーバーでサイトを運営しております。

    それで、コアサーバーの方は問題なく使えているのですが、エックスサーバーの方で二つ問題があり、先に進めなくなっております。

    まず、一つめがデータベーストラッキングを使用するにチェックを入れて反映させると、

    エラー: cformsトラッキングテーブル (cformssubmissions & cformsdata) が作成できませんでした。

    というエラーが出ます。

    もう一つが、送信しようとすると、「しばらくお待ち下さい」の所から動かない状況です。

    後者は、コアサーバーの時にも出た現象だったので、同じようにcforms.jsの中のvar sajax_uriを変更したのですが、ダメでした。

    サーバーによって動く動かないがあるのでしょうか?

    アドバイス頂ければ幸いでございます。

    何卒よろしく御願い申し上げます。

  16. はじめまして。良いプラグインですね!
    インストール、プラグインの有効化までさくさくできたのですが、
    管理画面からの
    フォーム設定
    グローバル設定…
    などをリンクすると、404 Errorになります。
    アドレスをみてみると、
    http://xxx.jp/wordpress/wp-admin/plugins/cforms-options.php
    このようなかたちです。
    プラグインのフォルダって
    wp-adminじゃなくてwp-contentじゃないですか…?
    そこでアドレスを
    wp-admin→wp-content
    にすると、
    Fatal error: Call to undefined function: get_option() in /~略~/wordpress/wp-content/plugins/cforms-options.php on line 8
    と表示されました。
    cforms-options.phpの8行目は
    $cformsSettings = get_option(‘cforms_settings’);
    となっております。
    同じような現象はでませんでしたか??

    tomo
  17. hirokiさん、
    どうもお返事遅くなりました。もう解決されているかもしれませんがお返事しておきます。

    サーバーによって使えたり使えなかったりするとのことですが、PHPやMySQLなどの環境が違えばもしかしたらそういうこともあるかもしれません。

    こちらの環境ではあまりそういうエラーが出たことはないのですが、なかなか解決しないのであれば、お問い合わせの方から実際の運用環境をお教えいただければ見てみたいと思います。

    また、cformsの配布もとのサポートフォーラムもぜひご覧ください。

    http://www.deliciousdays.com/cforms-forum/

    Wordpress Go Go
  18. tomoさん、
    どうもお返事遅くなりました。

    サブディレクトリ環境下でうまくcformsが動かないということでしょうか。

    一度プラグインを停止させて、再度有効化してみてもだめでしょうか。

    問題なく動くはずなのですが、バージョンは最新版をお使いですよね?

    上記の質問の回答と同じになるのですが、なかなか解決しないのであれば、お問い合わせの方から実際の運用環境をお教えいただければ見てみたいと思います。

    それではよろしくお願いいたします。

    Wordpress Go Go
  19. Pingback: フォーム - wondernote.jp

  20. Pingback: 簡単に登録フォームを作成する方法(しかもメール受取&DB保存) - StereoType.TV

  21. 大変お世話になります。
    おかげさまで、綺麗なフォームをHPに置くことができました。ありがとうございます。
    ひとつ質問がありまして・・
    cformsII で顧客(フォーム記入者)に
    内容のコピーを送信する方法はあるでしょうか?

    gori
  22. お世話になります。
    大変便利なプラグインのご紹介ありがとうございます。

    質問させてください。

    また、この質問はWordpressのForumでも質問させていただいたのですが、どなたからもアドバイスいただけなかったので、こちらにも書かせていただきました。
    何卒、ご了承ください。


    グローバル設定で、データベースインプットトラッキングで
    ・データベーストラッキングを使用する
    ・ダッシュボードに表示する
    をそれぞれチェックして、

    トラッキングフォームデータで、レコードを表示をクリックするのですが、
    「処理中です。お待ちください」のまんまです。

    レコードをダウンロードするをくりっくすと、
    「access restricted.」
    となります。

    送信済みデータ一覧を見たいのですが、何か他に設定をしないといけないのでしょうか?

    また、さくらインターネットのスタンダードプランを利用しているのですが、もしかしたらサーバーで何か制限がかかって、「access restricted.」などとでるのでしょうか?

    nobs1970
  23. Pingback: wordpress複雑なメールフォームを作る – cformⅡ -|zamuu::BLOG

  24. はじめまして。
    素晴らしいプラグインとその日本語化をありがとうございます。
    こちらで質問をさせていただいてよいものか分からないのですが、他に頼る相手もおらず、ネット上の情報も限られ・・・
    申し訳ありませんが、お知恵を拝借できたらと思います。
    オーダーフォームを作ろうとしていますが、
    テキストボックスのフォームの前でなぜか改行が入ってしまいます・・・?
    cforms.cssで幅や色は変えていますが、とくにレイアウトの部分はいじっていないのですが。

    WPは3.2.1
    テーマはTwentyTen
    です。
    もし、先に参照すべきサイトなどありましたら、そのような知識でもいいので、よろしくお願いします。

Comments are closed.