お問い合わせフォームのプラグイン「Contact Form 7」の機能を自作テーマに落とし込む方法

デイトラ卒業制作でお問い合わせページを作るのですが、それに沿った記事になります。

フォームの作成・ショートコードで表示も解説しますが、この記事のメインは自作テーマで作ったフォームのデザインに機能を落とし込む・埋め込むことになります。「あのいつものデザイン変えたいな」「先にhtmlでフォームの形を作っちゃった…」という方に向けての記事なります。「基本的な使い方はわかってるよ」「答えをくれ」という方は「解決編」へどうぞ

「お問い合わせって要るの？」という方もいらっしゃるようですが、ブログの場合は読者からの意見であったり、企業から「この商品宣伝して」という提案だったり、「設置しない方がいい」なんて理由はないと思いますので、取り敢えず作っておきましょう。プロフィール欄にメールアドレスを表示しておくと、知らない間に変なサイト・メルマガに登録される、なんてこともこのご時世なくはないですから、やめましょう。お問い合わせフォームならこちらのアドレスが相手に知られることなく連絡を受けることができます。

フォームの作成方法

「Contact Form 7 使い方」でググればいくらでも出てきますが、一応解説します。プラグイン「Contact Form 7」をインストールして有効化すると「お問い合わせ」が現れるので「新規追加」を押してフォームの名称を決めます。

今回は”お問い合わせフォーム”としますが、お好きな名前で構いません。

今回は項目も初期のままにしますが、追加もできます。”チェックボックス”や”ラジオボタン”など選択肢を含む項目は少しだけ使い方が難しいかもしれませんが、「Contact Form 7 ラジオボタン」などで検索してみてください。

電話番号を追加したいなら、「電話番号」を押し、必須にしたいなら✔を入れて他のはとりあえず無視で「タグに挿入」すると[tel tel-○○○]と表示されるので(僕は203でしたが)他の項目と同じように<label>で挟んでください。「保存」を押すと上の水色の枠にショートコードが表示されますのでコピーしてください。

ショートコードで表示

固定ページでタイトル「お問い合わせページ」というページを作り「ショートコード」を呼び出して先ほどのコピーを貼り付け、「スラッグ」は”inquiry”(ここもcontactなどお好きな名前で)にし「公開」します。するとURL「サイト名/inquiry」でお問い合わせページが開けるようになります。

繰り返しになりますが、この記事のメインは「自作テーマにフォーム機能を落とし込む」ですから、page-inquiry.phpファイルがあることを前提にしていますよ。html・cssでinquiry.htmlをデザインしておいてその内容をpage-inquiry.phpにコピーしておいてください。

page-inquiry.phpのフォームを表示したい場所に

<?php echo do_shortcode('ここにショートコードをコピー'); ?>

ご自分のショートコードに合うように書いてください。今の段階で表示出来ているのがこれ

これでも十分にフォームとして使えますね、ここまでが「Contact Form 7」の基本的な使い方です。

自作テーマに落とし込み…の失敗例

いよいよ本題の「自作テーマに落とし込む」に入りますが、目指すデザインはこれ

そんなに変わらないですが(笑)というか項目が違いましたね…失礼しました。まあ気にせず進めます。「デフォのフォームを表示できたけど、これをどうcssでstyle変えるの？」と悩んでいました。VSCodeには<?php echo do_shortcode(‘[~~~~]’); ?> を書いただけなんですよ。ショートコードで便利だけど便利だから…困りました。そこで考えたのは

<div class="contact-item">
      <input type="text" class="form-control" id="inputPassword">
</div>

↓のように置き換えていきます

<div class=" contact-item ">
      [text* your-name class:form-control]
</div>

ひとつずつ間違えないように…ここで置き換える場所や内容が違うとさらに混乱しますからね…すると結果は…こうなりました

まぁそりゃそうだ(笑)「Contact Form 7 落とし込み」「Contact Form 7 自作テーマ 埋め込み」など調べてもなかなかヒットせず…これはまずいな…「これだけ試したならもうデイトラのメンターさんに質問していいだろ…」とSlackを開き「みんなこれわかったのかな？誰か質問してるかも」と「卒業制作　Contact Form 7」で検索すると……ありました!!「かわしま」さんに感謝致します…

解決編

お待たせしました、いよいよ解決編です。

結論は「自作コードもフォーム部分も使うでした」でも、エディタに書いていくわけではないですよ。

<dl class="contact-list">
  <div class="contact-item">
    <dt class="contact-item-title">お名前</dt>
    <dd class="contact-item-input">[text* your-name]</dd>
  </div>
</dl>

というコードがあったので拝借しました(笑)最初は <label>氏名[text* your-name] </label>だったので随分かわりましたね。

“dl”はlistでリスト、”dt”はtermで用語、”dd”はdescriptionで説明でしたね。他にdivやpタグに変えても表示できましたが、せっかくなのでこのまま使いました。これをどうするか？管理画面に戻って「コンタクトフォームの編集」に貼ります。

ここに「自作コードもフォーム部分も書いていく」が今回の答えになります。この調子で同じようにdtに電話番号、ddに[email* your-email]という具合に当てはめていきます。送信ボタンが欲しい箇所で

<div class="contact-submit">
  [submit class:btn-submit]
</div>

クラスを付けたい時は「class:」と書きます。完成したら「保存」を忘れずに!!まだこれで終わりではないですよ。新たに<?php echo do_shortcode(‘[~~~~]’); ?>で出力されたのは見た目は先ほどと変わってないですが、もちろんフォームの機能がついていて、さらに”クラス名”が付いてます。contact-itemやcontact-item-inputで囲んでましたよね、これでstyle.cssでスタイルが付けれるようになったんです。どういったスタイルにするかは自由ですが、

.contact-item {
  display: flex;
  justify-content: space-around;
}

とすれば「お名前」と「名前入力欄」が横に並びますよね。ここまで来ればもう解決ではないでしょうか？細かい箇所だと、あとは元のボタンにはborderがついていたりなので、

.btn-submit {
  background-color: #C63205;
  padding: .5em 2em;
  color: #fff;
  border: none;
}

としたり納得いくまでデザインを整えてみてください。

今回はWordPressのお問い合わせプラグイン「Contact Form 7」について、フォームの作成・表示・自作テーマに落とし込み、をまとめてみました。この記事の制作にあたって調べてみましたが、多くのプラグインが存在するなかで「お問い合わせなら“Contact Form 7”」の一択のようです。ほぼこの情報しかでません…デイトラ中級では「GoogleForm」も使いましたが、WordPressでのサイト作成でしたら「Contact Form 7」でいいと思います。

お問い合わせフォームはこれまでのプログラミングの勉強が役に立たない、といいますか特殊ですよね。デベロッパーツールで開いてみましたか？type=”text”はわかる、name=”your-name”は名称、class=””はcssね、value sizeが40?aria-requiredがtrue?aria-invalidはfalse……わからん…これが送信ボタンと結びついてるのか？あ～<form>で囲ってるからいいのか…formの中はaction,methodは聞いたことある、novalidate?data-status?……は？

ではまた