複雑なお問い合わせフォームを作成するプラグイン 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を使ってみてほしい。

このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

« ページ作成時にトラックバック・ピンバック送信を可能にするプラグイン Wordpress Trackback for Pages Plugin
画像のアップロードを簡単にするプラグイン Flexible Upload »

関連記事

Trackback URL

Trackbacks (1)

お問い合わせフォームが分からない…

木曜日のテスト開始を目指しているラクエコ。
しかし、色々な所が未だ手付かずのままです。
その一つが、「サービスに関する、お問い合わせフォームが無い」ということ。

Comments (29)

Hi and thanks for writing about cforms.
I’d love to being able to offer a Japanese translation file with it, so if you’re up for a little translation ‘challenge’ I’d be glad to send you the details. :-)

Thank you for contacting me.
I’m glad that you gave me a chance to translate your great plugin to Japanese.
I’m not a native speaker of English, so it may take time but let me try.
All I need to do is translate the cforms.pot included in the plugin to Japanese
and send the file to you?
Let me know if you have something else or the details.
I also sent an email to your address.
Thanks.

はじめまして。このエントリで知ったcforms IIをインストールし、フォームを制作したのですが、を挿入しても、とだけ表示され、フォームが表示されませんでした。ビジュアルエディタにフォーム挿入ボタンも表示されなかったのですが、これはどういった原因が考えられますでしょうか?
もし分かりましたら、教えて下さい!!

どうもこんにちは。TATAMIさんのページを拝見させていただきましたが、ビジュアルエディタで手入力でcformsのコードを挿入されたのだと思います。ビジュアルエディタでは、HTML のマークアップ用文字を自動的にHTMLエンティティに変換するようです。そのため、ソースを見ていただければわかるのですが、’<’ (小なり) は ‘&lt;’や’>’ (大なり) は ‘&gt;’に変換されていると思います。なぜ、ビジュアルエディタにフォーム挿入ボタンが表示されないのかはちょっとわかりませんが、コードエディタでcformsのコードを挿入してみてください。恐らくうまくいくのではないでしょうか。

で、できました!!
ありがとうございます!!
今後とも参考にさせて頂きます!!

はじめまして、こんにちは。cforms IIについて少し質問させてください。「フォームのスタイルはStylingで設定できる」ということで、スタイリングでcssファイルを選択し更新すると「新しいテーマが選択されました。」と表示されるのですが、ページを表示させても変わりません。なにか見落としているのでしょうか。単純に入力フィールドを横に長くしたいだけなのですが、どのファイルを変更すれば良いか教えていただけないでしょうか。よろしくお願いします。

どうもこんにちは。フォームのスタイルがうまく変更されないとのことですが、フォームスタイル選択で*****.cssを変更するとプレビュー画面は変わりますか?プレビュー画面は変わるけど、実際のページを見てみるとスタイルが変わっていないということでしょうか?入力フィールドを横に長くするにはスタイルシートを修正する必要があります。個々のスタイルシートで若干異なるかもしれませんが、.cform inputという項目があると思うので、widthをお好みのサイズに指定なさればよいと思います。編集はローカル側で行ってアップロードしてもかまいませんし、ベーシックCSSエディター上でもできると思います。

ありがとうございました。お礼が遅くなりました。プレビュー画面は変わり、「テーマファィルが変更されました」と表示もされますが、実際は変わっていないという症状でしたが、アドバイスいただいた.cforminputの部分を変更し、インストールからやり直した結果、見事に変更が反映されました。原因は自作のテーマファィルだったようです。お騒がせいたしました。メールや、添付ファィルの送信などもテストいたしましたが問題ありませんでした。大変ありがとうございました。

はじめまして。
このサイトでcforms IIを知り、早速導入してみたところ、プラグインのインストール、フォームの表示までは問題なくいけました。
しかし、何故かフォームからメッセージを送信できません。フォームに必要事項を入力し、送信ボタンを押しても、【少々お待ちください。】の文字が出たまま動かないのです。

環境は以下の通りです。
・サーバー:ロリポップ
・Wordpress MU最新版
・Cforms II 日本語化済み
・使用フォーム:デフォルトフォーム

必要事項を入力せず送信しようとすると、警告は出るので、プラグイン自体は動作しているのだと思うのですが…。
もし何かお心当たりがありましたら、教えていただけますとありがたいです。
よろしくお願いいたします。

こまめさん、こんにちは。
テストフォームを試させてもらいもしたが、FirefoxのFirebugによると

405 Method Not Allowed
The requested method POST is not allowed for the URL /index.html.

と出ました。文字通り、POSTメゾッドの使用が許されていない、というエラーのようです。WordPress MUでのcforms IIの動作は確認しておりますので、ロリポップのサーバーの問題か、WordPressの設定の問題か、ではないでしょうか。頑張って調べてみてください。

御礼が遅くなって申し訳ありません。

POSTメソッドの件ですが、ロリポップでは初期状態で許可されていないようでした。設定変更の方法を調べて、試してみることにします!

ご丁寧な回答をありがとうございました!おかげさまで手がかりが見つかりました!

手がかりとなってよかったです。
なんとか解決できるといいですね。
頑張ってください。

WordPressのルートディレクトリは/memoのようです。もしAjax(フォーム送信やCAPTHAリセット)で問題が生じるならcformsプラグインフォルダーにあるjs/cforms.jsファイルをチェックし、応じてsajax_uri変数をセットしてください。

との警告が出てきたのですが、jsファイルをどのように変更すればよいのでしょうか?
実際に使おうとするとフォーム送信やCAPTHAリセットでうまく動作しませんでした
具体的にはリセットのほうでは画像が変更されない、フォームから送信しようとするとワードプレスのコメント画面が表示され、「コメントを入力してください」とメッセージが表示されてしまいました

どのような変更を加えたらよいでしょうか?
ご助言いただけたらうれしく思います

kenさん、こんにちは。
サーバーがIIS ServerだったりするとAjaxがうまく動かない場合があるようですが、kenさんの環境はいかがでしょうか。

その場合、js/cforms.jsのsajax_uriを正しく設定する必要があるようです。どのようなURLで動いているのかも分からないので何とも言えないですが、
var sajax_uri = ‘/memo/’;
などと設定して試してみてはいかがでしょうか。

はじめまして。
以前の質問のスタイリングの件とかぶるのですが、フォームスタイル選択で「フォームのスタイルとなるテーマファイルを選択してください」という項目で「*****.css」を変更すると右のプレビューは変わるのですが、作成したフォームが変わりません。
また、オリジナルのCSSを作成しても何も変化はありません。
教えていただければ助かります!!
よろしくお願いします。

どうもこんにちは。
スタイルが変わらないとのことですが、実際に表示されるフォームのスタイルはcforms.cssのスタイルで表示されているのでしょうか?

可能性としては、CSSスタイルを無効にしているということはないでしょうか。スタイリングのピンク色のボタン「CSSスタイリングを完全に無効にします!」が押されていると設定したCSSが一切反映されない状態になります。

確認してみてください。

はじめまして。すばらしいプラグインですね!見つけて早速使わせていただこうと思って頑張っているのですが…残念ながらfnさんと同じ症状です。
・CSSスタイリングは有効です
・全くスタイルシートが適用されていない状態です

自分で手出しをしたせいでおかしいのでは?何もしない状態ではどうか…と思い、プリセットフォームの中の「Online Booking Form」をインストールして使ってみたのですが(日付選択のAjaxが使えるかどうかも試したかったので)、それも効いていない状態のようです。

スタイリングのページでスタイルを選択するとプレビュー画面は変わります。

ルートディレクトリではなくて、サブディレクトリに置いてあるので、そのせいかなと思わないでもないのですが…色々試してみて万策尽きました(私の万策はたかが知れていますが)。何かヒントをご教授いただければ助かります。

先ほど投稿したHapioです。解決しました。
なんと原因はheader.php内のテンプレートタグ<?php wp_head(); ?>でした。私はheader.phpをオリジナルで作っていたので、デフォルトで記述されている<?php wp_head(); ?>の存在など知りもしませんでした。(´ε`)
この魔法の一行ですっかり解決!すばらしいプラグインを思う存分使わせていただきます。ありがとうございます。
もしかしたら、fnさんも私と同じかも…と思い、再度投稿しました。お騒がせしました。

どうもこんにちは。

無事に解決されたようでよかったです。Hapioさんの場合、<?php wp_head(); ?>がなかったためにスタイルシートが読み込まれていなかったのでしょうね。うまくいかない場合は確認しないといけない項目ですね。

お返事が大変遅くなって申し訳ありません。
Wordpress Go Goさん、Hapioさんありがとうございます!!
「CSSスタイリングを完全に無効にします!」ボタンとで完全に解決できました!!いつの間にかを消してたみたいです。
やはり、デフォルトは見本になりますね。
本当にありがとうございます!!

無事に解決しておられたようで何よりです。
よかったですね。

こちらで紹介されているcforms IIがとてもよさそうなので早速試してみました。
ところが、Captchaがどうしても表示されません。フォーム設定画面でもCaptchaのフィールド部分が赤く表示されてしまっています。
どのようにすれば、表示されるようになりますでしょうか?
何か設定があるのでしょうか?

takaさん、こんにちは。
Captchaがうまく動かないとのことですが、cformsは最新バージョンをお使いでしょうか。WordPressは2.5でしょうか。
また、管理画面で何かしらのメッセージは表示されておりませんでしょうか。その他、何か設定を変更された点はございませんでしょうか。

またブラウザは何を使用しておられますか。異なるブラウザできちんと表示されるということはありませんか?クッキーの設定なども確認してみてください。

赤くなるといのはグローバル設定のCaptchaイメージ設定のプレビューが赤いのでしょうか?また、実際のフォームのCaptchaも赤いのでしょうか。

cforms II Support Forumも見てみてください。
http://www.deliciousdays.com/cforms-forum/?forum=all&value=captcha%251&search=1

こんにちは。
cformsを設置し、管理人さま作の日本語翻訳ファイルも利用して日本語化に成功したのですが、他の方も指摘されてる通り、「フォーム挿入ボタンが表示されない」という状態になりました。

本家のサポートフォーラムで調べてみると、「TiniMCE Advanceの最新バージョンをインストールすれば解決する」と書いてありましたが、何か別の方法はないかと思い、とりあえずwp-content/pluginにアップしていた「cforms-ja.mo」を削除してみたら、フォーム挿入ボタンが表示されてました。そのあと再度、cforms-ja.moをアップしましたが、ボタンはしっかり表示されたままでした。

何でcforms-ja.moを削除したことでボタンが表示されたのかは皆目検討はつきませんが、とりあえず作者である管理人さまにお伝えしたほうがいいかなと思い、コメントしてみました。
既にご存知でしたら申し訳ないです。

どうもこんにちは。

フォーム挿入ボタンが表示されなかった、とのことですが、最新バージョンのcformsをお使いでしょうか。

WordPressの場合、翻訳ファイルがプログラム自体に影響することはないんじゃないかな、と思ったりするのですが不思議ですね。

ビジュアルエディタを使用している場合、cformsの挿入ボタンはビジュアルエディタにしか表示されず、コードエディタには表示されないようですがこの現象とは違いますよね。

なかなか同じ状況を再現できないので何とも言えないですが、本体・翻訳ファイルともに最新バージョンのものを使うようにしてみてください。

よろしくお願いします。

先日こちらに「Captchaがどうしても表示されない」と書き込ませていただいたtakaです。
その後、色々調べて試してみたところ、サーバにphp-gdがインストールされていないことに気づきました(汗)。
インストールしたところ、無事Captchaが表示されました。
大変お騒がせ致しました。

どうもこんにちは。

なるほど。そういう理由でしたか。
盲点というかなんというか。
今後も同様の症状で悩まれる方もいるかもしれないのでご報告いただきましてありがとうございました。

cformsも翻訳ファイルも最新バージョンをダウンロードしました。ボタンが表示されなかったのは、ビジュアルエディタでのみではなくコードエディタでも同様でした。

翻訳ファイルは影響を与えないんですね…
それは失礼しました。汗
一体なんだったのでしょうかね。

どうもこんにちは。
本当に何が原因だったのでしょうかね。
また同様の不具合が発生するようでしたら
おっしゃってください。
今度は原因が特定できるといいですね。

Comment