ワードプレスにフォームメーラーを設置!文字化けも改善する方法

この記事では、ブログに無料で設置できるお問い合わせフォーム「フォームメーラー」の登録方法と設置の仕方、フォームの文字化けを改善する方法について説明します。

 
 

フォームメーラーの新規登録方法

まずはフォームメーラーの登録をします。

こちらのリンクをクリックして、フォームメーラーのサイトに飛びましょう。

下の図の赤い枠で囲った「新規登録はこちら」をクリックします。

無料の「新規ご利用登録」をクリックします。

メールアドレスを確認用と2箇所に書き込み、個人情報の取扱いについて同意とサービス利用規約の内容を確認して、「同意する」のそれぞれ2箇所にチェックを入れて、「送信する」をクリックします。

自分のメールアドレスが間違っていないか確認し、正しければ「登録する」をクリックします。

登録申請を受け付けましたの画面に変わります。

すぐに自分のメール受信箱に行き、フォームメーラーからのメールが来ていたら開きます。

登録したメールアドレスに下の図のようなメールが届きます。

メール本文に記載されたURLをクリックします。

氏名とパスワードを書き込んで下の登録ボタンをクリックします。

パスワードは任意の8文字以上の半角英数字を入力します。

アンケートには特に答えなくても構いません。

氏名とパスワードの確認画面が現れるので、正しければ「登録する」をクリックします。

これで登録が完了しました。

「ログインに戻る」ボタンをクリックし、フォームメーラーにログインして各種設定作業を行っていきます。

フォーム作成と各種設定

メールアドレスとパスワードを入力してログインします。

入力項目編集

「一般フォームを作成」をクリックします。

以下の画面が出てきたら、「フォームの作成手順は、こちらを参照ください。」をクリックします。

まず、「入力項目編集」をクリックします。

このような編集画面が現れます。

一番上の「名称未設定フォーム」の矢印のところにカーソルを近づけると、図のような鉛筆アイコンが現れるので、ここをクリックします。

赤枠に「お問い合わせ」と入力し、フォーム説明の「表示する」のチェックをクリックして外します。

※「お問い合わせ」以外でも、ご自分のお好きな名称で構いません。

後で変更も可能ですので、取り敢えずこの設定でいきます。

「設定を保存する」をクリックします。

ここでは、「※は必須項目です」という表書きの表示設定を非表示にしたいと思います。

「表示する」の文字をクリックします。

「必須注意書きの表示」の横のチェックをクリックして外します。

「設定を保存する」をクリックします。

名前の入力欄の編集をします。

姓名の横にカーソルを当てると鉛筆のアイコンが表示されるので、それをクリックします。

「項目名」に「お名前」と入力します。(デフォルトの「名前」のままだと何となく失礼な感じがするので、こう書き換えました。)

「入力必須」にチェックを入れ、「設定を保存する」をクリックします。

メールアドレスの横にカーソルを当てて、鉛筆アイコンをクリックします。

「入力必須」「自動返信メール」「管理者宛メール」のそれぞれの横にあるチェックボックスにチェックを入れます。

「設定を保存する」をクリックします。

「性別」の横にカーソルを当てて、赤い☓印をクリックします。

図のようなボックスが現れますので、「OK」をクリックします。

※こうすることで、その項目自体が削除されます。

このようにして、下に続く「生年月日」「住所」「連絡先」も削除します。

左の「基本セット」の中から、「テキストエリア」をメールアドレスの下にドラッグ&ドロップしてきます。

「テキストエリア」の左にカーソルを当てて、鉛筆アイコンをクリックします。

「項目名」に「お問い合わせ」と書き、「設定を保存する」をクリックします。

以上で、このように「問い合わせフォームの設定」が出来上がりました。

次は、デザインの変更に移ります。

画面確認・デザイン変更

「画面確認・デザイン変更」をクリックします。

「デザイン一覧」をクリックします。

まずは、どんなデザインがあるのか、全体的に見てみましょう!

「シンプル」をクリックすると、こんな風に12種類のデザインが出てきました。

それぞれの画像の上をクリックするとサイト上にプレビュー画面として現れますので、イメージしやすいですよ。

「背景グラデーション」は、この14種類です。

「背景模様」は、この15種類です。

「写真・イラストタッチ」は、この11種類です。

私は、「背景模様」の「フラワー」を選びました。

自分の好みのデザインを選んだら、「設定を保存する」をクリックします。

次は、フォームメーラーの各種環境設定をしていきます。

環境設定

受付番号設定

公開設定

上の「環境設定」をクリックして、左横の「受付番号設定」をクリックします。

PCと携帯は「公開する」にします。

スマートフォンは、そのままの設定にしておきます。

(ここでは、「受付期間・受付定員設定」は、割愛させていただきます。

「設定を保存する」をクリックします。

各種画面設定

左の「各種画面設定」をクリックします。

入力画面設定

「当サイトを利用する」にチェックします。

入力内容確認画面設定

「表示する」にチェックします。

完了画面設定

「完了画面」とは、問い合わせ投稿者が、投稿した後に表示されるページの事です。

■完了メッセージ

「完了メッセージ」は、次のように入力しました。

お問い合わせメールをいただきありがとうございます。

数分以内に自動返信メールが届きます。

内容を確認させていただき折り返しご連絡差し上げます。

もし届かない場合は、「迷惑メールフォルダ」をご確認ください。

また、送信エラーの可能性もありますので、再度お問い合わせいただくか、下記のメールアドレスへ直接ご連絡ください。

メールアドレス

■戻り先URL

「戻り先URL」とは、問い合わせフォームを送信した直後に「戻る」が表示され、それをクリックすると、自分のサイトに戻る設定のことです。

この設定をしておいた方が、サイト訪問者が再びサイトを訪れてくれるので、設置することをおすすめします。

ちなみに私は、「PC」「スマートフォン」「携帯」すべてを自サイトのURLにしておきました。

■設定を保存

「設定を保存する」をクリックします。

各種メール設定

左の各種メール設定をクリックします。

管理者宛メール設定

これは管理者である自分のところに来るメールの設定です。

■管理者宛メールの件名

これは、自分が分かりやすければ、何でもいいです。

ちなみに私は、「お問い合わせがありました」と書きました。

■管理者宛メールの送信先アドレス

これは自分のメールアドレスを入力しました。

各種ボタンの選択は図を参照してください。

自動返信メール設定

■自動返信メールの件名

お問い合わせありがとうございます【自動返信】

■自動返信メールの本文

お問い合わせありがとうございます。

内容を確認させていただき、48時間以内に折り返しご連絡いたします。

それ以上たっても返信がない場合は、エラーによる不達の可能性もありますので、お手数ですが、下記のメールアドレスへご連絡いただけますよう、よろしくお願い申し上げます。

メールアドレス

■自動返信メールの差出人

差出人名:自分のメールアドレス

まず、ここまで入力できたら、「自動返信メールの本文」の宛名のところに自動で「お客さま」の名前を挿入する「置換文字挿入」をします。

置換文字挿入の手順

  1. お客さまの名前を挿入したい箇所(下図の①)にカーソルを合わせて、クリックしておきます。
  2. 「置換文字挿入」(②)をクリックします。
  3. 「お名前(%%5388438%%)」(③)をクリックします。
  4. 「挿入」(④)をクリックします。

このように置換文字が挿入できたら、「設定を保存する」をクリックします。

フォームメーラーをワードプレスに設置する方法

コードを表示しブログのページに貼り付ける

同じく「環境設定」の「各種画面設定」をクリックします。

右上にある「(設置にはHTMLコードをご利用ください)と書いてある中の「HTMLコード」をクリックします。

HTMLコードの「<form>要素のみ」をクリックして、赤枠の中に現れたコードをすべてコピーします。

ワードプレスの固定ページにコードをそのまま貼り付けると、このように表示されました。

ちなみに「デザイン変更」で花柄のフォームにしたのですが、花柄にならなかったです・・・

まぁ、そのへんは無料という事で仕方がないと諦めます(笑)

さっそく試しに名前・メールアドレス・お問い合わせを書き込んで、自分のメールアドレスに送ってみました。

すると・・・

あれれ^^;

文字化けしてました!

フォームメーラーの無料版は、文字コードがShift-JISのものしか手に入らないので、文字コードがUTF-8のワードプレスにそのまま入れると、文字化けしちゃうんですよね~

では、文字コードを修正して、文字化けを直しちゃいましょう!

コードを修正して文字化けを直す方法

フォームメーラーからコピペしたコードの中の2箇所を替えます。

まず1つ目は、<form action= で始まる1行目の次のコードを見つけてください。

<form action="フォームメーラーURL" method="post" name="form1"  ENCTYPE="multipart/form-data">

この部分をそっくりそのまま、下のコードに貼り替えてください。

<form action="フォームメーラーURL" method="post" name="form1"  ENCTYPE="multipart/form-data">

上の箇所をこのコードにしちゃいます。↓

<form action="https://ssl.form-mailer.jp/fm/service/Forms/confirm" method="post" name="form1" accept-charset="Shift-JIS" ENCTYPE="multipart/form-data">

そして2つ目は、<p><input name= で始まる下の方にある次のコードを見つけてください。

<p><input name="submit" type="submit" value="確認画面へ"></p>

この部分をそっくりそのまま、下のコードに貼り替えてください。

すると・・・

文字化けが修正されて、ちゃんとした文字で表示されました!

送信ボタンをクリックしてみましょう。

画面に完了メッセージが表示されました。

メールを確認したら、ちゃんと自動返信メールが届いていました。

お疲れ様でした。

以上、フォームメーラ(Free無料版)をワードプレスのブログに文字化け無しで設置する方法でした。

ぜひ、試してみてくださいね(^^)

以下にメールアドレスを入力しお申し込みください

お名前(必須)  
メールアドレス(必須)

※プロバイダーアドレスでは、メールが受け取れない場合がございますので、
Hotmail以外のYahoo、Gmailなどのフリーメールアドレスでの登録をお薦めいたします。

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: 
応援してくれたら喜んで踊り狂います~♪
プロフィール

アドセンス実践アラフィフ主婦
詳しいプロフィール

最近の投稿
カテゴリー
Twitterやってます(^^)