制作のきっかけ
「国番号を含めず入力されるとかけ返し方が分からないので国番号を含めたフォームにしてほしい。」
とクライアント様からご要望がありました。
使用ライブラリ
下記を使用しました。ありがとうございます。
https://github.com/jackocnr/intl-tel-input
説明
国を選択して、電話番号を入力して送信するだけでは、自動返信メールで電話番号しかわからないので
電話番号入力のinputとは別で、国番号付きの電話番号のinputも必要となります。
電話番号を入力すると、下のinputに国番号付きの電話番号が表示されます。
下のinputは文字数に合わせて動的に幅の広さが変わる仕様になっています。
この記事では電話番号が変化したことがわかるように国番号付きの電話番号を表示させていますが、
実際のサイトでは、type属性にhiddenを指定して国番号付きの電話番号を表示させないようにし、
さらに自動返信メールでも国番号付きの電話番号が届くような実装にしました。
国番号なしで入力すれば、国番号に変換されたものがメールで届きますし、
国番号ありで入力すれば、変換されずにそのまま入力されたものがメールで届きます。
デモ
実装環境
WordPressのelementor formの方で実装をしました。
お客様の声
国番号のフォームを実装してから、クライアント様よりコメントをいただきました！
あの国を選択するのいい感じですね！あれを入れてから問合せ数が激減したのでほとんどがSPAM（フォーム営業）だったんだと思います。まともそうな問合せだけ残ったのでよかったです笑 そういう効果もありました。
これを聞いた時嬉しかったです！
【使用言語・ツール】
HTML/CSS/JavaScript/jQuery/PHP/WordPress/Figma
【主な業務内容】
・コーディング(xd、ai、psd、figma、静的サイトやペライチなどからWordPress)
・WordPressテーマ作成
・THE THORやTCDテーマなど有料テーマカスタマイズ
・ページスピード改善
・WordPressエラー修正
・デザイン修正・改善
・レイアウト修正・改善
・アニメーションの実装
・レスポンシブ対応
・セキュリティ対策
お問い合わせ・ご相談は
ページ下部「お問い合わせ」、クラウドソーシングよりお願いいたします！
