静的htmlでContact Form 7を使用する

ワードプレスのロゴ WordPress
2020.08.19
スポンサーリンク

ワードプレスのロゴ

ショートコード設置まで

.htaccessの内容変更や、htmlソースの最上部（doctype宣言よりも上）に

<?php require('./xxxx/wp-load.php'); ?>
Markup

を記述する等、htmlでphpが動くようにしておきます。

wp_headとwp_footerを下記のように記述します。

<head>
略
<?php wp_head(); ?>
略
</head>
Markup
<body>
略
<?php wp_footer(); ?>
</body>
Markup

任意の場所にContact Form 7のショートコードを読み込みます。

<?php echo do_shortcode( '[Contact Form 7のショートコード]' ); ?>

参考（丸コピすんません

 

現在選択中のテーマから継承されたcssなど余計なモノ消す

CSS

参考 noteの記事

 

functions.phpに書かなくても、静的html側に書けば良い。

functions.phpでやっちゃうと、そのテーマ使うときにスタイルが崩れちゃうから。。

 

macのSafariでカレンダーが表示されないバグ修正

functions.phpに以下のコードを追記する。

上記は、もしかしたら

iPhoneXで日付のフォームが表示されない

事象も解決されるかも。

 

「メールアドレス」と「確認用メールアドレス」が合ってるかのチェック

テーマのfunctions.phpに以下を記述。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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;
}

 

で、Contact Form 7側の登録ページで

1
2
3
4
5
6
7
8
<tr>
<th>メールアドレス <span class="required">必須</span></th>
<td>[email* your-email]</td>
</tr>
<tr>
<th>メールアドレス確認 <span class="required">必須</span></th>
<td>[email* your-email_confirm placeholder "確認のためもう一度入力してください"]</td>
</tr>

参考（ありがとうございました！

スポンサーリンク

コメント

タイトルとURLをコピーしました