» reCAPTCHA v3 入れてみた TECHSCORE BLOG
これは TECHSCORE Advent Calendar 2018 の6日目の記事です。 こんにちは、吉田です。 2018/10/29にGoogleからreCAPTCHAの新バージョンreCAPTCHA v3が正式公開されました。 以前、Invisible reCAPTCHAをこのブログでご紹介したこともあり、今回もSynergy!のフォームにreCAPTCHA v3を適用してみました。 とうとう画像選択がなくなった!? reCAPTCHA v3の特徴として、画像選択が完全に無くなりました。もう「店舗も道路標識も粗すぎて見えないっ!!!」となる画像を探さなくて良いのです。 では、どうやってbotによるアクセスか判断をするのかというと、閲覧者のページ内での行動をスコアとして算出しbotを判別します。reCAPTCHA v3を配置したページで閲覧者の動きを学習し、利用が増えるとともにスコアの
input[type=date]の挙動とDatepicker
input[type=date] を使った時の挙動、実はいまだにブラウザによってまちまち。 Chrome はチープなピッカーを申し訳程度に表示するんだけど、macOS 版の Safari に至ってはピッカーすら出してくれない。ただし iOS、iPad OS 版の Safari はちゃんとしたピッカーを表示してくれる。 なので iPhone、iPad の場合は OS デフォルトのピッカーを、それ以外のブラウザの場合は jQuery でもなんでもいいんだけど Datepicker 的なものを表示するようにしてみた。 まずは基本 まずは基本的によくやるようなパターン。以下のような HTML を用意する。 <input type="text" class="datepicker"> 次に以下のような JavaScript を用意する。 $( () => { $("input.datepicker"
Sign-in form best practices | Articles | web.dev
Sign-in form best practices Stay organized with collections Save and categorize content based on your preferences. Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.
必要な場合だけ JavaScript とスタイルシートをロードさせるには | Contact Form 7 [日本語]
This page is also available in English. デフォルトの設定では、Contact Form 7 はその JavaScript と CSS スタイルシートをすべてのページにロードします。きっと、こんな無駄の多いやり方をやめて、コンタクトフォームを含むページにだけロードすればいいのに、と考えていることでしょう。その気持ちはよくわかりますが、技術的な困難があって、ページをロードする時点でそのページがコンタクトフォームを含んでいるかどうかを判断することがプラグインにとって難しいのです。ともあれ、多少状況を良くするような方法を提示することならできなくもありません。 ステップ 1: すべてのページで JavaScript と CSS スタイルシートをロードしないようにする 定数 WPCF7_LOAD_JS の値が false の場合(デフォルト値は true)、Co
![必要な場合だけ JavaScript とスタイルシートをロードさせるには | Contact Form 7 [日本語]](https://cdn-ak-scissors.b.st-hatena.com/image/square/446e1bccef6284edf6dbeb0a2daf13487fcbe5de/height=288;version=1;width=512/https%3A%2F%2Fcontactform7.com%2Fwp-content%2Fplugins%2Fcf7com-utils%2Fimages%2Ficon-128x128.png)
Laravel + Vue で問い合わせフォームをつくる
さてさて、ウェブ開発をしているとよく必要になる機能のひとつにお問い合わせフォームがあります。 もちろんクライアントさんだけが利用するタイプのサイトなら不要ですが、それ以外はだいたいどのようなサイトでもユーザーが運営者に連絡ができるようお問い合わせフォームを開設しています。 そこで、今回は比較的ご要望が多いお問い合わせフォームを Larave + Vueで作ってみます。 いつもの内容より基本的な内容が多くなっているので、ぜひ参考にしてくださいね。（最後に今回のプログラムコード一式をダウンロードできます！） 開発環境： Laravel 5.7 やりたいこと 今回開発する内容は以下のようなお問い合わせフォームです。 問い合わせ内容をメールで送信 バリデーション（入力チェック）をする Ajax通信で送信（ページの移動はなし） では実際に開発していきましょう！ お問い合わせの入力ページをつくる（デザ
エラーメッセージはフォームのどこに表示するべきか
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
Googleフォームで自動返信システムをサクッとつくる (1/4)
Google Apps Script（以下、GAS）を使えば、Googleのアプリケーションにちょっとした機能を加えて実用的なサービスに仕立てられます。今回は、問い合わせフォームを簡単に作成できる「Googleフォーム」を使って、問い合わせメールへ自動で返信するシステムを作ります。 【フォーム作成】問い合わせフォームを作る Googleフォームは、問い合わせやアンケートなどのフォームを簡単な操作で作成できるWebアプリケーションです。まずは企業サイトを想定した、シンプルな問い合わせフォームを作成してみましょう。 1. https://drive.google.comにアクセスしてGoogleドライブを開きます。「作成」ボタンをクリックし、「フォーム」を選んでください。
【jQuery】autoResizeの使い方。テキストエリアのリサイズ
jQueryはJavascriptとHTMLを結びつけるJavascriptライブラリ。 autoResizeは、そのjQueryを使って、テキストエリアに入力したデータ量に合わせて、エリアをリサイズするスクリプト。 autoResizeの使い方は下記の通り。 --- 1. jQueryとautoResizeをここからダウンロード。 jQuery : jquery.min.js autoResize : autoresize.jquery.js or autoresize.jquery.min.js （僕は、autoresize.jqueryを使っている） 2. 自分の.htmlファイルのheadタグにダウンロードしたスクリプトのパスを入れる。 <head> <script src="js/jquery.min.js" type="text/javascript"></scri
input type="file" なやつを独自にデザインする方法 - ダーシマ・ヱンヂニヤリング
デモ HTML <div class="file"> ファイルを選択 <input type="file"/> </div> CSS .file { display: inline-block; overflow: hidden; position: relative; padding: .5em; border: 1px solid #999; background-color: #eee; } .file input[type="file"] { opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); position: absolute; right: 0; top: 0; margin: 0; font-size: 100px; cursor: pointer; } 対応ブラウザ 以下のブラウザ
jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MW WP Form の使い方