お問い合せフォームをコーディングするための9つのTips | 株式会社LIG
こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは
jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
:disable_withで処理中を明確にして二重送信を防止 - ザリガニが見ていた...。
フォームに入力した内容をサーバー送信する時、送信ボタンを押してから処理に時間がかかると不安になる。（特にファイルをアップロードする時など。）ユーザーによっては、2回、3回と送信ボタンを押しまくるかもしれない...。不要な操作は、サーバーにも負荷がかかるし、きっとユーザーもイライラしているはず。そんな時は、submit_tagの:disable_withオプションで手軽に解決できた！ 以下のように:disable_with=>'アップロード処理中...'と設定しておけば... ボタンを押すと、操作できない状態に変化して、二重送信が防止できる。 同時にボタンの表示が[アップロード処理中...]に変更され、ユーザーにフィードバックできる。 <%= start_form_tag({:action => 'create'}, :multipart => true) %> <%= render :pa
スタイリッシュなフォームをオンライン上で作れる「Faary」
サイトを作る際に、できれば見た目もスタイリッシュであってほしいのがお問い合わせフォーム。しかし、そのデザインを０から作るのは、なんだかんだ時間がかかってしまいますよね。 そこで今回は、カンタンにスタイリッシュなフォームを作れるサービスをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! スタイリッシュなフォームを作れる「Faary」 「FAARY」は、オンライン上でCSSによってデザインされたフォームを簡単に作れるサービス。 フォームの項目を入力すると、フォームデザインのプレビューが表示され、HTMLやCSSファイル一式をダウンロードして使うことができます。 質問の項目を入力してボタンを押すだけ ↑FAARYのページを開き、質問項目を入力するだけでフォームを作れます。 入力欄の下にある
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
