Contact Form 7の送信完了時にコンバージョン測定タグを表示する方法
WordPressのフォームと言えば「Contact Form 7」。 非常に便利で柔軟なカスタマイズもでき、さらに多くのオプションがあらかじめ存在しているので重宝しますね。 このフォームの「送信完了時」にGoogleアドワーズやYahooスポンサードサーチ、YDNなどのコンバージョン測定タグを表示する方法をまとめてみました。 一般的な方法としては「送信完了画面」を表示するようにカスタマイズを行い、その完了画面にコンバージョンタグを設置するようですが、今回は完了画面の表示はせずに実現する方法を考えました。（完了画面って無意味だと思うので。） ※追記： 残念ながら、この方法でコンバージョン計測すると、値が正常値よりも多くなるようです。 おそらく、厳密に送信完了していないにもかかわらず計測されるか、もしくは送信完了後の画面遷移やリロード時に重複して計測されているものと思われます。 なので、CV
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
入力フォームの「必須」「任意」のラベルは両方付けないとコンバージョン率が下がる
[レベル: 初〜中級] 入力フォームのフィールドには、入力が「必須」なのかまたは「任意」なのかのラベルを両方付けることが推奨されます。 どちらか片方だけだと入力途中の離脱の原因になります。 ECサイトのユーザービリティ調査と最適化を専門に扱っているBaymard Instituteが詳しく解説しています。 15の大手ECサイトのユーザビリティ調査と18の主要なモバイルサイトのユーザビリティ調査、そして自社による最新の大規模なアイトラッキングテストによって実証することができました。 この記事では、その解説の要点をまとめて紹介します。 片方だけの「必須」「任意」ラベルの問題点 入力が「必須」か「任意」かをどちらか片方のラベルだけで示すことにはさまざまな問題点があります。 必須か任意かを示さないのはいちばんよくない そのフィールドの入力が必須か任意かを示さないのはいちばんよくないスタイルです。
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
contact form 7で携帯電話メールフォーム
コンタクトフォーム７について質問させてください。 contact form 7とk-tai styleの併用で携帯サイトのコンタクトフォームを作りました。 どちらも問題なく設置でき動作しているのですが、コンタクトフォーム7の送信完了のメッセージがフォームの下に表示されてしまうので、携帯電話からだと「送信」ボタンを押すとページの先頭に戻ってしまい、メッセージが隠れてしまいます。 できれば携帯電話でも送信が完了した旨を確認させる方法はないかと探っているというのが現状です。 リダイレクトかメッセージの表示位置を変えることで対応できないかと思いましたが、都合上どうしてもメールフォームはページのかなり下に表示させざるを得ないので表示位置の変更は難しいようですし、リダイレクトはjavascriptを用いた手法には検索で当たったのですが携帯電話なのでその手法は使えません。 どなたか同じような経験をされた
WordPress：お問い合わせフォームを簡単に設置できるプラグイン「Contact Form 7」の備忘録 - NxWorld
「Contact Form 7」はお問い合わせフォームを簡単に設置でき、様々なカスタマイズも可能なので、多くのサイトで紹介・使用されているプラグインのひとつだと思います。 公式サイトでも多くの情報がありますし、人気のあるプラグインなので検索でもいろいろと出てはくるのですが、これだけ見れば良いっていう自分好みの感じのものを作りたかったので、使う頻度が高い使用方法やカスタマイズなどを備忘録としてまとめてみました。 紹介している内容は、WordPress Ver 3.5.1 と Contact Form 7 Ver 3.4.1 で確認等行ったものです。 Contact Form 7について フォームを作成する際、ほとんどの場合PHPなどのプログラミング知識が必要になってきます。 よほどの知識・技術がある人であれば容易に作ってしまうのかもしれませんが、ゼロからのフォーム作成は結構面倒ですし、知識が
[Google調べ] 入力フォームの最適化のために必須な4つの設定
[対象: 全員] Google Research Blogがユーザーテストに基づいてまとめたレポートから、入力フォームの完了にもっとも大きな影響を与えた設定をこの記事では紹介します。 次の4つの設定になります。 入力条件を事前に指示する エラーメッセージをフィールドの横に配置する 必須の項目と任意の項目を区別しやすくする ラベルをフィールドの上に配置する 順に説明します。 入力条件を事前に指示する 入力条件（たとえば、パスワードの最低文字数）は、フォームを送信する前にフォームのなかで指示します。 このガイドラインの適用は、フォームの完了と被験者の評価に大きなプラスの影響を与えました。また、被験者のコメントにも（前もって指示してもらった方がいいと）頻繁に現れました。 エラーメッセージをフィールドの横に配置する ユーザーがすぐに訂正できるように、エラーメッセージは入力フィールドの隣に配置します
入力フォーム改善でCV率1.6倍！成果を上げる18のテクニック | LISKUL
たかが入力フォーム、されど、入力フォーム。 ユーザーが入力フォームに入力しているとき、もう気持ちは「購入します！」「申し込みます！」と決まっているはずです。 しかし、入力フォームが使いにくいために、せっかくの顧客をのがしてしまう可能性があるのです。 サイトへの流入はあるのに成果が上がらない・・・。 フォームPV数とコンバージョン数に差がある・・・。 そんな時には入力フォームを見直すべきかもしれません！ 入力フォームについて書かれている16の記事、サイトを参考に、結局、なにが重要なのか、基本と応用合わせて18のテクニックを厳選し、事例を交えてお伝えします。 入力フォーム改善の威力、条件を知ることで、成果を上げる入力フォームを作ることができるはずです。 失敗しない入力フォームを選ぶ！【LISKUL特集（2019年版）】CVR改善ツール一覧>> ※本記事は2014年7月29日に公開された記事をL
アナリティクスのイベント分析でフォームを改善しよう
入力フォームの問題点をGoogleアナリティクスのイベントトラッキングで分析し、改善の4原則で効果的に改善する方法。 入力フォームを改善するときにGoogleアナリティクスで分析してフォームの問題点を探ることがある。そのとき、目標到達プロセス、フォームへの流入や流出などを見て問題点を見つけていくのだが、アナリティクスはそのままではフォーム内の入力状況まで追うことができない。そこで、Googleアナリティクスを機能拡張する GA Functions を使ってフォーム内の入力状況を測定し、フォームの問題点を分析、改善する方法を紹介する。また、改善の4原則ECRSからフォーム改善のプロセスをステップを踏みながら実行してく方法も合わせて解説する。 アナリティクスでイベントトラッキングを測定する Googleアナリティクスにはイベントトラッキングという機能がある。ウェブサイトのページビュー以外の動作
サイトやアプリのユーザビリティを向上させる35のポイント | ベイジの社長ブログ
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
これさえやれば1.X倍!?実際に効果が出たEFOオススメ施策ベスト10 | エフトラEFOブログ
EFOは、実際に施策を実行し、改善を繰り返すことが重要です。 当社でも、運営メディアのフォームで常に効果分析と改善を繰り返しています。 以前発表したスライドの中でもお伝えしたのですが、 今回は、当社運営メディアや当社EFOツール「エフトラEFO」をご導入いただいた企業様のフォームで実際に効果のあった施策を、その改善率とともにランキング形式でご紹介したいと思います。 まずは10位から6位のご紹介 それではさっそく、紹介していきます！ 10～6位目次 10位 住所自動入力 9位 スマートフォンに適した入力支援 8位 ガイド表示 7位 初期文言表示 6位 リアルタイムアラート 10位 住所自動入力 住所自動入力とは、郵便番号を入れると住所が自動で入る機能のことです。 郵便番号で住所を入力してくれるタイプのフォームはたくさんありますが、郵便番号入力後、検索ボタンなどを押下する必要なものがほと
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
お願いだからWebフォームではを正しく使ってユーザビリティを上げてくれ | 初代編集長ブログ―安田英久
今日は、Webフォームが「うわ、使いづらい」となってしまわないようにする、意外と対応されていないことが多いHTMLタグ「<label>」について。 HTMLを自分で書かないWeb担当者さんでも、デザイナーさんが作ったフォームに関して最低限これだけはチェックしておくといいですよ、というお話しです。 コンバージョンの要である「Webフォーム」。アクセス解析での改善やEFO（入力フォーム最適化）をしていると思いますが、意外と忘れられていることが多い「<label>」をご存じでしょうか。 フォームの入力項目それぞれの「ラベル（項目名）」を書くためのHTMLの作法なのですが、これをちゃんと使っているかどうかで、フォームの使いやすさがガラッと変わるのです。 一番わかりやすいのは、ラジオボタンやチェックボックス。<label>をちゃんと使っていると、ボタン部分ではなく文字の部分をクリックするだけで項目を
【保存版】問合せを劇的に増やすエントリーフォーム最適化（EFO）15の方法｜MarTechLab（マーテックラボ）
皆さんこんにちは。ギャプライズ鎌田（@kamatec）です。 今日は過去私が数百社という企業のプランニング・運用をしてきた中で実証した、 最も「手早く」「確実に」コンバージョンを伸ばす方法をご紹介します。 それがEFO、つまり「エントリーフォームの最適化」です。 Webサイトをリニューアルしなくとも、LPを作らなくとも、 エントリーフォームを変えるだけでコンバージョンは劇的に変わるのです。 実際の事例をいくつかご紹介しましょう。 Case1：ブライダル系サービスのEFO事例 http://www.primavera-wedding.co.jp Case2:ギャプライズクリックテールサイトのEFO事例 https://contentsquare.gaprise.jp/ Case3:システム系BtoBサービスのEFO事例 これらの事例はいずれも変更したのはエントリーフォームだけです。 特にフォ
【※注: 2023年現在開発終了】受託案件で活躍しそうなWordPressメールフォームプラグイン「MW WP Form」を使ってみた
2023年9月現在、MW WP Form の開発はすでに停止しています。 新規での導入は行わないようにしてください。 詳細は、開発者のキタジマさんご自身も出演されているYouTubeチャンネル hook wp_ の放送にてご確認ください！ WordPressでメールフォームが必要なとき、 ブログとか、簡単でいい時はContact Form 7 コーポレートサイトで、一般の問い合わせを受ける程度ならTrust Form 入力項目が細かくてフロントに凝りたいときや、カスタムフィールドとかと連携させて投稿内の情報をフォームに反映させたい場合はプラグインを使わず外部のPHP製メールフォームを埋め込み という風に使い分けています。 そこに、フォームプラグインの第三極が現れました！ ことのきっかけは、使用ケースの多いロリポップやhetemlと、Trust Formの相性が今一歩なことにはじまります。
CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
go4it: Formを異なる日本語文字コード送信。Accept-charsetでは不十分で文字化け対策
送信Formを埋め込みたいWebページの日本語文字コードと、送信先のURLの日本後文字コードが異なる場合のお話。 例えば、EUC-JPでエンコードされているブログページに送信Formを貼り付けたいが、送信先のURLはShift-JISだった場合など。 よくある対策は、 <form method="get" action="xxx.html" Accept-charset="Shift_JIS"> <input type="text" name="word" size=20 > <input type="submit" value="送信" > </form> のようにAccept-charset属性で送信先URLの日本語文字エンコード（Shift-JIS)を指定して促す方法である。 しかしこの設定はFirefoxなどでは有効だが、IEでは無効である。 そこで、Javascriptを使ってF
ページを移動（離脱）するときにjQueryで警告を出す方法
Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 １．ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $(window).on('beforeunload', function() { return '投稿が完了していません。このまま移動しますか？'; }); }); </script> <form method="post" acti
jQueryで入力フォームの上にテキストを表示する「プレースホルダ（placeholder）」を作ってみる｜BLACKFLAG
入力フォームの上にあらかじめ入力例や注意書きを表示する「プレースホルダ（placeholder）」。 入力する際の注意書きや入力例などを予め表示しておくことで、ユーザーに優しいUIにすることができます。 HTML5ではplaceholder属性という、新たな属性として簡単にプレースホルダを表示できるようになっていますが HTML5に対応していないブラウザではJSなどを使って実装しなくてはいけません。 このプレースホルダを表示するjQueryプラグインも多々ありますが シンプルなスクリプト構成で実装できないか、試しにやってみたので紹介してみます。 まずは実装サンプルから。 下記の入力フォーム（INPUTテキスト、パスワード、テキストエリア）にフォーカスすると 表示されているテキストが消えます。 入力フォームからフォーカスが外れた際に、 フォーム内に何か任意のテキストが入力されていると プレー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MW WP Form の使い方
