こんにちは。転職ドラフトでWebアプリケーションエンジニアをやっている@iwtnです。 転職ドラフトでは自社開発企業に特化したエージェントサービスを始めました。 agent.job-draft.jp そこでサービスの申し込みフォームを作ったのですが、その中に生年月日の入力がありました。 生年月日ということは日付の入力。 ブラウザの実装もリッチになってきて、デフォルトでinputタグの type="date" を使うだけでカレンダーまで表示されます。素晴らしいですね！ しかしこの実装の問題は多くの人が指摘しています。実際あまりよいUIとは言えません。 動作はバラバラ、特にスマホでは入力しにくい 実装はブラウザに依存します。なので統一したUIをユーザーに提供できません。 caniuse.com もちろん普段使っているブラウザで慣れていればそれがその人にとってのベストのUIにはなりえます。 しか

皆さん、フォーム作ってますか？ Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも

はじめに Next.js（React）でフロント側のフォーム作成といえば、React Hook Formが定番です。ではメールを送信するバックエンド側はどうでしょうか。 従来のMPA（Multiple Page Application）※１で構築したサイトであれば、入力画面からPHP等で作成し、確認画面、完了画面とセッションで値を保持して、最終的にはsendmailもしくはSMTP接続にてメール送信という流れでした。 Next.js（React）のSPA(Single Page Application)※2で構築されたお問い合わせフォームの事例では、SendGridやEmailJS、MicroCMSと連携する方法がなどが出てきます。Vercelとsendgridの組み合わせも定番ですね。 企業によっては、外部サービスの利用にはセキュリティの関係で安易に採用できないという場合があるでしょう。

【重要】※要修正 PHP8以上の場合にエラーとなり送信できない問題 ただし、2020/05/08以前にダウンロードされた方が対象です。 2020/05/08以降にダウンロードされた方は関係ありませんので無視して下さい。 対象かどうかの確認方法はファイル内上部に「ver2.0.0」など、バージョンが記述されている場合は改修済みですので対応不要ですが、記載がない場合（最終更新日2018/07/27などとなっている場合）は修正が必要です。 バージョン（ver●●）が表示されている場合の記述例 PHPメールプログラム　フリー版 ver2.0.0 最終更新日2021/05/20 ※この場合は修正の必要はないということです。 【症状】 送信した際にPHP7.4の場合は環境によってエラーが表示される。PHP8以上の場合はエラー表示（またはページ真っ白）となり、送信が行えなくなります。 【原因】 PHPの

formタグのaction属性にURLをセットするだけで、データの管理や自動返信メールの送信などができる、ヘッドレスフォームサービスです。

よくハマるのがトップページにメールフォームを実装し、サーバー移設の際にURLを書き変えるの忘れる、というアレです。 MW WP FORMを使っている場合でLPのように1枚ページの中にフォームを実装している際は、確認画面などのURLなどは要注意です。リダイレクトしまくります。 WordPressプラグイン「zipaddr-jp」を使って自動住所登録を作る 郵便番号を入れると自動的に住所を引っ張り出して、番地名くらいまでは参照してくれる機能があります。 良く利用されているのは JavaScriptライブラリ　ajaxzip3 jQueryプラグイン　jquery.jpostal.js の2本ですが、WordPressを利用する際はzipaddr-jpを利用することにしています。 特にjQueryはWordPressで利用しようとするといろいろ何かと面倒くさいことが多いので……。 zipaddr

ちょっとタイトルがわかりづらくなってしまいました。。。 今回は少し前に書いた、”コンタクトフォーム7にサンクスページを追加する方法”の続きになります。こちらの記事では、送信後に別に用意したサンクスページにジャンプさせてみました。今回は、複数のお問い合わせフォームを使用していて、それぞれのフォームに合わせたサンクスページに移動させたい場合のカスタマイズ方法です。 お見積りフォーム⇒「お見積のご依頼ありがとうございました！」 お問い合わせフォーム⇒「お問い合わせありがとうございました！」 みたいな感じで、フォームに合わせて違うページに遷移させてみましょう。

こんにちは、ふいにフォームに値を渡したい時って、ありますよね(*´ω｀*) そんな時、いつもどうやるんだっけーと思い出すのが面倒くさいので、メモします(´・ω・｀)＜知ってるよ！って人は生暖かい目で見て下さい（笑） Contact Form 7に値を渡す方法Contact Form 7をインストール WordPressでフォームのプラグインはいくつかあります、私は最近MW WP Formをよく使っていますが、今回はみんなだいすき！Contact Form 7を使用します(´・ω・｀)！管理画面からインストール、どん！そして有効化。 値を渡すページ値を渡したいので、値を渡すページまたは投稿などのところに通常と同じフォームを書きます(´・ω・｀)＜普通にね、POSTで渡します。 phpに表示したい分岐させて書いちゃうと楽かも♪ <form action="URL" method="post">

下準備 まずreCAPTCHAを導入するために、reCAPTCHA にアクセスして、必要な情報を取得します。 「Domains」の項目はご利用のサイトのドメインを指定してください。 サイトを登録し、以下２つのキーを使用しますのでメモしておいてください。 Site key Secret key クライアント実装 下準備ができましたので、まずはクライアントサイドを実装します。 JavaScript 以下コードを ご利用のテーマのフォームの head要素内に読み込んでください。 例えば、simple2016テーマなら themes/simple2016/contact/index.html です。 <script src="https://www.google.com/recaptcha/api.js" async defer></script> <script> function valida

2018/12/30にGoogle日本語版で『PHP メールフォーム』を検索した結果です。 日によって変動する可能性があります。 1位 PHP工房 https://www.php-factory.net/mail/01.php PHP4.3.9～PHP7 やめろ。 努力はわかるのだが、努力の方向性が全力で間違っているというか。 クラスすら使えない時代の古のPHPに対応するため、今から見ると「とてもひどい」としか言いようのない構造です。 しかもそのままの状態で進化し続けてしまったため、もはや手の出しようがない混沌になっています。 そんな有様でありながら、脆弱性対策もしっかり行っており、CSRF対策やレスポンシブ対応までしっかりされています。 惜しくも$mail_check=0にした場合にメールヘッダインジェクションできますが、これはメアド形式チェックをしないというフラグで、デフォルトもチェッ

登録フォームは、Webページの中でもいちばんデザインが難しいもののうちの一つです。あるフォーム要素を入れるか入れないかといったことが、コンバージョン率に影響を与えます。どの要素を入れるか入れないか考えることもデザイナーの仕事です。 パスワード確認はコンバージョン率を下げる たいていのWebクリエイタ―は、パスワードを初めて作る場合にはパスワード確認用の入力欄を表示させなければいけないと考えています。 これは、パスワードを入力する欄がユーザーの入力をマスキングするためです。ユーザーはミスタイプしてもそれに気づきません。パスワード確認で、ユーザーに２回パスワードを入力させることにより、ミスタイプを発見します。 パスワード確認欄は理にかなったものに思えますが、それを表示させることはコンバージョン率を下げる可能性があります。ある調査によると、登録フォームを離脱した全ての人のうち、４分の１以上が、パ

画像の出典：form-ux-tips あなたのアプリやサイトを利用する人々にはある一定の目的があります。そしてその目的を達成するために フォームに 記入しなくてはならないことがよくあります。Webやアプリにおいてフォームは、ユーザにとって未だに最も重要な 種類の操作 であるからです。事実、フォームは目的を達成するまでの 過程における最後のステップ と見なされることも多いのです。 フォームは目的達成の手段にすぎません。迅速に混乱なく、ユーザがフォーム入力を完了させられるようにするべきです。 この記事では、ユーザビリティテスト、フィールドテスト、視線計測（アイトラッキング）、そしてユーザからの実際の不満の声に基づく実用的なガイドラインを紹介します。 フォームの構成要素 一般的にフォームは以下の5つの要素から構成されます。 構造 。フィールドの順番、ページの外観、各フィールドとの論理的な関連付け

[レベル: 初〜中級] 入力フォームのフィールドには、入力が「必須」なのかまたは「任意」なのかのラベルを両方付けることが推奨されます。 どちらか片方だけだと入力途中の離脱の原因になります。 ECサイトのユーザービリティ調査と最適化を専門に扱っているBaymard Instituteが詳しく解説しています。 15の大手ECサイトのユーザビリティ調査と18の主要なモバイルサイトのユーザビリティ調査、そして自社による最新の大規模なアイトラッキングテストによって実証することができました。 この記事では、その解説の要点をまとめて紹介します。 片方だけの「必須」「任意」ラベルの問題点 入力が「必須」か「任意」かをどちらか片方のラベルだけで示すことにはさまざまな問題点があります。 必須か任意かを示さないのはいちばんよくない そのフィールドの入力が必須か任意かを示さないのはいちばんよくないスタイルです。