見出し画像

【42日目】ContactForm7の選択肢を自動変更にする

Aさん

まずは振り返り

41日目の達成目標率

  • 依頼対応  → 50% 対応中

  • 新規事業の原稿作成  → 100% 今日の分DONE

  • 新規事業のデザイン作成  → 100% 今日の下ごしらえはOK

  • Wordpressを使ったバックエンド構築  → 依頼優先なので保留

  • 英語学習  → 100% Duolingo DONE

昨日は調べながらの作業で、今後も使うかもしれないコードができたので忘備録を書いておく。

コンタクトフォームに動的選択肢を加えたい

コンタクトフォームでWordPressではよく使われるContactForm7。
これを使って選択肢を動的にしたい、と言う状況が発生しました。
例えば就業開始の目安を月単位で取得したいときに使えます。

完成図

Q いつからの就業をご希望ですか
◯ 4月     ◉ 5月     ◯ 6月

やりたいこと

・毎月フォームを修正しないように動的に変化させる
・自動返信に選んだ値を取得させる

動的選択肢の作成

今回参考にしたのはベイジさんの下記ページ。

カスタム投稿の情報を吸い出してHTMLを生成する関数を作成する。
関数の中身は以下のような内容。
WP_Queryで投稿情報を取得してまわす。
ob_startでバッファリングを有効にし、その中でHTMLを書く。
タイトルやカスタムフィールドの値など自由に取得可能。
最後にバッファを返す
作成した関数をContact Form7のショートコードに登録。
作成したショートコードをContact Form7の編集画面に張り付ける。

techlab/baigie

どう言うことかと言うと下記の通り。

  1. ContactForm7で使うカスタムタグをfunctions.phpに登録する

  2. ContactForm7でフォームに追加する

至ってシンプルです。

functions.phpにカスタムタグを追加する

ベイジさんで紹介されていたコードはカスタム投稿のASCという名前に設定されていたので、そのままコピペするとエラーになります。
チェクボックスからラジオボタンにも変更しておきましょう。

ちなみにタイムスタンプを使って月を取得しました。

add_action( 'wpcf7_init', 'custom_add_form_tag_month' );
 
function custom_add_form_tag_month() {
  wpcf7_add_form_tag( 'month', 'custom_month_form_tag_handler' ); 
}
 
function custom_month_form_tag_handler( $tag ) {
  return date_i18n( 'F', current_time( 'timestamp' ) );
}

add_action( 'wpcf7_init', 'custom_add_form_tag_next_month' );

 function custom_add_form_tag_next_month() {
  wpcf7_add_form_tag( 'next_month', 'custom_next_month_form_tag_handler' ); 
}

function custom_next_month_form_tag_handler( $tag ) {
  return date_i18n( 'F', strtotime("+1 month", current_time('timestamp')) );
}
 
add_action( 'wpcf7_init', 'custom_add_form_tag_next_next_month' );

 function custom_add_form_tag_next_next_month() {
  wpcf7_add_form_tag( 'next_next_month', 'custom_next_next_month_form_tag_handler' ); 
}

function custom_next_next_month_form_tag_handler( $tag ) {
  return date_i18n( 'F', strtotime("+2 month", current_time('timestamp')) );
}

守秘義務も気になるので今回は全文書きませんが、上記のコードとベイジさんのコードを組み合わせて作成しました。

自動返信メールに値を持たせる。

contactForm7からフォームの中に[タグ名アンダーバー使えます]を挿入すると、<label><input type="radio"></label>のHTMLの中に、今月、来月、再来月のラベルが挿入され、同様のValueも取得できます。

自動返信で使われる[your-mail]などはどこで使われているのか検証モードで確認すると、nameに使用されていていました。
[タグ名アンダーバー使えます]でも真似しましょう。
先ほどのコードでinputの中にnameの記載があります。name="months"としているので、これを持たせます。

就活開始時:[months]

これで、自動返信の内容では4月、5月、6月のいずれかが取得できます。

目標確認

長期的目標

期日：1959日後(現在41日/2000日)
達成率：未測定（中期的目標達成後に判断）

  1. 海外から仕事を受けるor海外で仕事をする

  2. 仕事に支障がないレベルの英語力を身につける

  3. 子供たちの留学費用を賄えるレベルで稼げるようになる

  4. 資産運用で労働以外にも収入を得られるようにする

  5. 負けない体を作る

中期的目標

期日：271日後(94日/365日)
達成率：未測定（短期的目標達成後に判断）

  1. フロントエンドとして業務委託を増やす

  2. TOEIC400点を目指す(12月受験)

  3. 平均月収60万を目指す

  4. 積立は毎月、成長枠NISAは年間20万円、投資信託は年間30万円投資する

  5. ストレッチとスクワット、ランニングの習慣化

短期的目標

期日：27日後(4日/30日)
達成率：0%

  1. フロントエンド
    ・ECCUBEでデモの通販サイト作成
    ・Next.jsを使ってShopifyのアプリ化ができないか調査
    ・PHPを使ったバックエンドの習得
    ・Veu.jsを使ったアプリ構築
    ・その他依頼対応

  2. 新規事業
    ・デザイン物販売は1日１枚が目標
    ・SNS運用フォロワ−1000人、インプ5000目標

  3. 英語学習
    ・ELSA Spreakで発音の練習
    ・Duolingで4回ほど復習
    ・過去問.comで長文の理解と単語の暗記

  4. 売り上げ
    20万を目指す 今月から運用ベース

  5. 筋トレに関してはタスクが重荷になっているので、気が向いたらやる

今日のタスク

  1. 依頼対応

  2. 新規事業の原稿作成

  3. 新規事業のデザイン作成

  4. 英語学習

いいなと思ったら応援しよう！