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

公開日: : 最終更新日:2020/09/01 wordpress

ワードプレスのロゴ

ショートコード設置まで

.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>

参考(ありがとうございました!

Googleアドセンスレスポンシブ

関連記事

ワードプレスのロゴ

WordPressを静的htmlから一部読み込む宣言3つ

記述場所 htmlファイルの最上部に <?php require_once('pa

記事を読む

[mac] wordpress用に投稿する画像をまとめてリサイズする

まぁ別にwordpress用に限らないんですが、画像をまとめてリサイズしようとしたときに何が

記事を読む

ワードプレスのロゴ

仕事でWordPress構築を依頼されたら確認することリスト

コピペ用   サイト名 管理者のメアド https化するにあたりSS

記事を読む

codepen

CodePen で jQuery設定

html、css、Javascriptのコードを書いたら画面半分に動作結果を表示してくれて、しか

記事を読む

ワードプレスのロゴ

contact form 7 送信ボタンでリセットされる→送信ボタンがぐるぐるまわって終わらない

環境:静的htmlにcontact form 7 をショートコードで埋め込み WPのテーマ使わ

記事を読む

no image

WordPress を IIS環境へ引っ越しする手順 – コンテンツインポート編

WordPress を IIS環境へ引っ越しする手順 – 環境構築編 と、 Word

記事を読む

ワードプレスのロゴ

WordPressの自動バージョンアップは マイナーバージョン(3桁目)のみ行われる

  x.y.zの場合、自動アップデートされるのはzのバージョンだけという認識で合

記事を読む

ワードプレスのロゴ

WordPressでイメージファイルが読み込めないのはBasic認証がかかってるからかも。あとhttpsし忘れ(コレ大事)

事象 WordPressで作成したサイトを、見る環境によって表示されたりされなかったりする。

記事を読む

ワードプレスのロゴ

本番で公開しているWordPressのコピーをDockerで作る際のポイント

基本 ファイルとDBのバックアップを取得する。 バックアッププラグイン(BackWPUpとか

記事を読む

ワードプレスのロゴ

WordPress アドレス (URL) を変更してしまった【解決】

状況 ダッシュボードを開こうとすると、wp-login.php Not Found となった。

記事を読む

Googleアドセンスレスポンシブ

Message

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Googleアドセンスレスポンシブ

PostgreSQL_logo.3colors.540x557
data directory “/var/lib/pgsql/9.3/data” has wrong ownership

  事象 postgresqlが起動しない。 ログ

PostgreSQL_logo.3colors.540x557
postgresql-9.3 が停止していますが PID ファイルが残っています

  ディレクトリやバージョンなどは環境によって違うと思

macとなんかかわいいやつ
カシモ当月解約は20日までの申込みが必要

カシモ解約した WiMax使ってたんだが、新型コロナウイルスの影

css-logo
自分がいいと思ったサイトさんのhtml css リンク

  css ニューモーフィズムのジェネレータ ht

html5-logo
html5のsectionとarticleの使い方と順番

とりあえずこちらのイメージを参考にやっていこうかと思う。

→もっと見る

PAGE TOP ↑