当ページは、カスタム投稿「資料請求」で作成しています。カスタム投稿「資料請求」は、資料のダウンロードやメルマガ登録などを想定したカスタム投稿ページです。
カスタム投稿「資料請求」の設定
カスタム投稿「資料請求」は、メルマガ配信サービスのHTML埋め込みフォームやプラグインのショートコードに対応してます。
メール配信サービスのHTMLフォームの埋め込みから、カスタム投稿「資料請求」の編集画面下部にあるFrom actionタグ、input hiddenタグ、メールアドレス入力のタグ、送信ボタンタグをコピーしそれぞれの項目に反映します。
メール配信サービスを利用せず、WordPressのプラグインを使用する場合、ショートコードに対応したプラグインをインストール・有効化します。プラグインでフォームの設定が終わりましたらショートコードを入力します。
Contact Form 7のフォーム例
Contact Form 7の場合、フォームを登録するとショートコードが自動で形成されるのでコピーして入力してください。下記は、Contact Form 7のフォーム設定例です。
<h3>メルマガ登録</h3><div class="u-row u-row-wrap"><div class="form-mail">[email* your-email placeholder "メールアドレス"] </div><div class="form-submit">[submit "送信"]</div></div>
カスタム投稿「資料請求」の編集画面にあるカスタムCSSに、下記CSSを反映するとContact Form 7のフォームデザインが整います。
.form-mail { width: 100;}.form-submit { margin-top: 16px; width: 100%;}@media (min-width: 782px) {.form-mail { width: 77%; margin-right: 3%;}.form-submit { margin-top: 0; width: 20%;}}
ヘッダー・フッターの非表示
カスタム投稿「資料請求」は、ヘッダーとフッターの表示・非表示指定が可能です。当ページは、ヘッダーを非表示に指定しています。指定方法は、編集画面サイドバー「文章タブ」の右下にある非表示設定からおこないます。