HyperFormformタグのaction属性にURLをセットするだけで、データの管理や自動返信メールの送信などができる、ヘッドレスフォームサービスです。
フォームをデザインするときのポイント
前提 自分が嫌だと思う項目を作らない。 曖昧を許容できるようにする。 なぜその項目が必要なのかを説明する、もしくは予想できるようにする。 倫理的に、そして法的に問題ないものか確認する。 HTMLの仕様とブラウザの挙動を活用する。 システムの都合が優先される場合があるが、なるべくそれに引っ張られないように工夫したい。 分割しない 姓名、郵便番号、電話番号、年月日、時分など、入力フィールドが分かれていることがあるが、なるべくこれを避ける。フォーカスの移動が、面倒だからだ。なるべくユーザーの手間を減らしたい。 フォーム送信後のデータベースの都合や、事務処理、または運用にて必要不可欠である場合を除いて、分割しないようにしよう。 年月日や時分などは <input type="date"> <input type="time"> <input type="datetime-local"> のように標準
問い合わせフォームへの攻撃急増 詐欺メールの“送信元”に
Webサイトに設置された問い合わせフォームを悪用した攻撃が増えているとして、さくらインターネットが、サイトオーナーに注意を呼び掛けている。 フォームで問い合わせを送信した後、問い合わせアドレスにメールを自動返信しているサイトがターゲットにされている。悪意のあるユーザーが、フォームに攻撃先のメールアドレスを記入し、問い合わせ内容にフィッシングサイトのURLや偽ブランド品の広告などを記載すると、攻撃先にフィッシングメールや広告メールが届く――という手口だ。 攻撃の対象は、さくらインターネットが提供しているサービスに限らず、このようなフォームを設置しているすべてのサイト。対策として、自動返信機能をオフにするか、Googleの不正投稿対策サービス「reCAPTCHA」を利用するよう推奨している。対策の詳細を解説したページも設置した。 WordPressの脆弱性などに起因する問題ではないため、ツール
今、お問い合わせフォーム(メールフォーム)が危ない！ 不正アクセスの増加と対処方法 | さくらのナレッジ
メールフォームへの不正アクセスが急激に増えてきています この半年～1年の間に、メールフォームを悪用した迷惑メール送信の被害が相次いでいます。これはどのような事かというと、まずメールフォームには、記入した内容を記入者にメールで自動返信する機能が備わっていることが多いです。このとき、メールフォームのメールアドレス欄には記入者自身のアドレスを入力するのが正しい操作ですが、悪意のある第三者がこれを利用し、メールアドレス欄に他人のアドレスを入力して迷惑メールを送信するという攻撃手法です。(参考記事: サイトの「問い合わせフォーム」を悪用する攻撃に警戒を) 少なければ一日に5～10件、多いケースでは一日に数千件の迷惑メールが送信される事がありますが、このような問題が起こると他人に迷惑がかかるだけではなく、サーバが持つIPアドレスの評価が下がったりブラックリストに登録されたりしてしまいます。IPアドレス
Webサイトのフォームで悪用被害急増中！加害者にならないためのフォーム設置講座 | さくらのホームページ教室
Webサイトのフォームで悪用被害急増中！加害者にならないためのフォーム設置講座 商用のWebサイトでは欠かすことのできない「お問い合わせフォーム」。顧客との重要な接点ですので設置しているWebサイトは多いはず。今、そんなお問い合わせフォームが狙われています。「え、WordPressプラグイン最新にしてればいいんじゃないの？」と思われるかもしれませんが、今回は違いますよ！ 急増しているお問い合わせフォーム攻撃の手口 昨今、Webサイトのお問い合わせフォームを狙った大量メール送信攻撃が急増しています。手口は非常に古典的で、フォームから問い合わせをした際に送信される「お問い合わせありがとうございました」メールを悪用します。 お問い合わせした人のメールアドレス欄に、スパムメールを送りたいメールアドレスを入力お問い合わせ内容にフィッシングサイトや広告のリンクを入力送信ボタンをクリックお問い合わせあり
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
Vue.jsを使用してさまざまなフォームを簡単に実装できる -Vue Formulate
Vue.jsを使用して、Webページやスマホアプリでよく使用されるフォームを簡単に実装できるVue Formulateを紹介します。 サインアップ、ログイン、メールアドレス、ファイルのアップロード、アンケートなど、さまざまなフォームをサポートしており、バリデーション機能も備えています。 Vue Formulate Vue Formulate -GitHub Vue Formulateの特徴 Vue Formulateのデモ Vue Formulateの使い方 Vue Formulateの特徴 Vue Formulateは、Vue.jsを使用してフォームを構築する最も簡単な方法です。主な機能は、フォームとフィールドの検証、ファイルのアップロード、フォームの生成、ラベルをサポートする単一要素の入力、ヘルプテキスト、エラーメッセージ、プレースホルダーなど、さまざまなプロジェクトで使用するための包
フォームをより幅広いユーザーや文化に対応させるためには
現在のWebサイトは整然としていてモバイルフレンドリーで、さまざまな手段で来訪する方のアクセシビリティを考慮したデザインをされています。しかし、ユーザーから情報を集めるフォームの作成においては、自分たちの選択が間違っているかもしれないと立ち止まる方は少ないでしょう。 Webのフォームでは、「John」と 「Smith」というように、姓と名に分けて尋ねるものがあまりにも多いです。しかし問題になるのは、そのように二分割できない名前を持つユーザーに対して、フルネームや好きな名前を記入する欄を設けていないことです。 姓と名という慣習は、アメリカ人にとっては文化的にも個人的にも大多数の期待に沿っているかもしれません。しかしほかの国々に出身地や家族のルーツがあるユーザーも考慮に入れるなら、多様な文化に敏感になるべきです。少し視野を広げて簡単な調整をするだけで、どのような人にも対応するフォームを作ること
実質1行でメールフォームのSPAMを防ぐjQueryスクリプト
3月に フリー写真素材 :: Free.Stocker という無料写真素材サイトをオープンし、このサイトのサイドバーに クックパッド みたいに気軽にメッセージを送れるフォームを設置しました。 しばらくは何事も無かったのですが、ある日突然大量のSPAMメッセージが送られてくるように…(●´⌓`●) 酷い時には3分〜5分に1通送られてくるし、試しに送り元のIPアドレスとホストを調べてみたら毎回バラバラなので困りました。 こんな時、多くのサイトでは CAPTCHA と呼ばれる読みづらい英数字の羅列の画像を入力させることが多いと思いますが、それでは「気軽にメッセージを送れるフォーム」とは言いづらいですし、サーバーにもページを表示させるたびに毎回余計な負担がかかってしまいます。 試しにWordPressのSPAM防止などに広く使われている Akismet というSPAM防止APIをメール送信スクリプ
フォームバリデーションと送信ボタンの状態の最適解 - Konifar's ZATSU
タイトルを見て「あーあれね」と思った人もいると思うが、アプリデザインの世界ではすでに議論され尽くされているであろうこの話題について雑に考えをまとめておきたい。とは言っても明確な答えがあるわけではないので意見がほしいというのが正直なところなので、もしフィードバックがあれば @konifarまで直接教えてもらえると嬉しい。 何を言いたいのかというと、『フォームに入力されていない or 入力された文字が異常である場合に送信ボタンを押せる状態にするか押せない状態にするか』という話だ。たとえば次のように氏名を両方入力しなければいけないケース。 初期状態の送信ボタンがdisabledで、入力に応じて状態が切り替わる。 本当に送信できる時だけ送信ボタンがenabledになるというのはわかりやすそうだが、問題もある。入力項目が多くなってきた時に、ユーザーがなぜ送信ボタンを押せないのかわからないかもしれない
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
