WordPressウェブサイトでは、お問い合わせフォームなどを設置して、ユーザーから連絡を貰ったり資料請求をしてもらったりすることが求められたりすることがあります。個人的には、フォームに入力しなくてはならない項目は少ないに越したことがないという持論を持っていますが、どうしても入力させたい項目は増えてしまうことがあります。そのような入力項目が増えてしまった場合にも、できるだけ自動入力部分を導入して、できるだけユーザーのストレスを軽減しようとする取り組みは大切になってきます。いうブロックエディタでメールフォームを作ることができるプラグインを利用してメールフォームを作り、名前(漢字/フルネーム)を入力してもらうと同時にふりがな/フリガナを自動入力させる方法を紹介します。記述する必要がありますので予めご了承ください。ここでは、以下のような環境でのカスタマイズ方法を紹介しています。いうjQueryプラグインを利用させていただきます。読んでおくと使い方を事前に把握しておくことができるかと思いますのでぜひ。フォームを用意します。要素をちゃんと指定するということかなと思います。属性で指定していきます。任意のものを指定しておきましょう。ここでは実験的に3つの入力フォームを用意しています。name-furigana-katakanaこのように設定をして、固定ページ(投稿でも可能)にフォームを設置します。これでフォームの準備は完了です。Monkey(プラグイン)の中でカスタマイズの準備を進めていきます。上でも紹介しているGitHubリポジトリからソースコードをダウンロードしてきましょう。Zipファイルでダウンロードできると思うので、解凍して中身を確認してください。解凍すると中身はこのような構成になっています。いうファイルを利用します。中にこのようなディレクトリ構造を作りファイルを用意していきます。my-snow-monkeymy-snow-monkey.phpfuriganajquery.autoKana.jsfurigana.jsこのようにファイルを設置してください。いうのは空のファイルで良いので作っておきましょう。ここに独自の設定を書いてきます。これらのファイルの読み込みは以下のように行います。)だけで読み込むように条件分岐しています。これでファイルの読み込みが完了しました。フォーム独自の設定を書いていきます。記述しているコードは以下のようになります。出力先、そしてカタカナ出力をするかどうかの設定箇所が分かるかと思います。コピペしてよしなにいじってみてください。動作確認このように用意することで、以下のような動作をするフォームを作ることができます。動作に癖がある部分もあるので、実際に試してみてから導入をするかどうかを検討されることをお勧めします。まとめこのようにふりがなの自動入力機能をフォームに持たせてあげることで、ユーザーのフォーム入力ストレスを軽減して、結果としてお客様へのお問い合わせ数や資料請求数の向上などにつながることが期待できます。制作者としても、このようなことを導入できますと即答できることで、技術的担保の一因となったり、自分の付加価値提供にもつながりますので、ぜひ必要になる前に事前い試しておくと良いでしょう。この記事いいね!と思ったら、ぜひシェアをお願いします。テーマ・プラグイン開発まで幅広くウェブ制作に対応しています。お気軽にお問い合わせください。使って、シンプルなブログやポートフォリオサイト、そしてコーポレートサイトを作りながら、ブロックテーマやサイトエディターの基本を理解することができます。現在、ご依頼をいただくと比較的速やかに着手することができます。お気軽にお問い合わせください。詳しく個人・法人向けコンサルティングさらに詳しく制作・運用のヒントが満載なメルマガオレインデザイン通信WordPressやホームページでのお困りごとは...オレインデザインにご相談ください。お客様の困りごとに驚くほど分かりやすくお答えします。