プログラミング不要！Googleフォームを「チャットボット」に変換できる「Fobi.io」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単に「チャットボット」を作って公開することができる無料のWebサービスをご紹介します！ 必要な準備は「Googleフォーム」を1つ用意するだけ！ プログラミングは一切不要で、すべてブラウザ上で完結できるスグレモノですよ。 【 Fobi.io 】 ■Googleフォームを作ろう！ それでは、実際にチャットボットを作ってみましょう！ 「Fobi.io」を利用するには、最初に「Googleフォーム」を作る必要があるので、まずはフォーム作りから始めましょう。 「Googleフォーム」を作るには、Googleドライブ上から新規作成すればOK！ もしくは、公式ページからでもフォームの新規作成が行えます！ 「フォーム作成エディタ」が起動したら、あとは「① 追加ボタン」で要素をどんどん追加していき、「② フォーム部品」からタイプを選択していきま
from の select の option は SP(iPhone, Android), IE8 だと display: none しても切り替わらないよ - Qiita
from の select の option は SP(iPhone, Android), IE8 だと display: none しても切り替わらないよCSSJavaScriptjQuery 症状 ある select を選択すると、別のセレクトの select の選択候補が限定されたり書き変わったりさせたい。 < option style='display:none' > hoge < /option > とすれば消えるブラウザもあるけど、sp とか IE8 とかだと消えずに残ったりする。 解消法 おとなしくケースによって要素ごと入れ替えよう。 jQuery 信者なら を使えばいいと思うし ベストなのは とか使って、値を監視を含めて構造を作り直すのがいいと思う。 Register as a new user and use Qiita more conveniently You get
レスポンシブ対応、検索フォームのデザイン・実装するアイデアのまとめ
CSSアニメーションを使って実装された、レスポンシブや省スペース用の検索フォーム、フル画面に表示させる検索フォームなど、デザインや実装のアイデアが面白い検索フォームを紹介します。
サーバーの準備不要！HTMLだけで超簡単にメールフォームを実現する「Formspree」を使ってみた！ : うえぶはっく
Webサイトやブログ、サービスなどへ手っ取り早く「メールフォーム」を設置することができる無料のWebサービス【 Formspree 】のご紹介！ 告知用のランディングページや、Webサービスのプロトタイプなどに設置するのも最適で、サーバーサイドのコーディングは一切必要なく、HTMLの「form要素」だけで完結するのでかなりお手軽です。 使い方！ 「Formspree」の利用方法は非常にシンプルで、HTML内の「form要素」の「action属性」に以下のアドレスを設定します！ https://formspree.io/【自分のメールアドレス】 【自分のメールアドレス】の部分には、ユーザーからの問い合わせを受け付けたいメルアドを記載しておきましょう。 試しに、簡単なメールフォームを作ってみましょう！ 名前とメールアドレス、問い合わせ内容だけを送信するフォームがコチラ！ <form actio
HTMLのpattern属性とJavaScript正規表現のunicodeオプション - Hatena Developer Blog
こんにちは、Webアプリケーションエンジニアのid:nanto_viです。みなさんHTMLのフォーム検証機能は使っていますか? 近年は各Webブラウザの対応も進み、お手軽にフォームの利便性を高められるようになっています。 そんなフォーム検証機能のひとつがinput要素のpattern属性です。pattern属性の値にJavaScriptの正規表現パターンを指定することで、ユーザーの入力が意図しないものであった場合、フォーム送信ができなくなります。下図は5桁の数字の入力が求められるところに3桁しか入力せずフォーム送信しようとしたところです。ブラウザに組み込みのエラー表示が出現し、またそのメッセージにtitle属性の値が使われていることを確認できるでしょう。(pattern属性を指定する際には、title属性に書式の説明を記述することが推奨されています。) <input type="text"
問い合わせフォームはもういらない。無料の多言語チャットBOX『Speaklyn』がヤバイ | Ledge.ai
こんにちは。イイノです。 ほとんど全てのサイトで必要で、CVR直結なため色々と頭を悩ませることが多いお問い合わせフォーム。 ユーザーとの接点だし、すごく重要なのは認識してるでも外部サービスを使うと値段が高い、他言語対応していないモノが多いじゃあ自前で作るわ、って思うと設計とかめんどくさいし時間かかるどうせ作るならユーザー情報はしっかり欲しいけど、項目数多いと離脱率高くなるしとかとか。 ユーザーからしてみてもとにかく面倒なんですよね。フォームに入力するのが楽しいって人いないですし。 EFOツールやらABテストツールやらを駆使して改善を繰り返すのもコストがものすごいしちょっと怖い…。 と、そんな悩みをまとめて解決できるんじゃないかと思える、【無料】チャット問い合わせサービスを発見しちゃいました。 企業FBページと直結！無料＆多言語対応の埋込み型チャットボックス『speaklyn』 これです。s
Facebookみたいに改行に合わせて伸びるフォーム - Qiita
var el = document.querySelector("textarea.your-text-area") el.addEventListener("input", function(ev) { if (parseInt(el.rows, 10) < 8) { const currentRow = el.value.split("\n").length; el.rows = currentRow + 1; } }); 3行目で8行以上多くならないようにしてある。Githubのフォームがこんな仕様だったので真似した。無限に伸ばしたかったら外せば良い。 jQueryは必要ないです。 追記 よく考えたら折り返し考慮してなかったので、もっかい考える。 追記 こうなった function fitToContent(el, maxHeight) { let adjustedHeight =
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
フロントエンドコーディングのみで簡単にセキュアなお問い合わせフォームが作れるようになりました | Milkcocoa Engineers' Blog
Webページへのコード貼り付け ※追記(2016-02-18)：CDNから読み込むJavaScriptのコードを修正しました（ファイル名も変えています、contactform.min.js→milkform.min.js）。具体的にはsubmit()関数を使って送信するタイミングを自分で決められるようにしました。 milkcocoa.jsとmilkform.jsをCDNから読み込んで、formタグにmilkform属性を含ませ、JavaScript内でvar milkform = new MilkForm('あなたのapp_id');と書けば利用開始できます。milkform.submit()でデータの送信が出来て、ロード時、送信成功時、失敗時のコールバックも設定できます。 <form milkform> <input type="text" name="e-mail"> <input t
パイプを使って送信先を選択可能に | Contact Form 7 [日本語]
あなたが会社のサイトのウェブマスターになった場面を想像してください。そのサイト上に、送信者が宛先を選択できる仕組みのコンタクトフォームを設置することになったとしましょう。わかりやすい例として会社の CEO (ceo@example.com)、営業担当(sales@example.com)、サポート担当(support@example.com) の3つから宛先を選択できることにします。 こういったコンタクトフォームは、Contact Form 7 の基本的な機能を使っても実現することは可能でした。まずドロップダウンメニューかラジオボタンを設置して(つまり次のようなフォームタグをフォームのテンプレート内に挿入するわけですが): [select your-recipient "ceo@example.com" "sales@example.com" "support@example.com"]
![パイプを使って送信先を選択可能に | 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)
クレジットカードフォームの解剖学 | POSTD
オンラインでクレジットカードを使って支払うことは簡単ですよね？この答えはYesでもNoでもあります。Yesの理由は、インターネットが普及された初期からずっとそうしていたから（例：Amazon）。Noの理由は、まったく同じクレジットカードフォームは2つとないからです。 過去20年以上で、私たちはオンライン支払のメンタルモデルを作り上げてきました。「財布からクレジットカードを取り出して、ウェブのフォームに必要なカード情報を入力、そして申込みボタンを押す」というものです。しかし、ユーザーが答えないといけない質問でいっぱいなので、全てを入力するのはとてもややこしい行為になってしまいます。そして言うまでもなく、誰も取扱い説明書なんて読みたくありません。 さまざまな有名ウェブサイト・アプリのクレジットカードフォーム 何かの代金をオンラインで支払う時は、人へ支払う時より2,3倍遅れをとります。端末のボタ
フォームはラベルの配置場所で使いやすさが全然変わる！ユーザーが利用しやすいフォームを徹底考察 | コリス
あなたのフォームは、ユーザーが簡単に利用できますか？ もし簡単でないなら、フォーム入力を完了するのも予想以上に難しいとも言えます。 ユーザーが入力しやすく、そして入力内容の確認も簡単なフォームについての考察を紹介します。 Why Infield Top Aligned Form Labels are Quickest to Scan by anthony 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 フォームは入力前、入力後の分かりやすさが大切 最近のフォームで見かける問題 1つ目：ラベルとフィールドを上から順番に配置した場合 2つ目：ラベルをフィールドの内側に配置した場合 3つ目：ラベルをフィールドの内側のトップに配置した場合 ラベルの配置を内側トップに変えるとどうなるか ラベルを内側トップに配置するのが機能するフォームとは まと
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
入力フォームの「必須」「任意」のラベルは両方付けないとコンバージョン率が下がる
[レベル: 初〜中級] 入力フォームのフィールドには、入力が「必須」なのかまたは「任意」なのかのラベルを両方付けることが推奨されます。 どちらか片方だけだと入力途中の離脱の原因になります。 ECサイトのユーザービリティ調査と最適化を専門に扱っているBaymard Instituteが詳しく解説しています。 15の大手ECサイトのユーザビリティ調査と18の主要なモバイルサイトのユーザビリティ調査、そして自社による最新の大規模なアイトラッキングテストによって実証することができました。 この記事では、その解説の要点をまとめて紹介します。 片方だけの「必須」「任意」ラベルの問題点 入力が「必須」か「任意」かをどちらか片方のラベルだけで示すことにはさまざまな問題点があります。 必須か任意かを示さないのはいちばんよくない そのフィールドの入力が必須か任意かを示さないのはいちばんよくないスタイルです。
PHPの脆弱性への攻撃名称と対策メモ - Qiita
自分用メモ。ごちゃごちゃすると忘れるので、なるべくシンプルにまとめたい。 誤り、不備などあれば、随時追加修正します（ご指摘ありがとうございます）。 クロスサイトスクリプティング（cross site scripting、XSS） 概要 訪問者に目的のサイトとは別の罠サイトを踏ませて不正な処理を実行させる行為。 原因 フォームから受け取った値を、エスケープせずに画面に出力するために発生 （偽のフォームを作成する手法も有るので、JavaScriptの対策だけでは不足） HTMLの実体参照を用い、& を & に、< を < に、> を > に、" を " に、それぞれ置換する。 PHPではhtmlspecialchars関数を用いれば、一括で対策できる （ただしENT_QUOTESを設定しないとシングルクォーテーションはエスケープされない）
入力フォームを改善して入力完了率を上げる！ エントリーフォーム最適化15カ条 | 勝手にEFO分析-エントリーフォーム改善
入力フォーム（エントリーフォーム）を入力していて、イライラする……と感じたことありませんか。ありますよね。自社サイトの入力フォームでユーザーにイライラを与えていませんか。 小さなイライラが積み重なった先にあるのは、エントリーフォームからの離脱です。ユーザーが一度エントリーフォームから離脱してしまったら、もう戻ってきてはくれないと覚悟しておくべきです。入力を完了してもらいエントリーフォームの「入力完了率※」を上げるためにはどうしたらよいのでしょうか。 そこで、この記事ではEFO（エントリーフォームを最適化）を行い離脱要因を減らして、入力完了率を上げる15カ条を紹介します。 少し手間をかければ劇的に入力完了率アップが期待できるはずの、「惜しい」エントリーフォームを各条1つずつ取り上げて、頼まれてもいないのに、勝手にそのフォームを分析して作った改善案とともに、ポイントとなるエントリーフォーム改善
やってられるか！！蹴りたいフォームの１２要素 - WP-E (仮)
UXとか難しいことはよくわかんないですが こんにちわ！@ampersand_xyzです。UXとかUIデザインとか、かしこさが低いので小難しいことはわからないですが、個人的にかつ主観バリバリで「イヤだな」って思うことはわかる！ 飛行機やホテルの予約などで、ちょいちょいお問い合わせフォームや予約フォームを使うのだけど、その時に思わずイラッとしちゃうようなフォームの要素を思い出してまとめてみました。 （1）要件的に適切でなさそうな必須項目が多い 名前や返信先などの情報が必須になるのはそれはもちろん構わないけれども、 所属部署名、とか、業種、とかそういうのが必須の場合。 もちろん、問い合わせる先やその内容によって、 例えば、保険等に関する問い合わせだと業種によって契約の内容が違ってきたりするので必須になるのは頷けるけれども、これが食べ物の通販の問い合わせフォームとかで必須だったら「？」って感じる。
【保存版】問合せを劇的に増やすエントリーフォーム最適化（EFO）15の方法｜MarTechLab（マーテックラボ）
皆さんこんにちは。ギャプライズ鎌田（@kamatec）です。 今日は過去私が数百社という企業のプランニング・運用をしてきた中で実証した、 最も「手早く」「確実に」コンバージョンを伸ばす方法をご紹介します。 それがEFO、つまり「エントリーフォームの最適化」です。 Webサイトをリニューアルしなくとも、LPを作らなくとも、 エントリーフォームを変えるだけでコンバージョンは劇的に変わるのです。 実際の事例をいくつかご紹介しましょう。 Case1：ブライダル系サービスのEFO事例 http://www.primavera-wedding.co.jp Case2:ギャプライズクリックテールサイトのEFO事例 https://contentsquare.gaprise.jp/ Case3:システム系BtoBサービスのEFO事例 これらの事例はいずれも変更したのはエントリーフォームだけです。 特にフォ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エラーメッセージをフォーム上部に出すのはNG! 登録フォームの離脱を減らすエラー表示とは?／15か条の8 | 勝手にEFO分析-エントリーフォーム改善
http://blog.bluearrowslab.com/smartphone/topicks/125/