手作りアクセサリーを売りたい! ブログ運営(WordPress)

Contact Form 7でお問い合わせフォームを作る

更新日:

wp-takara

便利なプラグインを手に入れた!

情報を発信するブログを立ち上げるのなら、問い合わせフォームはなくてはならない存在だ。
 
そこでまずはじめにやるべき設定作業の一つだろう。レンタルサーバーを借りて、独自ドメインを取得したら、お問い合わせ用のメールアドレスを作って、Contact Form 7のプラグインでメールフォームをあなたのウェブサイトに設置するのだ。
スポンサーリンク

Contact Form 7のプラグインデータ

wp-takara
Contact Form 7
  1. フォームに入力した内容を指定したメールアドレスに送信できる

Contact Form 7を手に入れる

プラグイン「Contact Form 7」のインストール&有効化

まずはこのプラグインをインストール&有効化しておこう。

プラグインを2つのどちらかの方法でインストール&有効化しよう

1.WordPress管理画面の左メニューの「プラグイン」 > 新規追加 > プラグインの検索窓から「Contact Form 7」と入力して検索⇒インストール&有効化

2.Contact Form 7配布サイトからPCへダウンロード⇒WordPressへインストール&有効化

wordpress
【WordPress初級】プラグインをインストールする2つの方法

WordPressがはじめてっていうあなたは、聞き慣れない言葉がどんどんと出てくるたびに頭がパンクしちゃいそうだよね。 一つの作業をこなすだけでも時間がいくらあっても足りないのに、言葉も意味も分けが分 ...

続きを見る

Contact Form 7で問い合わせフォームを作ろう!

WordPress管理画面

post-4533a

「お問い合わせ」 ⇒ 「新規追加」をクリックして”コンタクトフォームを追加”ページへ

①タイトルを入力する

post-4533b
「ここにタイトルを入力」という欄に、このフォームの名前を入力します。
これからフォームを増やしていった時に、タイトルを見ただけでどんなフォームだったか分かるような管理しやすい名前をつけましょう。

②フォームに入力項目のタグボタンを設定する

post-4533c
テキスト、メールアドレス、URL、電話番号、数値、日付、テキストエリア、ドロップダウンメニュー、チェックボックス、ラジオボタン、承認確認、クイズ、reCAPTCHA、ファイル、送信ボタンとタグボタンが15種類あります。

post-4533d
初期のフォームはこのような状態ですので、これから追加したい入力項目のタグを選んで、そのタグに設定を加えて追加していきます。
次はそれぞれのタグの詳細と設定方法です。

タグの詳細と設定方法

テキストの設定

post-4533e
テキストタグでは、このような一行の入力項目を作ることができます。名前や題名、住所はこのテキストから作ります。
その他のメールアドレス、URL、電話番号の専用タグボタンも、設定方法はこのテキストと同じです。

それでは、その設定方法です。

post-4533f

①項目タイプ チェックを入れておくと、入力し忘れた場合などに再入力を求めてくれます。
②名前 タグの名前は自動生成されます。
同じテキスト項目を作ってもこの名前で識別することができます。
③デフォルト値 「このテキストを項目のプレスホルダーとして使用する」にチェックを入れて、
この欄に入力例などを記入すると、項目欄にその入力例などが表示できます。
④Akismet Akismetのプラグイン設定をしていれば、スパムメールの防止ができます。
⑤ID・クラス属性 HTMLやCSSが理解できる方は設定してください。

日付の設定

post-4533g
日付タグは、生年月日などを入力してもらう時に使います。

post-4533h

①項目タイプ チェックを入れておくと、入力し忘れた場合などに再入力を求めてくれます。
②名前 タグの名前は自動生成されます。
同じ項目を作ってもこの名前で識別することができます。
③デフォルト値 「このテキストを項目のプレスホルダーとして使用する」にチェックを入れて、
この欄に入力例などを記入すると、項目欄にその入力例などが表示できます。
④範囲 日付入力の下限と上限の範囲を指定します。
⑤ID・クラス属性 HTMLやCSSが理解できる方は設定してください。

テキストエリアの設定

post-4533i
備考欄やお問い合わせ内容などを入力してもらうために使う項目です。
設定方法は、テキストのやり方と同じです。

ドロップダウンメニューの設定

post-4533j
ドロップダウンメニューは、都道府県など選択項目が多い場合などに使います。

post-4533k

①項目タイプ チェックを入れておくと、入力し忘れた場合などに再入力を求めてくれます。
②名前 タグの名前は自動生成されます。
同じ項目を作ってもこの名前で識別することができます。
③オプション この欄に、選択項目を一行ずつ入力していきます。
・複数選択させたい場合は「複数選択を可能にする」にチェックを入れます。
・「空の項目を先頭に挿入する」はチェックを入れておきましょう。
先頭の行を空の項目にできます。
⑤ID・クラス属性 HTMLやCSSが理解できる方は設定してください。

チェックボックスの設定

post-4533l
チェックボックスはアンケート項目などに使われ、一つだけ、または複数選択できるように設定できます。

post-4533m

①項目タイプ チェックを入れておくと、入力し忘れた場合などに再入力を求めてくれます。
②名前 タグの名前は自動生成されます。
同じ項目を作ってもこの名前で識別することができます。
③オプション この欄に、選択項目を一行ずつ入力していきます。
・「ラベルを前に、チェックボックスを後に配置する」にチェックを入れると、
チェックボックスが後の位置に付く。
・「個々の項目を label 要素で囲む」にチェックを入れると、
項目部分をクリックしてもチェックが入るようになる。
・「チェックボックスを排他化する」にチェックを入れると、
一つのチェックボックスだけしか選択できないように設定できます。
⑤ID・クラス属性 HTMLやCSSが理解できる方は設定してください。

ラジオボタンの設定

post-4533n
チェックボックスと使い道は同じで、違いはラジオボタンは一つだけしか選択することができないようになっている。

承認確認の設定

post-4533o
なにか確認や同意を求めたい時に使います。

post-4533p

①名前 タグの名前は自動生成されます。
③オプション ・「このチェックボックスをデフォルトでチェックされた状態にする」
その意味通りです。
・「これの挙動を反対にする」にチェックを入れると、
チェックを外すように要求することができます。
⑤ID・クラス属性 HTMLやCSSが理解できる方は設定してください。

reCAPTCHAの設定

post-4533q
スパム対策としてGoogleの新しいキャプチャ認証サービス「reCAPTCHA」を導入することができる。

使用するには、Googleアカウントでキーを取得する必要がある。
キーの取得方法はこちらの記事を見てください。

recaptcha
ブログの問い合わせフォームからスパムを防止!reCAPTCHAの導入方法

問い合わせフォームから問い合わせをもらう時に、気をつけたいのがスパム攻撃。 今までのスパム対策としては、画像に表示されている文字や数字を入力する方式の画像キャプチャ認証でした。 今回は、Googleの ...

続きを見る

ファイルの設定

post-4533r
テキストや画像、音声、動画などのデータを送ってもらう時に使う。

post-4533s

①項目タイプ チェックを入れておくと、入力し忘れた場合などに再入力を求めてくれます。
②名前 タグの名前は自動生成されます。
③ファイルサイズの上限 (バイト) 受信可能な最大ファイルサイズを指定できる。
入力方法は1mbや2mbなど。空欄の場合は1MBが上限になる。
④受け入れ可能なファイル形式 使用できるファイル形式を指定できる。複数選択する場合は、|で区切る。
jpg|jpeg|png|gif|pdf|doc|docx|ppt|pptx|odt|avi|ogg|m4a|mov|mp3|mp4|mpg|wav|wmv
⑤ID・クラス属性 HTMLやCSSが理解できる方は設定してください。

送信ボタンの設定

post-4533t
フォーム入力後の送信ボタンが作れます。

post-4533u

①ラベル 「送信する」「お問い合わせはこちら」「お申し込みはこちら」など、
好きなボタン名に変更できる。
②ID・クラス属性 HTMLやCSSが理解できる方は設定してください。

③受け取りメールの設定をする

フォームが完成したら、次にメールの設定をしていきます。
送信されてくるメールの内容は、このままだと初期のデフォルトの入力項目の設定のまま送られてきてしまいます。
そこで追加作成した入力項目に合わせて、設定しなおさないといけないのだ。

post-4533v

①送信先 受け取り先のメールアドレスを入力しましょう。
②送信元 差出人名とそのメールアドレスを入力しましょう。
③題名 フォームに題名を記入するタグを設定しているなら、ここにそのタグを貼り付けましょう。
④追加ヘッダー 受け取るメールの返信先を指定できます。デフォルトの[your-email] のままでOKです。

post-4533w

⑤メッセージ本文 フォーム作成時に作ったタグが、メールタグとして本文中に挿入できます。
あなたがわかりやすいように貼り付けてください。

フォームを公開しよう

post-4533x
フォームとメールの設定が完了したら、いよいよこの作ったフォームを公開しましょう。
まずは、固定ページを使ってフォーム用ページを作成します。
そこへ作成したフォームのショートコードをコピーして、作ったフォーム用固定ページに貼り付け、そのページを公開したら完了です。

これであなたもContact Form 7のプラグインを使って、フォームを作ることができるぞ!
だが、実はまだこのあとに続きがあるのだが、記事として長くなってしまうので今回はココで一区切りにしておく。
 
続きは、お問い合わせフォームをクールなデザインにカスタマイズする方法だよ!
contact-form-7-customize
wordpressの問い合わせフォームをCSSカスタマイズしよう!AFFINGER流

「Contact Form 7」は、wordpressブログに欠かせない問い合わせメールフォームが作れるwordpress用のプラグインである。 今回はテーマにAFFINGER4を使っている方をメイン ...

続きを見る

この記事が気に入ったら
いいね ! しよう

スポンサーリンク
jewerilworld3

手作りアクセサリー作ってみたい

technique 1

アクセサリーは一体どういう風に作られているのでしょか? あなたがもしこれから手作りアクセサリーの作り方を知って、 自分のオリジナルアクセサリーを作ってみたい、 そしてゆくゆくは販売もしていきたいと考え ...

which-one 2

本格的な手作りアクセサリーを作るには、彫金、銀粘土、ロストワックスの3つの方法で作ることが出来る。 もし、あなたが彼女や彼氏に手作りアクセサリーをプレゼントしたいと考えているならば、一体、3つのうちど ...

post-4706 3

スタッドピアスには必ずストレートのピンが付いています。 ピアスピンと言ったり、ピアス棒、ピアスポストとも呼ばれるこのピンはどうやってピアスデザインとくっついているのか知っていますか? 通常、デザイン部 ...

post-4899 4

手作りアクセサリーを作るといっても、プロはその作ったものを販売するという視点から作り方を考えていきます。 趣味で作る場合との大きな違いが、この考え方だと言っても過言ではありません。 今回はそんな商売と ...

brain-training 5

アクセサリーを作るには、地金から作り出す彫金技法やワックスから作り出すロストワックス法があります。 あなたがもし、彫金やロストワックスをはじめたいと考えているのであれば、アクセサリーを作るために必要な ...

-手作りアクセサリーを売りたい!, ブログ運営(WordPress)
-, , ,

Copyright© ピアスマップ , 2017 AllRights Reserved.