Contact Form 7のカスタマイズ いろいろ


年始には、あまりニッチすぎない話題を。

随時使って効果的だった小技を追加しています。

フォーム送信後にフォームを隠す方法

参照: http://wordpress.org/support/topic/plugin-contact-form-7-success-page-hide-forms

隠したい箇所を <div id=”hideform”> で隠す。id名とcssを合わせれば何でもok

Additional Settings (その他の設定) の箇所に
on_sent_ok: "document.getElementById('hideform').style.display = 'none';"
と入れる。

submitボタンを画像にする方法

参照:http://wordpress.org/support/topic/contact-form-7-customised-submit-button

画像以外にも色々、cssで編集

.wpcf7-form input {your style}

Style text area
.wpcf7-form textarea {your style}

Style submit button
.wpcf7-form input[type="submit"] {your style}

Style submit button on hover
.wpcf7-form input[type="submit"]:hover {your style}

submitボタンはショートコードで買いても良いが、テキストを空にするとデフォルト値が入ってしまうようだ。そこで、ボタンに文字を入れたい場合は、ショートコードを使わずに

<input type=”submit” value=”” class=”wpcf7-form-control wpcf7-submit” />

と入れればテキストなしで、画像ボタンにできる。

フォーム入力途中の内容を保存する

コンタクトフォームに記述中に、リロードやページを閉じてしまうと、その内容は消えてしまう。

それを回避するために、内容をlocalstorageに保存するだけのプラグインを作った:Contact Form 7でフォーム途中の内容をLocalStorageに保存するプラグイン

POSTやGETで渡されたパラメータをフォームに埋め込む

Contact Form 7 Dynamic Extensionを使う。他にも色々とできるので、入れておいて損はないプラグイン。

ただし、これだと、フォーム内に表示するだけということはできないようなので、そのときはContact Form 7でフィールドを表示するだけのプラグインを使う。表示はこれでして、フォームに埋め込むにはhiddenでDynamic Extensionを使うようにするのが便利だと思う。

Google Apps用メール設定

Contact Form 7とGoogle Appsメールの設定

全ページでcontact form 7のjsやcssがloadされるのを防ぐ

参照: http://fredrikmalmgren.com/only-include-contact-form-7-javascript-and-css-when-needed/

ファイルを添付する

参照: http://plug-em.in/?p=53

メールの確認入力欄を設置する (2013年3月17日追記)

メールの入力欄がhoge-emailの場合、確認用入力欄を hoge-email_confirmという名前にする。
functions.phpに以下を記述する:

add_filter( 'wpcf7_validate_email', 'wpcf7_text_validation_filter_extend', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_text_validation_filter_extend', 11, 2 );
function wpcf7_text_validation_filter_extend( $result, $tag ) {
    $type = $tag['type'];
    $name = $tag['name'];
    $_POST[$name] = trim( strtr( (string) $_POST[$name], "\n", " " ) );
    if ( 'email' == $type || 'email*' == $type ) {
        if (preg_match('/(.*)_confirm$/', $name, $matches)){
            $target_name = $matches[1];
            if ($_POST[$name] != $_POST[$target_name]) {
                $result['valid'] = false;
                $result['reason'][$name] = '確認用のメールアドレスが一致していません';
            }
        }
    }
    return $result;
}

すると、フォーム投稿時に、hoge-emailとhoge-email_confirmが一致するかチェックし、一致しない場合はwarningを出してくれる。

擬似的に確認ページをはさむ方法 (2013年3月19日追記)

フォームをsubmitすると、そのフォームの値がreadonlyになり、確認ページの役割を果たす。

WordPressの Contact Form 7 で確認ページを挟むためのjQueryプラグイン

ちゃんと動作しない場合は、上記リンクの注意を読むこと。

drop down要素でinsert_blankの表示値を帰る (2013年3月19日追記)

function gloc_replace_include_blank($name, $text, &$html) {
$matches = false;
preg_match('/<select name="' . $name . '"[^>]*>(.*)<\/select>/iU', $html, $matches);
if ($matches) {
$select = str_replace('<option value="">---</option>', '<option value="">' . $text . '</option>', $matches[0]);
$html = preg_replace('/<select name="' . $name . '"[^>]*>(.*)<\/select>/iU', $select, $html);
}
}

function my_wpcf7_form_elements($html) {
	gloc_replace_include_blank('wf_query_subject', '件名を選択してください', $html);
	gloc_replace_include_blank('UM_State', '都道府県を選択してください', $html);
	return $html;
}
add_filter('wpcf7_form_elements', 'my_wpcf7_form_elements');

参考: http://wordpress.org/support/topic/plugin-contact-form-7-set-include_blank-value-diff-than-?replies=4#post-3293514

その他

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL