コンタクトフォーム7で画像を送って貰う。(ファイル添付)

みんな大好きContact form 7の記事です。
(いつも使わせて頂いております。ありがとうございます。)

サイトに問合せフォームを付けたときに、画像などファイルを受け取りたいことが、あると思います。先日クライアントの工務店さんから「見積を出すのに、フォームから現場の写真を送ってもらえるようにしたいんだよね。」 などとのご要望がありまして、WordPressのフォームによる添付ファイルの送信について調べてみました。

Contact Form 7には初めから、画像を含む各種ファイル添付用のタグが用意されていますので、簡単に付けられます。まずフォームの設定(フォームタブ)画面です。

agnblog_20161014_02

ここで添付ファイルの種類とサイズに制限をかけられます。
詳しくはオフィシャルサイトで
http://contactform7.com/ja/file-uploading-and-attachment/
(…この記事不要です…)

次に受け取り設定(メールタブ)の画面です。
agnblog_20161014_03
ファイル添付のエリアにタグを書き込みます。
あとはフォームを固定ページに貼って送って貰うだけ!
agnblog_20161014_01

 受信すると、指定のアドレスにメール添付の形で画像が届きます。
注意点としては、添付ファイルは一時的にサーバーにアップロードされますが、フォルダの属性(パーミッション)などで書き込み禁止になっていると添付に失敗します。立ち上げたばかりで設定中のWordPressにありがちなミスです。
スマホの場合
・レスポンシブを意識してテーマを選んで作ればスマホ対応です。
・スマホだと画像選択時にカメラを選び、その場で撮影→添付の流れが実現できます。
(画像はandroidですが、iOSでも大丈夫。)
agnblog_20161014_04
業務によっては、画像のやり取りができると大幅に省力化に繋がることもあると思います。上手く活用したいですね♪

安い独自SSLの使えるサーバーについて

近年急激に安くなった独自SSL。Googleが検索順位に影響するよ!と言い始めてからにわかに注目を集めています。かつて安いSSLと言えば、サーバー会社の提供する共用SSLがほとんどでしたが、昨年あたりから年数千円単位の格安の独自SSLサービスが出てきました。サーバーを契約すれば、無料で使えるエックスサーバーのようなサービスもあります。2016年8月現在、有名処のサーバーの独自SSLサービスを調べてみました。

格安SSL証明書について
証明書の信頼性云々もさることながら、色々制限もあります。
・格安SSLの場合、SSLの持ち込みはできないケースがほとんど。サーバー会社とセットで利用する形態になる。
・ドメイン認証型のため、利用できるブラウザに制限がある。ざっくり言うと古いブラウザでは表示できない可能性あり。更にざっくり言うとガラケーは弾かれる可能性大。その代わりに審査が簡単で即日利用できるようになるなど、安い以外のメリットもあり。


■さくらインターネット

証明書 Rapid SSL
価格 年1500円

詳細:さくらのSSL https://ssl.sakura.ad.jp/

コンパネから申し込んで、即実利用可能。


■ロリポップ/ヘテルム

証明書 GlobalSign クイック認証SSL
価格 ロリポップ年20000円 ヘテルム年18000円

詳細:ヘテルム 独自SSL https://heteml.jp/option/ssl/

GMOグループグローバルサインのSSLを提供。流行の格安SSLは提供していない模様。


■お名前.com/Xrea/CORE server/Value server

証明書 アルファSSL
価格 年1200円

詳細:バリューサーバー 独自SSL https://www.value-domain.com/pr/ssl/

月額換算で100円とかなり安い。アルファSSL自体もGMOグループ。そう考えるとロリポップでアルファSSLを扱うのも時間の問題か。


■ファーストサーバー(Zenlogic)

証明書 Let’s Encrypt
価格 0円

詳細:Zenlogic無料SSL https://zenlogic.jp/option/ssl/letsencrypt.html

いつの間にやらクラウドサーバーがサービスの主になっていたファーストサーバー。法人・個人事業主に限定されるが、無料でSSLを提供している。


■エックスサーバー

証明書 Let’s Encrypt
価格 0円

詳細:エックスサーバー独自SSLについて https://www.xserver.ne.jp/functions/service_ssl.php

弊社も利用中。ファーストサーバーと同じく、Let’s Encryptの証明書。
サーバー契約者なら無料・無制限で取得出来るので、割り振っているドメイン全てをSSLに対応させることが可能。


■カゴヤ・ジャパン

証明書 Rapid SSL
価格 年9180円(上位プラン契約で無料)

詳細:カゴヤジャパンSSLサーバー証明書 https://www.kagoya.jp/ssl/

契約をしていれば、1つだけ無料で使える。


色々見てきましたが、現状アルファSSLとLet’s Encryptの2択です。Googleの検索順位も荘ですが、アプリとサーバー間の通信もSSL必須とされてきているので、今後需要はますます高まるのは間違いないでしょう。
各サーバー会社の格安独自SSLは、今春あたりから急速に広まってきたものなので現在様子見ですが、問題なければ積極的に導入していきたいサービスです。


Contact Form 7でアンケートフォームを設置

仕事でアンケートフォームを付けることになりそうなので、Contact Form 7での設置方法を整理して文章にしてみました。アンケートとしては小規模なものを想定しています。(回答数100未満くらい)

使ったプラグイン

Contact Form7
執筆時version4.5

導入方法は割愛します。ダッシュボード→プラグインからさくっと入れてください。
日本語対応しているので安心です。

cf701

フォームの設置(基本)

はじめて使う人は、基本となる問合せフォームを設置してみましょう。
ダッシュボードの左メニューお問い合わせからコンタクトフォームを選びます。
コンタクトフォーム 1としてサンプルが初めから入っています。cf702
貼り付け用の固定ページを用意しておきます。(記事でも構いません。)
本文にショートコードを貼ります。cf703
完了です!簡単です。cf704

実際にフォームに入力して送信すると、WordPressの管理者宛にメールが届きます。

アンケートフォームを作る

色々項目を増やしてアンケートフォームを作っていきます。
新規追加でフォーム追加画面を出します。↓最初の状態。
cf705
最初から基本的な部品は入っていますので、これを参考に付け足していきます。
今回はサンプルとして以下のようなアンケートを組み立ててみます。
フォーム下のボタンを押すとダイアログがでますので、必要項目をいれて挿入ボタンを押します。
今回は4つの質問を作ります。以下に記入例を挙げますので参考にしてください。

Q1 WordPressをセットアップしたことがある。
ある ない
→ラジオボタンcf711

Q2 どこにセットアップしましたか?
レンタルサーバー ローカルPC 専用サーバー ローカルサーバー
→チェックボックスcf712

Q3 現在WordPressサイトの管理をされていますか?
している いない
→ラジオボタンcf713

Q4 最もプラグインの多いサイトで何個入ってますか?
0~10 11~20 21~30 30個以上
→ドロップダウンメニューcf714

個人情報
・名前・メール・メッセージ
→デフォルトのまま

例と同じように<label>

個人情報部分は、標準の物をそのまま流用します。アンケートとしては不要なので題名を消しました。必須項目もそのままです。アスタリスクの有無で判別されます。
この段階で保存して固定ページにショートコードを貼り付け、見てみましょう。

cf706

もっともらしい、アンケートフォームができているはずです。
しかし、このままでは新規で追加した項目のデータを受け取ることができません。
受け取るための設定を追加してやります。

受信メールの設定

メールのタブを開いて受信メールの内容を書いていきます。受け取りに使いたいメールアドレスもこちらで設定します。
cf707

題名は消したので、[your-subject]は消します。
そして本文に追加したフォームのメールタグを追加して行きます。
追加出来るタグは上部に表示されているので、見ながら書き込みます。↓例です。
cf709

書いたら忘れずに保存を。

これで設定完了です。
回答者にもメールを送るには、メール(2)にチェックを付けて、同じように本文を書いていきます。回答や個人情報の控え、簡単なお礼、運営の署名などを記載しておくとよいでしょう。

表示メッセージの設定

Contactform7の仕様上、フォームの送信時に確認画面は出ません。
代わりに任意の送信完了のメッセージを出すことができます。
これはメッセージタブで設定します。
また、エラーの時の表示メッセージもこちらで設定可能です。
cf710

これでアンケートフォームは完成です。
実際の運用には、個人情報の取扱いなどもしっかり記載した方がよいでしょう。
より作り込むなら
・メールをWordPressのDBで管理する
・送信前に確認画面を出す。
などを別のプラグインを追加することで対応できます。

また、もっと大規模にアンケートを採るなら、
集計機能のあるアンケート専用のプラグインを使うとよいでしょう。
予算に都合が付くならSSLにも対応したいですね。

※以下に動作サンプルを設置しました。よろしければご回答ください。

続きを読む Contact Form 7でアンケートフォームを設置


独自ドメインのサイトを広告無し100円以下で立ち上げてみる【2】無料サーバーにサイトを設置編

~前回までのあらすじ~
  • 格安で独自ドメインのサイトを立ち上げてみるとしてスタート。
  • ドメインはお名前.comで格安のxyzドメインを32円で取得。niigata360.xyz
  • サーバーは比較的品質の高そうなxdomainを選択。
  • ドメイン取得後、ネームサーバーの設定を済ませて反映されるのを待つ。
    ここまでやりました。
今回は、実際にHTMLコンテンツをアップし、サイトを公開してみます。
■サイトを設置
テストサイトをHTMLで用意します。内容は特にありませんが、仕掛けとしてスライドショーと、google mapsのiframeによる埋込みくらいは盛り込んでおきます。
今回設置するxdomainの無料サーバーは広告はつきませんが、下記の制限があります。
  • 1ファイルあたり3MB
  • DB無し(別サーバー・広告あり)
  • PHP不可
  • CGI不可
  • 他社で取得したドメインのメール設定は不可
    このあたりの制限が大きな制約になりそうです。こうやって書くと何もできなさそうですが、逆に
  • 独自ドメイン10個OK
  • 容量1GB
  • FTPが使える。(ファイルマネージャーも別途用意されている。)
    と言うように、保存容量が比較的大きかったり、無料でもマルチドメインで設定していけることは大きなメリットです。個人的にはFTPでアップできるのも管理が楽で便利です。
※xdomainの無料サーバーは広告を受け容れることでPHPやMySQLが使えたりWordPressの設置も可能なサーバーも使えます。WordPressでの広告はスマートフォンやタブレットなどモバイル環境のみでの表示と、結構控えめですね。ひとまず今回は広告無しにこだわってみたいと思いますので、WordPressはあきらめ上記制約内で作ってみます。
ということで、シンプルな構成のWEBサイトを用意します。
あとはUPするだけです。FTPの設定だけ載せておきます。図はFileZillaです。
・ホスト ・ユーザー ・パスワード をいれてログオンの種類を通常にしておけば繋がります。
WEBベースのファイルマネージャーも用意されているので、そちらからUPしてもいいでしょう。接続先が直で公開用のルートフォルダになりますので、そのままHTMLファイルをアップすればOKです。
blog_free02
では実際にファイルをアップします。
■実例 テストサイト→http://www.niigata360.xyz/サンプルサイト
 ■結果
ブラウザが対応していればスライドショーなどのコンテンツの表示も特に問題ありません。やはり有料のレンタルサーバーに比べると画像の表示などにもたつきが見られます。値段相応と言った所です。(無料ですが)
■余談
実はここまでは、順調に用意できたのですが、google chromeでは表示できず「無効なURLです。」との表示が続いていました。FirefoxやIE、Edge、さらにMacのsafariでも正しく表示されます。chromeだけドメインの名前解決ができてない印象でした。原因がわからず難儀したのですが、結局は、chromeのDNSキャッシュが原因だったようで、クリアすると表示できるようになりました。chromeのDNSキャッシュクリアは設定からはできないので、アドレスに「chrome://net-internals/#dns」を入れて設定画面を出し、そこから消してください。
blog_free04
■感想
過去に、無料WEBサイト制作サービスが流行って廃れた時期がありましたが、ここに来てふたたび盛り返してきている感があります。無料サーバーも思ったより使えそうですし、選択肢もいくつかあり、組み合わせ次第でランニングコストを極力かけずにWEBサイトを構築できます。テストサイトの構築や個人の学習には十分かと思います。しかし実際に使ってみて無料サーバーと格安であっても有料サーバーには大きな隔たりを感じました。コストに問題なければ、個人のテストであっても有料サーバーを借りた方が面倒が少ないかと思います。(目的によります。)特にドメイン関連の設定に自信の無い方は、ドメインとサーバーは同じ会社から借りましょう。別々の会社から借りた場合、今回のようにトラブルがあると、原因の切り分けと追求に難儀します。
■注意点
ドメインは今回安く取得できましたが、2年目以降は普通に通常料金が掛かります。安くて飛びつくと、維持費が高く付くドメインもありますので、長く使う予定でしたら、一般的な
.comや.net、.jpなどを取得しましょう。今回30円で取得したxyzは2年目以降は1480円です。
また、無料サービスはいつ停止しても文句が言えません。そのあたりのリスクをよく考えてご利用ください。

もう少し続きます。

.net/0.gif?a8mat=2NOT2E+D44RHU+CO4+15THJ5″ alt=”” width=”1″ height=”1″ border=”0″ />