contactform7で確認画面実装手順メモ

毎回使うので、メモしとく。

①ライブラリのダウンロード

aulta様様のサイトより、jsとcssをダウンロードします。
http://aulta.jp/library/wordpress/contactForm7Confirm.html

②jsファイルの編集

contact-form7-confirm.jsを編集します。
編集方法は上記サイトに詳しく乗っていますが、こんな感じ↓

	var option = {
		pages : [
			{
				'path' : ['/contact/','/contact'],//ファイル名を入れる(複数の場合⇒ ['/inquiry/', '/inquiry2/', '/inquiry3/'])
				'button' : {
					'areaClassName' : 'btns',	//	<p class="btns">[submit "送信"]</p>
					'confirm' : '<input class="button-confirm" type="button" value="確認画面へ" />',	//	html
					'rewrite' : '<input class="button-rewrite" type="button" value="戻って編集" />'	//	html
				}
			}
		],

●【path】はコンタクトフォームを使用するページのファイル名。スラッシュの有り・無しにも注意。
とりあえず両方入れとく。

●【areaClassName】は送信ボタンを囲む要素のクラス名を指定。
contactform7の設定画面で↓のようにクラス名つけた要素で囲んでおくこと!

③contactform7でsubmitを囲む要素に②で設定したClass名をつける。

<p class="btns">[submit "送信"]</p>

④CSSの編集

contact-form7-confirm.cssでデザインの編集。

⑤jsとcssをリンク&アップロード。

head内でcssとjsをリンクして、アップロードすればOK!

とっても簡単ステキ!

 

 上手く行かないときは

●ヘッダとフッタにアレを読み込まないと変になるかも。

▼アレ

//</head>の前に
<?php wp_head(); ?>


//</body>の前に
<?php wp_footer(); ?>

 

●リンクちゃんとできてる?

●パスとクラス名合ってる?

 

 

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>