入力順を任意に指定する方法【Contact Form 7】

Contact Form 7 プラグインでフォームを作成すると、タグを上から並べてもタブキーでの移動順が希望通りにならないことがあります。
ここでは、任意の順番で入力フィールドを移動できるようにする方法を紹介します。

1 フォーム項目例

以下は、ブログで表示するフォーム例です。実際にはContact Form 7のショートコードとして利用します。

<p>◆お名前<span style="font-size:80%; color:#f00;">（必須）</span><br />
[text* your-name] </p>

<p>◆電話番号<span style="font-size:80%; color:#f00;">（必須）</span><br />
[tel* tel] </p>

<p>◆メールアドレス<span style="font-size:80%; color:#f00;">（必須）</span><br />
[email* your-email] </p>

<p>◆郵便番号<span style="font-size:80%; color:#f00;">（必須）</span><br />
[text* zip id:zip]</p>

<p>◆都道府県<span style="font-size:80%; color:#f00;">（必須）</span><br />
[text* pref id:pref]</p>

<p>◆市区町村<span style="font-size:80%; color:#f00;">（必須）</span><br />
[text* city id:city]</p>

<p>◆番地～<span style="font-size:80%; color:#f00;">（必須）</span><br />
[text* addr id:addr]</p>

<p>◆建物名・部屋番号<br />
[text addr2 id:addr2]</p>

<p>◆お問い合わせ内容<span style="font-size:80%; color:#f00;">（必須）</span><br />
<br />
[textarea* your-message class:form-width] </p>
<p class="center">[submit "送信する"]</p>

2 任意のタブ順を設定する方法（JavaScript利用）

Contact Form 7では標準タグに tabindex を書くと文字列として扱われるため無効です。

Contact Form 7では、残念ながら標準タグでは tabindex は公式にはサポートされていません。そのため [text* zip … tabindex:3] のようにフォーム編集画面に書くと、CF7はこれを 未知の属性として文字列扱いしてしまいます。

そこでJavaScriptで、ページ読み込み後に各フィールドに tabindex を追加します。

ファイル名：cf7-tabindex.js
保存先：wp-content/themes/child-theme/js/cf7-tabindex.js

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('[name="your-name"]').setAttribute('tabindex', 1);
  document.querySelector('[name="tel"]').setAttribute('tabindex', 2);
  document.querySelector('[name="your-email"]').setAttribute('tabindex', 3);
  document.querySelector('[name="zip"]').setAttribute('tabindex', 4);
  document.querySelector('[name="pref"]').setAttribute('tabindex', 5);
  document.querySelector('[name="city"]').setAttribute('tabindex', 6);
  document.querySelector('[name="addr"]').setAttribute('tabindex', 7);
  document.querySelector('[name="addr2"]').setAttribute('tabindex', 8);
  document.querySelector('[name="your-message"]').setAttribute('tabindex', 9);
  document.querySelector('input[type="submit"]').setAttribute('tabindex', 11);
});
</script>

2.1 ディレクトリ構造

3 ポイントまとめ

• CF7標準タグに tabindex を書いても無効
• JavaScriptでページ読み込み後に属性を追加するのが確実
• name 属性を正しく指定することが重要
• 送信ボタンも含めて設定すると自然な順番でタブ移動可能

この方法を使うと、上から順に「お名前 → 電話番号 → メールアドレス → 郵便番号 → 都道府県 → 市区町村 → 番地 → 建物名 → お問い合わせ内容 → 送信ボタン」の順にタブ移動が可能になります。