デイトラweb制作（Word Press化その14）

デイトラの卒業課題を1日（1〜2時間）行なっています。

ダウンロードページ（page-download.php）を作成する

固定ページにダウンロード用ページを作成する

・スラッグ名を「download」にする。

『Contact Form7』でダウンロードフォームを作成する

・お問い合わせ項目からコンタクトフォームを選択する。

・フォーム名をダウンロードにする。

・デフォルトのフォームコードでは無く、今回作成したHTMLをペーストする。

・<input>タグの部分をForm7に合わせて作成する。

固定ページ（ダウンロード）とpage-download.phpを連動させて表示を確認する

・固定ページからContact Form7を選択して使用するフォームも選択する。

・page-download.phpのコードを変更する。

<!-- 右側：フォーム領域 -->
<div class="p-download__form-wrapper">
   <h3 class="p-download__form-title">資料ダウンロード</h3>
   <div class="p-download__form">
     <?php
       if ( have_posts() ) {
          while ( have_posts() ) {
            the_post();
            the_content();
          }
       }
     ?>
   </div>
</div>

・表示を確認する。

・Form7が自動で導入してくれる<br><p>タグをなしに設定する。

・funcsions.phpに下記のコードを追加する。

add_filter( 'wpcf7_autop_or_not', '__return_false' );

結果

今回は『Contact Form7』に作成したHTMLを認識させる方法で行いました。しかし、今度はボタンのレイアウトが崩れる現象が発生しました。（ボタン自体の位置がズレる、文字も下側にズレる）

静的に作成した物を一度確認しても問題なし！

原因としては、静的に作成したHTMLが<button>タグを使用した事です。Contact Form7は[submit]タグを[input]タグで変換出力することが影響すると考えられます。

<div class="c-form__submit-wrap">
  <button type="submit" class="c-button-type2 c-button-type2--download">資料をダウンロードする</button>
</div>

Contact Form7での記述

 <div class="c-form__submit-wrap">
[submit class:c-button-type2 class:c-button-type2--download "資料をダウンロードする"]
 </div>

<input>タグのスタイルで整えようと挑戦しましたが、今度はレスポンスが崩れてしまい断念・・CSSを変更して完成させました。これだとCSSの知識がある人しか完成できない方法なのでWord Pressの知識しかない人には難しいのではと思いました。

これからは、Contact Form7を使用する際、静的なHTMLは<input>タグで作成します。

あとはメール返信と完了画面を作成して完成です！

以上、デイトラweb制作（Word Press化その14）の状況でした。

ご依頼等ありましたら、下記のURLにお問い合わせ下さい。

ポートフォリオサイトはこちらになります。