スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

wordpress お問い合わせフォーム(Contact Form7)にファイル添付を追加する

お問い合わせ画面で画像やファイルを添付できるように”ファイル添付”項目を追加する方法についてご説明します。

使用しているプラグインは Contact Form7 です。

今回はContact Form7がすでにプラグイン設定されて基本設定がされている状態からの説明になります。
Contact Form7をインストールしていない方は過去記事
Wordpress お問い合わせフォームは5分で簡単に作成できる。をご覧下さい。

それではさっそくダッシュボードにログインしてください。
ダッシュボードの”お問い合わせ”を選択して
使用しているコンタクトフォームの”編集”を選択します。

編集画面右側のタグの作成ボタンを押すと
下から2番目にファイルのアップロードという項目があるのでこれを選択します。
20150510_1.jpg
詳細設定ができる画面が表示されるので入力していきます。
20150510_2.jpg

1.必須入力
ファイルのアップロードを必須にしたい場合はチェックします。

2.id,class は特に設定する必要なし

3.ファイルサイズの上限 (バイト) (オプション)
いたずらでものすごい大きなファイルを大量に送りつける人はいないとは思いますが
念のため ある程度の大きさで制限をかけておく事をおすすめします。

2MB、5MBを上限に制限設定をかけているサイトが比較的多いような気がします。
※注意 受信するメールサーバによっては一度に受信できるファイルサイズが制限されている場合があるので
事前に確認した上で設定するのが良いでしょう。

どちらにしてもあまり大きなデータのやりとりをしたい場合は、また別のサービスを使用したほうが良いかもしれませんね。
サイズ無制限で送付できるサービスを提供しているサイトもあるので。
無料大容量ファイル転送サービス「宅ふぁいる便」

今回は10MBに設定してみましょう。

設定単位はバイト(B)になります。
10MBの場合は →k→mなので0が6つ付けば良いですね
10000000 と設定しましょう。

4. 受け入れ可能なファイル形式 (オプション)
通常は画像やエクセル、ワードといったファイルを送るために使用すると思いますが
中にはウィルスの入ったexeファイル等送られてくる可能性もあるので
通常使用するファイル形式を指定しておき、それ以外は送れないようにしておくのが良いでしょう。

ファイル拡張子を半角スペースやカンマ[,]区切りで設定してきます。
例) 画像ファイルであれば → gif,png,jpg,pdf,ai,psd
gif,png,jpg.pdfは画像ファイル
aiはイラストレータ、psdはフォトショップのファイル拡張子です。

例) officeファルであれば → xls,xlsx,doc.docx,ppt,pptx
 エクセル、ワード、パワーポイントの新旧ファイル拡張子です。

5.項目貼り付け
詳細設定を設定したら、この入力欄を左欄に追加して表示できるようにして
さらにメールにもそのファイルが添付されるように設定してあげます。

5-1 ”このコードをコピーして、左のフォーム内にペーストしてください。”に
新しいコードが作成されますので、これを左欄の任意の場所にペーストしてください。
今回作成したコードは以下のようになりました。
[file file-505 limit:10000000 filetypes:gif|png|jpg|pdf|ai|psd|xls|xlsx|doc.docx|ppt|pptx]

20150510_3.jpg


5-2 ”それから、このコードを下のファイル添付の項目中に置いてください。”の欄に表示されているコードを
メールの”メール添付”の欄に貼り付けてください。
今回作成したコードは[file-505]です。

ここまでできたら保存をして表示を確認してみてください。
表示が確認できたら、実際にファイル添付画面で添付をして送信したら、設定しているメールに添付ファイルが届いているか確認してみましょう。



スポンサーサイト

Wordpress お問い合わせフォームは5分で簡単に作成できる。

Wordpress お問い合わせフォームは5分で作成できます。

固定ページにお問い合わせのページを作るのは割と基本ですね。

1から作成しなくてもプラグインを使用すれば簡単に作成できます。


1.プラグイン「Contact Form 7」をインストールする。

2.項目の設定をする。

これだけです。

さっそくプラグインをインストールしましょう。

・ダッシュボードのプラグインの中になる新規追加を選択します。

・検索画面にて「Contact Form 7」を検索し、インストールします。

・Contact Form 7を有効化します。

ダッシュボードにお問い合わせというメニューが表示されます。
wordpress_contacts.jpg

コンタクトフォームを選択し、登録されているコンタクトフォーム1の下の編集を選択します。

フォームの中にあるのが、表示させる項目です。
1121wordpress_contacts_form.jpg
デフォルトでは、
お名前、メールアドレス、題名、メッセージ本文、送信 が入っています。
追加したい場合は、右側のタグの作成ボタンを押せば、ジャンル毎の項目を追加する事ができます。

例えばテキストの項目を追加したい場合は、タグの作成テキスト項目を選択します。

wordpress_contacts_text.jpg
[text text-398] が項目入力欄になるので、左側のフォーム内にペーストして
項目の表示名などを追記します。

また、送られてきたメール本文にテキスト項目を追加します。
[text-398]を下側のメール内にあるメッセージ本文の中に追記しておきましょう。

wordpress_contacts_mail.jpg


設定が完了したら、保存ボタンを押します。

一番上のコンタクトフォーム内にあるコード
[contact-form-7 id="38" title="コンタクトフォーム 1"]
を固定ページの記事に貼り付ければ完成です。

wordpress_contacts_image.jpg

スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。