Contact Form 7(コンタクトフォーム7)でフォームの作成 (その2)

2)既存フォームを複製してアレンジする場合

左サイドバー「お問い合わせ」> 複製したフォームにフォーカスして、「複製」をクリックする

フォームやメールの設定は 新規作成と同じになります。

通知メールの「タイトル」や「本文の挨拶文」の変更を忘れずに行ってください。

共通の注意点

1)項目の"name"は重複のないように、コピーして使いまわしたときに、必ず、"name"を変えること。下記赤字の部分は、項目の"name"となります

[text* name-kanji placeholder “例)鈴木 太郎"]

[text zip 10/8 id:zip placeholder “例)2720023"]

2)必須項目の設定は、ラジオボタン以外は項目追加のところでチェックすることが可能です。"*“(アスタリスク)は必須項目の印です。ラジオボタンには、最新バージョンだとデフォルドで必須項目になっています。

[text* name-kanji id:name-kanji placeholder “例)鈴木 太郎"]

3)項目を追加や削除したら、必ず通知メールにも追加や削除してください。

フォームをページに設置

コンタクトフォームのショートコードをテンプレートファイルに直接挿入することはできません。

ショートコードを do_shortcode() 関数に引数として渡して、その出力を表示する必要があります。次のように記載する

<?php echo do_shortcode('[contact-form-7 id="142" title="イベント申込"]'); ?>

サンキューページ設定

function.php に 以下のコードを追加します。

“73"は作成したフォームのIDです。"/c-thanks" はサンキューページURLです。

add_action( 'wp_footer', 'mycustom_wp_footer' );
 
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '73' == event.detail.contactFormId ) {
    	location = '/c-thanks/';
    }

}, false );
</script>

<?php
}

サンキューページを追加したい場合、以下を追加して、'フォームID' と 'サンキューページのURL'を書き換えること

  if ( 'フォームID' == event.detail.contactFormId ) {
    	location = 'サンキューページのURL';
  }

郵便番号から住所一部の検索入力

郵便番号のjs を読み込みが必要です。

読み込みは header.php の中に記載があります。

最近では 各ページの読み込みデータ量を減らすため、フォームを設置したページのみ、読み込みするように設定しています。

<?php if(is_page(array("contact"))){ ?>
<script>
$(function(){
	$("input[type=text]").change(function() {
		$(window).on('beforeunload', function() {
			return '入力内容が破棄されます。よろしいですか?';
		});
	});
	$("input[type=submit]").click(function() {
		$(window).off('beforeunload');
	});
});
</script>
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<?php } ?>

フォームを設置したページに郵便番号を適用したい場合

<?php if(is_page(array("contact"))){ ?>
↓ "sassi"を追加したい場合
<?php if(is_page(array("contact", "sassi"))){ ?>
// 郵便番号の自動検索のjsです。
デフォルドでテンプレートに入れますので、特に変更や修正がありません。
<script>
$(function(){
  $('#zip').keyup(function(){
    AjaxZip3.zip2addr(this,'','pref','addr');
  })
})
</script>

ただ、郵便番号と住所の項目は以下の形式のままでフォームに入れる必要があります。

==============
[text zip 10/8 id:zip placeholder "例)2720023"]
[text pref id:pref placeholder "例)千葉県"]
[text addr id:addr placeholder "例)市川市南八幡"]
[text addr2 id:addr2 placeholder "例)3-20"]
==============