Suche senden
Hochladen
Contact Form 7 よくあるカスタマイズ
•
77 gefällt mir
•
99,878 views
Cherry Pie Web
Folgen
WordBench京都 2013年1月13日 (2015年7月27日 Contact Form 7 の表記を正しく修正しました)
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 68
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
MOCKS | Yuta Morishige
AdaFace(CVPR2022)
AdaFace(CVPR2022)
Kazuki Maeno
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
Tsutomu Sogitani
はじめてのPRD
はじめてのPRD
Takuya Oikawa
ひたすら楽してスライド作成
ひたすら楽してスライド作成
Masanori Morise
情報検索の基礎
情報検索の基礎
Retrieva inc.
トップエンジニアが実践する思考整理法~テクニカルライティングを用いた課題解決の基本
トップエンジニアが実践する思考整理法~テクニカルライティングを用いた課題解決の基本
Hajime Fujita
Crfと素性テンプレート
Crfと素性テンプレート
Kei Uchiumi
Empfohlen
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
MOCKS | Yuta Morishige
AdaFace(CVPR2022)
AdaFace(CVPR2022)
Kazuki Maeno
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
Tsutomu Sogitani
はじめてのPRD
はじめてのPRD
Takuya Oikawa
ひたすら楽してスライド作成
ひたすら楽してスライド作成
Masanori Morise
情報検索の基礎
情報検索の基礎
Retrieva inc.
トップエンジニアが実践する思考整理法~テクニカルライティングを用いた課題解決の基本
トップエンジニアが実践する思考整理法~テクニカルライティングを用いた課題解決の基本
Hajime Fujita
Crfと素性テンプレート
Crfと素性テンプレート
Kei Uchiumi
CODE FESTIVAL 2015 予選A 解説
CODE FESTIVAL 2015 予選A 解説
AtCoder Inc.
機械学習で泣かないためのコード設計
機械学習で泣かないためのコード設計
Takahiro Kubo
【DL輪読会】SimCSE: Simple Contrastive Learning of Sentence Embeddings (EMNLP 2021)
【DL輪読会】SimCSE: Simple Contrastive Learning of Sentence Embeddings (EMNLP 2021)
Deep Learning JP
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
Shoe-g Ueyama
メッセージとストーリーのない発表はカスだ アカデミック・プレゼンテーションのコツ
メッセージとストーリーのない発表はカスだ アカデミック・プレゼンテーションのコツ
Kei Gomi
ヤフーの検索基盤と機械学習検索ランキング #yjtc / YJTC21 B-7
ヤフーの検索基盤と機械学習検索ランキング #yjtc / YJTC21 B-7
Yahoo!デベロッパーネットワーク
Lagrangian Fluid Simulation with Continuous Convolutions
Lagrangian Fluid Simulation with Continuous Convolutions
farukcankaya
研究発表のためのパワーポイント資料作成の基本
研究発表のためのパワーポイント資料作成の基本
Hisashi Ishihara
TokyoR98_BeginnersSession1.pdf
TokyoR98_BeginnersSession1.pdf
kotora_0507
OSS強化学習フレームワークの比較
OSS強化学習フレームワークの比較
gree_tech
絶対に描いてはいけないグラフ入りスライド24枚
絶対に描いてはいけないグラフ入りスライド24枚
itoyan110
SATySFi 最近の発展と目下実装中の変更
SATySFi 最近の発展と目下実装中の変更
T. Suwa
ベイズ統計モデリングと心理学
ベイズ統計モデリングと心理学
Shushi Namba
ゼロから学ぶAI
ゼロから学ぶAI
DIVE INTO CODE Corp.
【DL輪読会】Factory: Fast Contact for Robotic Assembly
【DL輪読会】Factory: Fast Contact for Robotic Assembly
Deep Learning JP
【DL輪読会】DreamBooth: Fine Tuning Text-to-Image Diffusion Models for Subject-Dri...
【DL輪読会】DreamBooth: Fine Tuning Text-to-Image Diffusion Models for Subject-Dri...
Deep Learning JP
ベイズと認知モデルと教師なし学習
ベイズと認知モデルと教師なし学習
nozyh
【DL輪読会】マルチモーダル 基盤モデル
【DL輪読会】マルチモーダル 基盤モデル
Deep Learning JP
【DL輪読会】Dropout Reduces Underfitting
【DL輪読会】Dropout Reduces Underfitting
Deep Learning JP
SSII2022 [OS1-01] AI時代のチームビルディング
SSII2022 [OS1-01] AI時代のチームビルディング
SSII
concrete5を使って分かった、WordPressのいいところ
concrete5を使って分かった、WordPressのいいところ
Cherry Pie Web
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
Cherry Pie Web
Weitere ähnliche Inhalte
Was ist angesagt?
CODE FESTIVAL 2015 予選A 解説
CODE FESTIVAL 2015 予選A 解説
AtCoder Inc.
機械学習で泣かないためのコード設計
機械学習で泣かないためのコード設計
Takahiro Kubo
【DL輪読会】SimCSE: Simple Contrastive Learning of Sentence Embeddings (EMNLP 2021)
【DL輪読会】SimCSE: Simple Contrastive Learning of Sentence Embeddings (EMNLP 2021)
Deep Learning JP
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
Shoe-g Ueyama
メッセージとストーリーのない発表はカスだ アカデミック・プレゼンテーションのコツ
メッセージとストーリーのない発表はカスだ アカデミック・プレゼンテーションのコツ
Kei Gomi
ヤフーの検索基盤と機械学習検索ランキング #yjtc / YJTC21 B-7
ヤフーの検索基盤と機械学習検索ランキング #yjtc / YJTC21 B-7
Yahoo!デベロッパーネットワーク
Lagrangian Fluid Simulation with Continuous Convolutions
Lagrangian Fluid Simulation with Continuous Convolutions
farukcankaya
研究発表のためのパワーポイント資料作成の基本
研究発表のためのパワーポイント資料作成の基本
Hisashi Ishihara
TokyoR98_BeginnersSession1.pdf
TokyoR98_BeginnersSession1.pdf
kotora_0507
OSS強化学習フレームワークの比較
OSS強化学習フレームワークの比較
gree_tech
絶対に描いてはいけないグラフ入りスライド24枚
絶対に描いてはいけないグラフ入りスライド24枚
itoyan110
SATySFi 最近の発展と目下実装中の変更
SATySFi 最近の発展と目下実装中の変更
T. Suwa
ベイズ統計モデリングと心理学
ベイズ統計モデリングと心理学
Shushi Namba
ゼロから学ぶAI
ゼロから学ぶAI
DIVE INTO CODE Corp.
【DL輪読会】Factory: Fast Contact for Robotic Assembly
【DL輪読会】Factory: Fast Contact for Robotic Assembly
Deep Learning JP
【DL輪読会】DreamBooth: Fine Tuning Text-to-Image Diffusion Models for Subject-Dri...
【DL輪読会】DreamBooth: Fine Tuning Text-to-Image Diffusion Models for Subject-Dri...
Deep Learning JP
ベイズと認知モデルと教師なし学習
ベイズと認知モデルと教師なし学習
nozyh
【DL輪読会】マルチモーダル 基盤モデル
【DL輪読会】マルチモーダル 基盤モデル
Deep Learning JP
【DL輪読会】Dropout Reduces Underfitting
【DL輪読会】Dropout Reduces Underfitting
Deep Learning JP
SSII2022 [OS1-01] AI時代のチームビルディング
SSII2022 [OS1-01] AI時代のチームビルディング
SSII
Was ist angesagt?
(20)
CODE FESTIVAL 2015 予選A 解説
CODE FESTIVAL 2015 予選A 解説
機械学習で泣かないためのコード設計
機械学習で泣かないためのコード設計
【DL輪読会】SimCSE: Simple Contrastive Learning of Sentence Embeddings (EMNLP 2021)
【DL輪読会】SimCSE: Simple Contrastive Learning of Sentence Embeddings (EMNLP 2021)
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
メッセージとストーリーのない発表はカスだ アカデミック・プレゼンテーションのコツ
メッセージとストーリーのない発表はカスだ アカデミック・プレゼンテーションのコツ
ヤフーの検索基盤と機械学習検索ランキング #yjtc / YJTC21 B-7
ヤフーの検索基盤と機械学習検索ランキング #yjtc / YJTC21 B-7
Lagrangian Fluid Simulation with Continuous Convolutions
Lagrangian Fluid Simulation with Continuous Convolutions
研究発表のためのパワーポイント資料作成の基本
研究発表のためのパワーポイント資料作成の基本
TokyoR98_BeginnersSession1.pdf
TokyoR98_BeginnersSession1.pdf
OSS強化学習フレームワークの比較
OSS強化学習フレームワークの比較
絶対に描いてはいけないグラフ入りスライド24枚
絶対に描いてはいけないグラフ入りスライド24枚
SATySFi 最近の発展と目下実装中の変更
SATySFi 最近の発展と目下実装中の変更
ベイズ統計モデリングと心理学
ベイズ統計モデリングと心理学
ゼロから学ぶAI
ゼロから学ぶAI
【DL輪読会】Factory: Fast Contact for Robotic Assembly
【DL輪読会】Factory: Fast Contact for Robotic Assembly
【DL輪読会】DreamBooth: Fine Tuning Text-to-Image Diffusion Models for Subject-Dri...
【DL輪読会】DreamBooth: Fine Tuning Text-to-Image Diffusion Models for Subject-Dri...
ベイズと認知モデルと教師なし学習
ベイズと認知モデルと教師なし学習
【DL輪読会】マルチモーダル 基盤モデル
【DL輪読会】マルチモーダル 基盤モデル
【DL輪読会】Dropout Reduces Underfitting
【DL輪読会】Dropout Reduces Underfitting
SSII2022 [OS1-01] AI時代のチームビルディング
SSII2022 [OS1-01] AI時代のチームビルディング
Mehr von Cherry Pie Web
concrete5を使って分かった、WordPressのいいところ
concrete5を使って分かった、WordPressのいいところ
Cherry Pie Web
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
Cherry Pie Web
Adobe Illustratorによる WordPressテーマ作成ワークフロー
Adobe Illustratorによる WordPressテーマ作成ワークフロー
Cherry Pie Web
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
Cherry Pie Web
お客様のための管理画面カスタマイズ
お客様のための管理画面カスタマイズ
Cherry Pie Web
南実業会Webサイト開設について
南実業会Webサイト開設について
Cherry Pie Web
「フォントはしゃべる」というお話
「フォントはしゃべる」というお話
Cherry Pie Web
WordPressのサーバー間引っ越しのツボ
WordPressのサーバー間引っ越しのツボ
Cherry Pie Web
.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説
Cherry Pie Web
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Cherry Pie Web
Mehr von Cherry Pie Web
(10)
concrete5を使って分かった、WordPressのいいところ
concrete5を使って分かった、WordPressのいいところ
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
Adobe Illustratorによる WordPressテーマ作成ワークフロー
Adobe Illustratorによる WordPressテーマ作成ワークフロー
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
お客様のための管理画面カスタマイズ
お客様のための管理画面カスタマイズ
南実業会Webサイト開設について
南実業会Webサイト開設について
「フォントはしゃべる」というお話
「フォントはしゃべる」というお話
WordPressのサーバー間引っ越しのツボ
WordPressのサーバー間引っ越しのツボ
.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Kürzlich hochgeladen
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
Kürzlich hochgeladen
(12)
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
Contact Form 7 よくあるカスタマイズ
1.
2013/01/13 WordBench京都 Cherry Pie Web
川井昌彦 Contact Form 7の よくあるカスタマイズ
2.
2 自己紹介 ●川井昌彦(かわいまさひこ) @sakuragi_kei 東京の制作会社で24年間勤めた後、 京都府舞鶴市に帰郷してフリーランスで活動中 実は、DTPのほうが経験が長い (このスライドも InDesign
で作っています) 実は、MovableTypeのほうが経験が長い 小桜インコ・シロハラインコ・黒い柴犬のパパ Cherry Pie Web http://www.cherrypieweb.com
3.
3 Contact Form 7
について
4.
4 Contact Form 7とは? WordPressに 「メールフォーム」を追加するプラグイン 一から作ると、プログラミングが必要で めんどくさい「メールフォーム」を、 管理画面の設定だけで作成できます
5.
5 メールフォームの流れ チェック、送信部分は、HTMLだけでは作れない 入力 • Formタグ、 Inputタグなどで 構成 • HTMLのみで 作れる チェック •
入力値の チェック • プログラミング が必要 送信 • メール本文構築、 メールサーバー との通信 • プログラミング が必要
6.
6 チェックは面倒だけどおろそかにできない! • セッション管理 • 不正なタグやコマンドを入力された場合の対処 • メール送信失敗時の対処 • もちろん、 必須チェック、 メールアドレスチェック、 確認用入力の整合チェック ・・・なんかも必要です
7.
7 でもContact Form 7なら プログラミング不要! 難しそうなところは全部やってくれます プログラミングとか、できなくても大丈夫 メールサーバーとか気にしなくてもOK (気にしないといけないこともあるけど・・・)
8.
8 本日のメニュー ≫ よくあるカスタマイズ ●公式サイトを見ればすぐにできること 1. 自動返信メールを送信する 2. 送信日時などをメールに挿入する 3. フォームのデフォルト値を設定する・透かし文字を入れる 4. Google Analyticsで送信完了イベントを取得する ●公式サイトを読めば書いてあるけど、わかりにくいこと 1. セレクトメニュー・ラジオボタン・チェックボックスで、 表示文字と送信される値を異なる値にする 2. テキストフィールドへ値を渡す
9.
9 ●公式サイトには書いてないこと(非推奨なものあり) 1. IME(日本語入力)の自動切り替えをする 2. 送信ボタンを画像にする 3. 郵便番号入力で住所を自動入力する 4. メールアドレス入力時に、確認用メールアドレスを入れて整合チェックをする 5. 送信完了画面を表示する 6. 確認画面を表示する ≫ トラブルシューティング 1. メールフォームから大量のスパムメールが送られてくる 2. メールが届かない 3. 送信ボタンを連打される
10.
10 Contact Form 7 よくあるカスタマイズ
11.
11 自動返信メールを送信する メール(2)を使う あて先のところに、メールアドレス入力フォームの名前を 指定すればOKです [your-email] とかです。 書いてある
12.
12 送信日時などをメールに挿入する 特別なメールタグを使う (例) [_date] 送信日付 [_time] 送信時刻 [_remote_ip] 送信者のIPアドレス [_post_title] メールフォームのある投稿のタイトル 書いてないわかりにくい書いてある
13.
13 フォームのデフォルト値を設定する たとえば、こんな感じ 書いてある
14.
14 ⑴テキスト で囲んでデフォルト値を指定します [text
text1 デフォルト値] watermarkオプション → 透かし文字になります [text text2 watermark 入力の説明]
15.
15 ⑵チェックボックス・ラジオボタン defaultオプションで、何個目かを指定します チェックボックスは、複数指定できます ラジオボタンは、複数指定できません [checkbox your-check2 default:2_4
a b c d e]
16.
16 ⑶セレクトメニュー defaultオプションで、何個目かを指定します 複数指定したいときは multipleオプションをつけます [select your-select1
multiple default:2_4 a b c d e] 初期値を空にするときは、 include_blankオプションをつけます [select your-select2 include_blank a b c d e] (注意)表示は「…」ですが、 送信される値は null になります!
17.
17 セレクトメニュー・ラジオボタン・ チェックボックスで、表示文字と 送信される値を異なる値にする 値を | で区切る [select
your-select option1|value1 option2|value2 option3|value3] 書き出されるHTMLは、 | より前の文字になっていますが、 メールに埋め込まれる値は、 | より後の文字になります ※送信される値は送信時にプラグインが置き換えるので、 ユーザーに知られることがありません。 わかりにくい
18.
18 テキストフィールドへ値を渡す フォームへGETパラメータで渡す 1. フォームで値を渡したい部分に名前をつけます pお名前 (必須)br / [text*
your-name] /p p題名br / [text your-subject] /p 2. フォームへのリンクに GETパラメーターを仕込みます a href=/wp/?page_id=nyourname=名前subject=題名フォームへ/a (フォームとパラメータの名前は違うものにしたほうが、後でデバッグしやすいです) わかりにくい
19.
19 3. functions.php に、 フォームの内容に応じて下記のように記述します function my_tag_filter($tag){ if
( ! is_array( $tag ) ) return $tag; if(isset($_GET['yourname'])){ $name = $tag['name']; ←ここは変えちゃダメ! if($name == 'your-name') $tag['values'] = (array) $_GET['yourname']; } if(isset($_GET['subject'])){ $name = $tag['name']; if($name == 'your-subject') $tag['values'] = (array) $_GET['subject']; } return $tag; } add_filter('wpcf7_form_tag', 'my_tag_filter', 11);
20.
20 しかし! これだと、IEで日本語のパラメータが 文字化けしてしまいます!! → フォームへのリンクで、urlencode関数を使います a href=/wp/?page_id=xxx yourname=?php
echo urlencode('名前'); ? subject=?php echo urlencode('題名'); ?フォームへ/a (読みやすいように改行しています)
21.
21 投稿やページに入れる時はショートコードを使います functions.php でショートコードを定義 function urlencode_text_shortcode($attr)
{ extract(shortcode_atts(array( 'val' = '', ), $attr)); return urlencode($val); } add_shortcode('urlencode_text', 'urlencode_text_shortcode'); 投稿やページでは、 a href=/wp/?page_id=xxx yourname=[urlencode_text val='名前'] subject=[urlencode_text val='題名']フォームへ/a 他のブラウザだと問題がみつからないので、 IEでのテストは必ずやりましょう!
22.
22 IME(日本語入力)の 自動切り替えをする フォーム設定画面でタグにclassを指定し、 CSSでIMEのモードを指定する 1. フォームでclass指定します pお名前br / [text
your-name class:name] /p pメールアドレスbr / [email your-email class:email] /p pメッセージ本文br / [textarea your-message class:message] /p 書いてない
23.
23 2. style.cssでIMEのモードを指定します form.wpcf7-form .email
{ ime-mode: inactive; ←IME OFF } form.wpcf7-form .name, form.wpcf7-form .message { ime-mode: active; ←IME ON }
24.
24 送信ボタンを画像にする ⑴ CSSで画像にする フォーム指定時に、送信ボタンにclassをつけます [submit class:imgsubmit] style.cssで背景画像として設定します input.imgsubmit
{ border: none; width: 100px; ←画像の幅 height: 30px; ←画像の高さ background: url(送信ボタンの画像のURL) left top no-repeat; text-indent: -9999px; ←ボタンのテキストを非表示にする } (読みやすいように改行しています) 書いてない書いてない
25.
25 ⑵自前の送信ボタンにする input type=image value=送信
src=ボタン画像のURL class=wpcf7-form-control wpcf7-submit / (読みやすいように改行しています) ・ボタン画像のURLは、絶対URLか、ルートディレクトリからのパス ・class=wpcf7-form-control wpcf7-submit をつけないと、 メール送信時にローディング画像が表示されません マウスオーバーさせたいなら、こんな感じです input type=image value=送信 class=wpcf7-form-control src=通常のボタン画像のURL onmouseover=this.src='マウスオーバー時のボタン画像のURL' onmouseout=this.src='通常のボタン画像のURL' class=wpcf7-form-control wpcf7-submit / (読みやすいように改行しています)
26.
26 郵便番号入力で 住所を自動入力する Ajaxzip3 を組み込む (簡単なJavaScriptを組みます) 書いてない書いてない
27.
27 1. Contact Form 7
のフォームに id を設定します p郵便番号br / [text zip1] - [text zip2 id:zip]/p p住所br / [text address] /p 2. フォームに onKeyupイベントを追加するため、 JavaScriptを作成します (テーマディレクトリ)/js/jquery.wpcf7.ajaxzip3.js $(function(){ $(#zip).keyup(function(event){ AjaxZip3.zip2addr(zip1,zip2,address,address); }) }) ※AjaxZip3の書式 AjaxZip3.zip2addr(〒上3桁, 〒下4桁, 都道府県, 市区町村, 町域大字, 丁目番地 );
28.
28 3. functions.php で読み込みます function cf7_ajaxzip3()
{ wp_enqueue_script( 'ajaxzip3', 'http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js', array('jquery')); wp_enqueue_script( 'wpcf7-ajaxzip3', get_stylesheet_directory_uri().'/js/jquery.wpcf7.ajaxzip3.js', array('ajaxzip3')); } add_action('wp_print_scripts', 'cf7_ajaxzip3'); (読みやすいように改行しています) wp_enqueue_script を使うと、 bodyの閉じタグの直前にスクリプトが出力されます。
29.
29 ※jQueryは、読み込み直しましょう。 WordPressにはjQueryが組み込まれていますが、noConfrictが含められていて、関 数をカプセル化しないと使えない仕様になっていて使いづらいです。 また、下記の形で読み込んだほうが、一般的に高速で動作します。 function load_cdn() {
if ( !is_admin() ) { wp_deregister_script('jquery'); wp_enqueue_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', array(), '1.7.2' ); } } add_action('init', 'load_cdn'); (jQueryのバージョンは、新しいものに置き換えていただいても良いと思います)
30.
30 メールアドレス入力時に、 確認用メールアドレスを入れて 整合チェックをする フィルターフックに チェックプログラムをひっかける Contact Form 7で 確認用メールアドレスの入力フォームを加える方法 http://hello.lumiere-couleur.com/smilkobuta/2010/12/02/contact-form-7%E3% 81%A7%E7%A2%BA%E8%AA%8D%E7%94%A8%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%8 3%89%E3%83%AC%E3%82%B9%E3%81%AE%E5%85%A5%E5%8A%9B%E3%83%95%E3%82%A9%E3%83% BC%E3%83%A0%E3%82%92%E5%8A%A0/ 書いてない
31.
31 1. フォームに確認用のタグを追加します pメールアドレスbr / [email* your-email]
/p pメールアドレス (確認用)br / [email* your-email_confirm] /p 確認用メールアドレスの名前は、 メールアドレスの名前に、 _confirm を付け足したものになります
32.
32 2. functions.phpに以下を書きます (参考サイトに載っているコードの丸写しでOK) ?php add_filter( 'wpcf7_validate_email', 'wpcf7_text_validation_filter_extend',
11, 2 ); add_filter( 'wpcf7_validate_email*', 'wpcf7_text_validation_filter_extend', 11, 2 ); function wpcf7_text_validation_filter_extend( $result, $tag ) { $type = $tag['type']; $name = $tag['name']; $_POST[$name] = trim( strtr( (string) $_POST[$name], n, ) ); if ( 'email' == $type || 'email*' == $type ) { if (preg_match('/(.*)_confirm$/', $name, $matches)){ $target_name = $matches[1]; if ($_POST[$name] != $_POST[$target_name]) { $result['valid'] = false; $result['reason'][$name] = '確認用のメールアドレスが一致していません'; } } } return $result; } ?
33.
33 送信完了画面を表示する もし、クライアントから「送信完了画面を作ってください」と 言われたら・・・ まず、 「何のために必要なんですか?」 と聞いてください
34.
34 そしてもし、 「Google Analyticsで フォーム送信をトラッキングしたいから」 と言われても・・・ (つまり、「送信完了ページへの移動」を 「フォーム送信完了」としたいということ)
35.
35 「そのために、 送信完了画面を作る必要は あ り ま せ ん !」
36.
36 Google Analyticsで 送信完了イベントを取得する方法 _trackPageviewを使う ●フォーム送信を Google
Analytics でトラッキングする http://contactform7.com/ja/tracking-form-submissions-with-google-analytics/ (注意) 上記のページに書いてある方法は「同期式」トラッキングコード使用時のものですが、 最近はほとんど「非同期式」です。 非同期式の場合の説明もあるのですが、わかりづらいので注意してください。 書いてある
37.
37 管理画面のフォーム設定ページの一番下に「その他の設 定」の項目があるので、そこに以下の行を挿入します on_sent_ok: _gaq.push(['_trackPageview', 'complete.html']); ※書式 _gaq.push(['_trackPageview',
'仮想ページ名']); 仮想ページ名は、実際に存在しなくても構いません。 ページへのリンクとして認識されるので、 目標値(コンバージョン)に設定できます。 _trackEventを使って、フォーム送信をイベントとしてとらえることもできます。 イベントも目標値として設定できるらしいです。 また、仮想ページを目標値にすると、ウェブマスターツールでクロールエラーが記録され ることがあるらしい(検索パフォーマンスには影響がない)です。
38.
38 話が脱線したので、元に戻します・・・ では、Google Analyticsのトラッキングが目的でない場 合は・・・? たとえば、 「完了メッセージが下の方に出るので、気づきにくい」 「送信完了後に、メールフォームが残ってたらカッコ悪い」 「違うページへのリンクや、バナーを表示したい」 なんてときです。
39.
39 ⑴送信完了後、完了ページへ飛ばす 1. 固定ページなどで完了ページを作ります 2. フォーム設定の「その他の設定」に、下記のように記述し ます on_sent_ok: location =
'完了ページのURL'; 先ほど出てきた「on_sent_ok」は、送信完了後に、 そのあとに記述したJavaScriptを実行します
40.
40 ⑵CSSでなんとかする 実は、さきほどのようなことなら、CSSでなんとかなります
41.
41 ●送信完了後、フォーム部分を非表示にして メッセージだけ表示する 1. フォーム設定画面で、全体をdivタグで囲みます div class=form-wrapper pお名前br / [text
your-name]/p pメールアドレスbr / [email your-mail]/p p[submit 送信] /div 2. style.cssに下記のように記述します .sent .form-wrapper { display: none; } フォームが送信されると、Contact Form 7プラグインによって、 formタグに .sentというクラスがつけられるので、 送信完了後にdivで囲んだ部分が非表示になります
42.
42 ●送信完了後、別のテキストや画像を表示する (さきほどの応用です) 1. フォーム設定画面で、全体をdivタグで囲みます さらに、送信後に表示したいものを、divで囲んで記述します pお名前br / [text your-name]/p pメールアドレスbr
/ [email your-mail]/p p[submit 送信] div class=complete-display pこちらのページもご覧くださいbr / a href=/hoge.htmlimg src=/img/sample.jpg/a/p /div 2. style.cssに下記のように記述します .wpcf7-form .complete-display { display: none; } .wpcf7-form.sent .complete-display { display: block; }
43.
43 ●メッセージの表示位置を変える 1. フォーム設定画面で、メッセージを表示したい位置に [response] を記述します [response] pお名前br
/ [text your-name]/p pメールアドレスbr / [email your-mail]/p p[submit 送信] div class=complete-display pこちらのページもご覧くださいbr / a href=/hoge.htmlimg src=/img/sample.jpg/a/p /div これだと、フォームよりもメッセージが上に表示されます
44.
44 確認画面を表示する Contact Form 7の作者は、 確認画面は「いらないもの」というお考えらしいです・・・ http://ja.forums.wordpress.org/topic/648 で、いろいろググってみたけれど、 プラグインなど、 管理画面だけで解決する方法は見当たりません 書いてない
45.
45 JavaScriptで、送信ボタンを押す前に 確認フェーズを「割り込ませる」 ●wordpressのcontact form 7で確認画面を出す 手軽なライブラリ http://aulta.jp/library/wordpress/contactForm7Confirm.html JavaScriptをアップロードして、設定部分を修正し、 header.php
とかで読み込ませるだけ これなら、なんとかできそうかも?
46.
46 1. フォームに class=title をつけます 囲まれた部分がタイトルとして認識され、エラー表示の時に使われます 送信ボタンは、任意のクラスで囲みます pspan
class=title本文/spanbr / [text your-text] /p pspan class=titleメールアドレス/spanbr / [email* your-mail] /p pspan class=titleメールアドレス(確認用)/spanbr / [email* your-mail_confirm] /p p class=submit-btninput type=image value=送信 src=/wp/wp- content/themes/wbkyoto2013_1/img/btn_submit.jpg class=wpcf7-form- control wpcf7-submit //p
47.
47 2. ダウンロードしたファイルを解凍し、JSファイルを開き、設定をフォームに合わせて書 き換えます path : フォームがある投稿/ページのパス(カンマで区切って複数可) button
: areaClassName : 送信ボタンを囲ったクラス confirm : 確認ボタンのHTML rewrite : 戻るボタンのHTML 'path' : ['/wp/inquiry/'], 'button' : { 'areaClassName' : 'submit-btn', 'confirm' : 'input class=button-confirm type=button value=確認へ /', 'rewrite' : 'input class=button-rewrite type=button value=書き直す /' } フォームによってボタンを変えたいときは、このブロックを複製してください ※投稿の場合、パーマリンク設定が「投稿名」でないと動作しません ( '/wp/?p=1' と指定しても動作しない)
48.
48 (送信ボタンを画像にした場合) CSSで送信ボタンを画像にした場合は、styles.css に指定を追加します .submit-btn input
{ border: none; width: 100px; ←画像の幅 height: 30px; ←画像の高さ background: url(送信ボタンの画像のURL) left top no-repeat; text-indent: -9999px; ←ボタンのテキストを非表示にする } .submit-btn input.button-confirm { /* 確認ボタン */ background: url(確認ボタンの画像のURL) left top no-repeat; } .submit-btn input.button-rewrite { /* 戻るボタン */ background: url(戻るボタンの画像のURL) left top no-repeat; }
49.
49 送信ボタンを、input type=image ...で画像にした場合は、 スクリプト冒頭の設定で、「確認」ボタン、「戻る」ボタンを、 input
type=image ...で指定します 'button' : { 'areaClassName' : 'submit-btn', 'confirm' : 'input class=button-confirm type=image src=/wp/wp- content/themes/wbkyoto2013_1/img/btn_confirm.jpg value=確認へ /', 'rewrite' : 'input class=button-rewrite type=image src=/wp/wp- content/themes/wbkyoto2013_1/img/btn_back.jpg value=書き直す /'
50.
50 3. ダウンロードしたCSSファイルと、先ほど修正したjSファイルをアップロードします (テーマディレクトリの下に、jsディレクトリを作ってアップするのがおすすめ) 4. CSSファイルとJSファイルを、テンプレートで読み込みます (page.php, single.php など) ?php wp_enqueue_script('wpcf7-confirm',
get_stylesheet_directory_uri().'/js/ contact-form7-confirm.js', array('jquery'), '0.0.1'); wp_enqueue_style( 'wpcf7-confirm-style', get_stylesheet_directory_uri() ().'/js/contact-form7-confirm.css', array('twentytwelve-style') ); ? ?php get_header(); ?
51.
51 と・こ・ろ・が・・・ 「確認用メールアドレスの整合チェック」 と組み合わせると、 確認画面では、 確認用メールアドレスが違っていてもエラーが出ず、 確認画面で送信ボタンを押した後で、 「確認用メールアドレスが合っていない」 というエラーが出る・・・
52.
52 確認画面で、エラーを出したいので、 「確認用メールアドレスの整合チェック」を さきほどのスクリプトに組み込みます (JavaScript初心者だと、ちょっと難しいかも)
53.
53 1. 冒頭の設定部分に、確認用メールアドレスチェック時の エラーメッセージを追加します email : {
match : /^[A-Za-z0-9]+[w-]+@[w.-]+.w{2,}$/, before : '', after : 'を確認してください。' }, email_confirm : { before : '', after : 'が合っていません。' } 直前の } の後に、カンマを追加するのを忘れないように!
54.
54 2. メールアドレスの形式をチェックする部分を探し、 その続きに追加で、 「確認用メールアドレス整合チェック」を組み込みます if (child.hasClass('wpcf7-text')){ if
(child.hasClass('wpcf7-validates-as-required') child.val(). length == 0){ error.append(jQuery('li').text(option.validates.required.before + title.replace('必須', '') + option.validates.required.after)); jQuery(this).parents('tr').addClass('error'); } else if (child.hasClass('wpcf7-validates-as-email') ( ! child. val().match(option.validates.email.match))){ error.append(jQuery('li').text(option.validates.email.before + title.replace('必須', '') + option.validates.email.after)); jQuery(this).parents('tr').addClass('error'); (この続きに・・・)
55.
55 } else
if (child.hasClass('wpcf7-validates-as-email')) { var email_conf_name = 'span.'+child.attr('name')+'_confirm input'; if ( jQuery(email_conf_name)[0] ) { if (jQuery.trim( child.val()) != jQuery.trim(jQuery(email_conf_name).val())) { error.append(jQuery('li').text(option.validates.email.before + title.replace('必須', '') + option.validates.email_confirm.after)); jQuery(this).parents('tr').addClass('error'); } } } 【解説】 子要素に class=wpcf7-validates-as-email をもつ要素のname属性を取得し、 それに _confirm を追加したname属性を持つ要素を探します 見つかった場合、それぞれの値を比較し、異なっていればエラーメッセージを設定します この作業をした場合は、functions.php への追加記述は不要です
56.
56 Contact Form 7 トラブルシューティング
57.
57 メールフォームから 大量のスパムメールが送られてくる ●主な対策 1. CAPTHA (標準機能) 2. クイズ (標準機能) 3. Akismet (標準対応) 4. Honeypot (追加プラグイン) ←おすすめ!
58.
58 ⑴CAPTHA 画像で表示された文字を入力させる ⑵クイズ クイズを用意して、答えを入力させる 上記の2つは・・・ ・効果が高い ・Contact Form 7標準で使える ・ユーザーに面倒を強いる(利用率が非常に落ちる)
59.
59 ⑶Akismet 公開されているブラックリストを使用して、スパムかどうか を判断する • Akismetプラグインは、WordPressに入っている • Contact Form 7では、簡単な設定で使える • 営利目的のサイトは有償(5ドル/月)
60.
60 ⑷Honeypot ←おすすめ! スパムメール自動送信システムの動作を、逆に利用したス パム対策 スパムメール自動送信システムは、全てのフィールドに何か しらの入力を行うようになっている そこで、非表示のダミーフィールドを作って、 そこに何か入力されていたら、メールを送信しない 「Contact Form 7
Honeypot」プラグイン
61.
61 メールが届かない! まずは、Contact Form 7のFAQを読んで、設定ミスが ないか確認しましょう PHPの動作モードによって、対策をしないと動かないこと があります それでも、メールが届かない場合・・・ または、一部にだけメールが届かない場合・・・ (Gmailには届くのに、さくらには届かないとか)
62.
62 送信メールサーバーが スパム扱いされているかも!? Amazon EC2などでよくあるケース DNS逆引き設定がされていない IPアドレスがブラックリストに登録されている など 自分が悪いことしていなくても、ブラックリストに登録され てしまうことはあります サーバー管理者に言えば対応してくれますが、 Amazonやブラックリスト管理団体とは、 英語でのメールのやりとりが必要です
63.
63 クライアントからのメールは届くのに、 WordPressからは届かない場合 同じドメインなのに、WordPressからだけ届かない! 1. 送信側のメールサーバーがブラックリストに登録されて いても、受信側のメールサーバーがそのブラックリスト を使っていなければ、メールが届きます 2. Webサーバーとメールサーバーが違うかも (Google Appsを使っている場合など) →いずれにせよ、WordPressで対策が必要です
64.
64 WordPressで使う メールサーバーを指定する 強制的に他のメールサーバーを指定するプラグイン ・WP Mail SMTP ・Cimy
Swift SMTP 設定項目が多少違うが、普通に使う分にはどちらでもOK メーラーソフトに設定するのと同じような項目を設定する ことで、他のサーバーからメールを送ることができる
65.
65 送信ボタンを連打される Contact Form 7で作成したフォームは、 送信ボタンを連打すると二重送信されてしまいます ●JavaScriptで防止します jQueryでsubmit(送信)ボタンの2度押しを禁止する 「disableDoubleSubmit」プラグイン ※WordPressのプラグインではありません!
66.
66 1. スクリプト jquery.disableDoubleSubmit.js をダウンロードします 2. 新規に下記のJavaScriptファイルを作成し、適当な名前を付けて保存します (例として、disableDoubleSubmit_init.js
という名前を付けて保存します) (function() { $(function(){ $(form).disableDoubleSubmit(1000); }); })(jQuery); form と指定すると、全てのformタグに対して有効になります form#mailform1 などと、idを指定することもできます 1000 は、再度送信ボタンが押せるようになるまでの時間(ミリ秒)です サーバーが遅くて送信処理に時間がかかるときは、長く設定してください 3. 上記の2ファイルをテーマディレクトリのjsディレクトリにアップロードします (テーマディレクトリの下に、jsディレクトリを作ってアップするのがおすすめ)
67.
67 4. functions.php で読み込みます function cf7_disableDoubleSubmit()
{ wp_enqueue_script('disableDoubleSubmit', get_stylesheet_directory_uri().'/js/jquery.disableDoubleSubmit.js', array('jquery')); wp_enqueue_script('disableDoubleSubmit_init', get_stylesheet_directory_uri().'/js/disableDoubleSubmit_init.js', array('disableDoubleSubmit')); } add_action('wp_print_scripts', 'cf7_disableDoubleSubmit'); (読みやすいように改行しています)
68.
68 今日は、このへんで、おしまいです。 ご清聴ありがとうございました。
Jetzt herunterladen