Warning: Constant POST_PLUGIN_LIBRARY already defined in /home/pasora/pasona-sp.com/public_html/wp-content/plugins/similar-posts/similar-posts.php on line 27
問合せ簡単作成のカスタマイズ Contact Form 7 | 思いだし にっき
サイトアイコン 思いだし にっき

問合せフォーム簡単作成のカスタマイズ Contact Form 7-

<p><img class&equals;"aligncenter size-medium wp-image-11066" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;1399772&lowbar;s-300x200&period;jpg" alt&equals;"" width&equals;"300" height&equals;"200" &sol;><&sol;p>&NewLine;<p>前回はContact Form 7-の基本的な使い方で「お問い合わせ」なんか作ってみました<br &sol;>&NewLine;そのほかにもいろいろカスタマイズして応用できます。<br &sol;>&NewLine;簡単なカスタマイズをしてみました。<&sol;p>&NewLine;<p><&excl;--more--> <&sol;p>&NewLine;<h2>メールフォームのカスタマイズ<&sol;h2>&NewLine;<p>メールフォームの新規作成画面には操作ボタンにいろいろな種類が表示されています<br &sol;>&NewLine;このボタンをクリックしてメールフォームに設置する部品を作成できます。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3363 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf21&period;png" alt&equals;"ボタン" width&equals;"436" height&equals;"145" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>これらの部品の組み合わせでお問い合わせだけでなく、アンケートや感想、評価などのメールフォームを作ることができます。<&sol;p>&NewLine;<p>作成したい部品名のボタンをクリックすると部品の種類に応じた設定項目が表示されます<br &sol;>&NewLine; <&sol;p>&NewLine;<h3>テキスト<&sol;h3>&NewLine;<p>「テキスト」は1行のテキストを入力してもらうために使用します&gt&semi;<br &sol;>&NewLine;「テキスト」ボタンをクリックすると「フォームタグ生成・テキスト」が表示されます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3364 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf22&period;png" alt&equals;"テキスト" width&equals;"481" height&equals;"419" &sol;> <&sol;p>&NewLine;<p>「名前」は部品を識別するための項目になるので、他の部品に使用していない名前にします。<&sol;p>&NewLine;<p>自動で設定された名前をそのまま使ってもOK<&sol;p>&NewLine;<p>入力を必須にする場合は「必須項目」にチェックを入れます。<br &sol;>&NewLine;デフォルトの値を設定する場合は「デフォルト値」の項目に入力します。<&sol;p>&NewLine;<p>デフォルト値ではないけれど、入力されるまでサンプルとして値を表示しておきたい場合は<br &sol;>&NewLine;「プレースホルダーとして使用する」にチェックをいれます。<&sol;p>&NewLine;<p>それ以外にスタイル関係の「ID属性」と「クラス属性」は必要に応じて設定します。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3365 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf23&period;png" alt&equals;"テキスト設定" width&equals;"461" height&equals;"373" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>「フォーム」の使用したい位置に設定したタグ(例:&lbrack;text text-kyojyuuwork placeholder &&num;8220&semi;東京都&&num;8221&semi;&rsqb;) を記述します。<br &sol;>&NewLine;※「タグの挿入」をクリックすると、フォームのカーソルのあるところにはいります。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3366 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf24&period;png" alt&equals;"コードの挿入" width&equals;"438" height&equals;"187" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>フォームで入力した値をメールで送信する場合は、メールの方にもコードを記述します。<&sol;p>&NewLine;<p>できたら保存します<&sol;p>&NewLine;<p>作成したフォームを利用するには表示されたコードを記事や固定ページに記述します。<&sol;p>&NewLine;<p>記事を公開しブログで確認してみます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p> <img class&equals;"size-full wp-image-3367 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf25&period;png" alt&equals;"ブログで確認" width&equals;"377" height&equals;"198" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h3>ラジオボタン<&sol;h3>&NewLine;<p>「ラジオボタン」は複数の項目から一つを選択してもらう場合に使用します。<&sol;p>&NewLine;<p>「オプション」のところに選択項目を1つにつき1行で記述します。<&sol;p>&NewLine;<p>必要に応じて項目入力やチェックをいれます<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3368 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf27&period;png" alt&equals;"ラジオボタン" width&equals;"468" height&equals;"377" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h3>チェックボックス<&sol;h3>&NewLine;<p>チェックボックスはラジオボタンと同じように利用できます<br &sol;>&NewLine;フォームで「チェックボックス」ボタンをクリックします<&sol;p>&NewLine;<p>「オプション」欄に1行1項目で入力します。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3369 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf31&period;png" alt&equals;"チェックボックス" width&equals;"465" height&equals;"383" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;&NewLine;<&excl;-- WP QUADS v&period; 2&period;0&period;92 Shortcode Ad -->&NewLine;<div class&equals;"quads-location quads-ad" id&equals;"quads-ad" style&equals;"">&NewLine;<&sol;div>&NewLine;&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h3>ドロップダウンメニュー<&sol;h3>&NewLine;<p>選択肢を用意して選んでもらう時に使用します。<&sol;p>&NewLine;<p>フォームで「ドロップダウンメニュー」ボタンをクリックします<&sol;p>&NewLine;<p>「オプション」欄に1行1項目で入力します。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3370 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf32&period;png" alt&equals;"ドロップダウンメニュー" width&equals;"466" height&equals;"378" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>フォームで入力した値をメールで受け取るために、メールにも部品のコードを記述します<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3371 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf28&period;png" alt&equals;"メールに記述" width&equals;"472" height&equals;"767" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>保存ボタンをクリックします<&sol;p>&NewLine;<p>作成したフォームを利用するには表示されたフォームのコードを記事や固定ページに貼りつけます。<br &sol;>&NewLine;投稿ページの投稿欄にコードをコピペしたら公開をクリックします。<&sol;p>&NewLine;<p>公開前に確認するには「プレビュー」ボタンをクリック。<br &sol;>&NewLine;いろいろ使ってみた例です。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3372 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf30&period;png" alt&equals;"部品利用" width&equals;"417" height&equals;"393" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>ブログで確認してみます。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3373 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf29&period;png" alt&equals;"ブログで確認" width&equals;"323" height&equals;"715" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;&NewLine;<&excl;-- WP QUADS v&period; 2&period;0&period;92 Shortcode Ad -->&NewLine;<div class&equals;"quads-location quads-ad" id&equals;"quads-ad" style&equals;"">&NewLine;<&sol;div>&NewLine;&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h3>CAPTCHA<&sol;h3>&NewLine;<p>スパム目的の自動投稿の防止としてreCAPTCHAを利用することができます&lpar;Googleアカウントが必要&rpar;。<br &sol;>&NewLine;次のURLをクリックします。(Googleアカウントのログイン画面が表示されたらログインします。)<&sol;p>&NewLine;<p>https&colon;&sol;&sol;www&period;google&period;com&sol;recaptcha&sol;admin<&sol;p>&NewLine;<p>reCAPTCHAの管理画面が表示されます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-medium wp-image-3374 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf33-300x260&period;png" alt&equals;"" width&equals;"300" height&equals;"260" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<div class&equals;"su-note" style&equals;"border-color&colon;&num;e2ddb2&semi;border-radius&colon;2px&semi;-moz-border-radius&colon;2px&semi;-webkit-border-radius&colon;2px&semi;"><div class&equals;"su-note-inner su-u-clearfix su-u-trim" style&equals;"background-color&colon;&num;fcf7cc&semi;border-color&colon;&num;ffffff&semi;color&colon;&num;090101&semi;border-radius&colon;2px&semi;-moz-border-radius&colon;2px&semi;-webkit-border-radius&colon;2px&semi;">Choose the type of reCAPTCHA&quest;(reCAPTCHAのタイプを選択しますか?)reCAPTCHA V2Validate users with the &&num;8220&semi;I&&num;8217&semi;m not a robot&&num;8221&semi; checkbox&period; (「私はロボットではありません」チェックボックスを使用してユーザーを検証します。)Invisible reCAPTCHAValidate users in the background&period;(バックグラウンドでユーザーを検証します。)<&sol;div><&sol;div>&NewLine;<p>ラベル名に任意の文字列を指定し、タイプを選択します<br &sol;>&NewLine;(例は「reCAPTCHA V2」にチェック)<&sol;p>&NewLine;<p>下の「Domains」にWordPressで使用しているブログのドメインを入力します。<br &sol;>&NewLine;「Register」をクリックします。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p> <img class&equals;"size-full wp-image-3375 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf34&period;png" alt&equals;"" width&equals;"425" height&equals;"556" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>Please accept the terms of service&period;(規約に同意して下さい)と出るので<br &sol;>&NewLine;チェックをつけたら「Register」をクリックします。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3376 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf35&period;png" alt&equals;"" width&equals;"453" height&equals;"183" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>表示されたサイトキーとシークレットキーをメモします。<&sol;p>&NewLine;<p> <img class&equals;"size-full wp-image-3377 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf36&period;png" alt&equals;"キー入力" width&equals;"476" height&equals;"502" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>WordPressのダッシュボードに戻り、「お問い合わせ」メニューの中にある「インテグレーション」をクリックします。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3378 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf37&period;png" alt&equals;"インテグレーション" width&equals;"321" height&equals;"92" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>「キーを設定する」をクリックします<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3379 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf38&period;png" alt&equals;"キー" width&equals;"460" height&equals;"232" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>メモしておいたサイトキーとシークレットキーを入力し「保存」をクリックします。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3380 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf39&period;png" alt&equals;"キー入力" width&equals;"466" height&equals;"246" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>確認画面が出て完了です。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3381 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf40&period;png" alt&equals;"確認完了" width&equals;"459" height&equals;"266" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>フォームに設定してみます。<&sol;p>&NewLine;<p>コンタクトフォームの編集画面を開き、「reCAPTCHA」ボタンをクリックします。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3382 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf41&period;png" alt&equals;"フォームに設定" width&equals;"449" height&equals;"625" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>CAPTCHAの設定画面が表示されたら、テーマやサイズを選択します。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3383 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf42&period;png" alt&equals;"" width&equals;"452" height&equals;"369" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>「フォーム」に「&lbrack;recaptcha&rsqb;」を記述します。&lpar;「メール」に記述は必要ないです&rpar;。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3384 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf43&period;png" alt&equals;"" width&equals;"364" height&equals;"405" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>作成したメールフォームを表示すると次のようにCAPTCHAが表示されます。<&sol;p>&NewLine;<p> <img class&equals;"size-full wp-image-3385 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf44&period;png" alt&equals;"" width&equals;"381" height&equals;"543" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>「わたしはロボットではありません」にチェックをすると、自動投稿かどうかを確認するための画面が表示されます&lpar;毎回異なります&rpar;。<&sol;p>&NewLine;<p>自動投稿によるスパムなどを予防したい場合に利用します。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h3>ファイル<&sol;h3>&NewLine;<p>「ファイル」はメールフォームを使ってファイルを添付して送信できるように設定できます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3386 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf45&period;png" alt&equals;"ファイル" width&equals;"458" height&equals;"369" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>ファイルサイズの上限 &lpar;単位はバイト&rpar;や、添付可能なファイルの拡張子を指定できます。<&sol;p>&NewLine;<p>複数指定する場合はカンマで区切ります。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3387 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf46&period;png" alt&equals;"" width&equals;"377" height&equals;"339" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>設定できたらフォーム用のコードを「フォーム」に追加します。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3388 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf47&period;png" alt&equals;"" width&equals;"366" height&equals;"77" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>メール用のコードを「メール」の「ファイル添付」のところに追加して下さい。<br &sol;>&NewLine;追加が終わりましたら変更内容を保存して下さい。<&sol;p>&NewLine;<p>作成したメールフォームを表示すると次のようにファイル添付用のボタンが表示されます。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3389 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;cf48&period;png" alt&equals;"" width&equals;"385" height&equals;"416" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>お疲れさまでした&lpar;&Hat;&Hat;&rpar;<br &sol;>&NewLine;簡単にお問合せフォームが作れることや、自分の好みでカスタマイズができる方法のご紹介でした。<br &sol;>&NewLine;いろいろ試してあなたらしい「お問い合わせ」ページ作ってみてくださいね。<&sol;p>&NewLine;<p> <br &sol;>&NewLine;前の記事 <a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;3322&period;html">プラグインContact Form 7で問合せ簡単作成<&sol;a><br &sol;>&NewLine;次の記事 <a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;3404&period;html">プラグインMaster Post Advertでアドセンス広告をポチッと挿入<&sol;a><&sol;p>&NewLine;<p style&equals;"text-align&colon; right&semi;"><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;page-1472&period;html"><span style&equals;"color&colon; &num;0066cc&semi;">WordPress一覧へ<&sol;span><&sol;a><&sol;p>&NewLine;<p>&NewLine;<a href&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;ranking&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener"><img src&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;img&sol;diary88&lowbar;31&period;gif" alt&equals;"" width&equals;"88" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a href&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;ranking&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener">にほんブログ村<&sol;a><br &sol;>&NewLine;<a title&equals;"日々の出来事 ブログランキングへ" href&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;link&period;php&quest;1839199&colon;9200"><img src&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;img&sol;banner&sol;c&sol;banner&lowbar;1&sol;br&lowbar;c&lowbar;9200&lowbar;1&period;gif" width&equals;"110" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a style&equals;"font-size&colon; 12px&semi;" href&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;link&period;php&quest;1839199&colon;9200">日々の出来事 ブログランキングへ<&sol;a><&sol;p>&NewLine;&NewLine;

モバイルバージョンを終了