お問い合わせフォームのプラグイン

Wordpress

2023.03.24

contactform 7
SiteOrigin Widgets Bundle

contactform 7

ちょっと手を入れる必要があってここは私のメモとして書いておきます。

確認ボタンからの送信

プラグイン　Confirm Plus Contact Form 7　をインストールする。

Contact Form 7で、メールアドレスの確認用入力と一致チェック機能をつける

functions.phpに以下を記述。

CODE
add_filter( 'wpcf7_validate_email', 'wpcf7_validate_email_filter_extend', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_validate_email_filter_extend', 11, 2 );
function wpcf7_validate_email_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)){ //確認用メルアド入力フォーム名を ○○○_confirm としています。
            $target_name = $matches[1];
            if ($_POST[$name] != $_POST[$target_name]) {
                if (method_exists($result, 'invalidate')) {
                    $result->invalidate( $tag,"確認用のメールアドレスが一致していません");
                } else {
                    $result['valid'] = false;
                    $result['reason'][$name] = '確認用のメールアドレスが一致していません';
                }
            }
        }
    }
    return $result;
}

フォーム登録側には、

CODE
<label>メールアドレス
  [email* your-email]</label>
<label>メールアドレス（確認用）
  [email* your-email_confirm placeholder "確認のため再度入力してください"]</label>

確認用の項目名を『your-email_confirm』にする必要があります。

チェックボックスを縦並びにしたい

以下のコードをcssに追加する

CODE
span.wpcf7-list-item {
display: block!important;
}

フォームのサイズを変更したい

フォーム側で設定するには・・

CODE
お名前 (必須)

メールアドレス (必須)
[email* your-email size:80]

題名


メッセージ本文
[textarea your-message 80x]
[submit "送信"]

CSSで設定するには・・

CODE
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
width: 100%!important
}

//特定のフォームのみの場合
.wpcf7 input[name="your-name"] {
width: 100%!important
}

SiteOrigin Widgets Bundle

なんかいろいろパーツがあって便利なプラグイン。
Page Builder by SiteOrigin　というプラグインも合わせて入れるとめちゃめちゃ簡単にサイトが作れます。
いやもうデザインとか細かいとこにうるさくなければプロに任せなくてもいい。
仕事なくなるね。
この中にcontact formがあるけど、インストールした時にはまだactiveになってないので、下の画面を参考にactiveにして使ってみてください。

インストールした時にはまだactiveになってない

activeにする