スマートフォンサイトを表示する

  1. TOP
  2. ホームページのクオリティアップ術:制作編 : 第6回 外部サービスのメールフォームを導入する

エキスパートコラム

ホームページのクオリティアップ術:制作編(全11回)

第6回:外部サービスのメールフォームを導入する

執筆:赤間 公太郎(株式会社マジカルリミックス)

2015年9月28日更新(2017年9月6日改訂)

  • このエントリーをはてなブックマークに追加

閲覧数7,053views

このコラムをPDF形式でダウンロードする

"ホームページのクオリティアップ術:制作編"のコラムを担当する、マジカルリミックスの赤間です。全11回のこのコラムでは、ホームページづくりに役立つサービスやその利用方法をご紹介していきます。

便利な無料のWebサービスを活用して、効率よく質の高いホームページを目指しましょう。

前回のコラム「第5回:外部サービスのショッピングカートを導入する」では、外部のショッピングカートをJimdoに取り入れて利用する方法を解説しました。登録商品数やセキュリティ面でのメリットがありました。今回は、Jimdoに「外部サービスのメールフォーム」を導入する方法をご紹介します。

外部サービスのメールフォームのメリット

今回のコラムでは「外部サービスのメールフォーム」について解説するわけですが、Jimdoにはそもそもメールフォームの機能が実装されています。ではなぜ、あえて外部サービスのメールフォームを利用するのか、それはJimdoのメールフォームの機能に不足したものがあるからです。

例えば、Jimdoではメールフォームに入力して送信した際、入力者に送信の控えは送られません。人によってはこのニーズは大きいため、Jimdoでできないことを外部サービスに求めることも多々あります。

「フォームメーラー」をご紹介

フォームメーラーは、株式会社フューチャースピリッツが運営するメールフォームのASPサービスです。ユーザー登録をすれば、ものの数分でSSL・スマートフォンに対応したメールフォームを利用することができます。

ASPサービスとは
ASPはApplication Service Providerの頭文字をとったものです。メーカーや開発元などが、インターネットのソフトウェアを直接販売ではなく「利用する権利」として提供する形態をいいます。JimdoもASPサービスのジャンルに属します。

http://www.form-mailer.jp/

フォームメーラーには3つのプラン

フォームメーラーはFree版、Pro版、Business版の3パターンがあります。Jimdoのようなビジネスモデルですね。Free版は費用がかからず、気軽に始められますので、まずはこちらを試してみるとよいでしょう。

しかしながら、フリー版では入力できるフォームの個数や、フォームの設置数に限りがあります。自分の利用用途に合わせてプランを選択しましょう。

詳しくは[プラン一覧]にそれぞれの違いが詳しく掲載されている

フォームメーラーに登録してみよう

Free版の[新規ご利用登録]ボタンをクリックすると、メールアドレスの入力欄が表示されます。メールアドレスを入力し、個人情報と利用規約に同意し、[送信する]ボタンを押します。

この段階では、まだ仮登録の状態です。入力したメールアドレス宛に、受付のメールが届きますので確認しましょう。手順に従い本登録をします。

フォームの作成

フォームメーラーへの登録が完了し、ログインすると以下のような画面が表示されます。ページ右上にある緑のボタン[一般フォームを作成]をクリックして、作成画面を表示します。

新規作成時に、フォームに名前をつけて、説明を入力します。フォームメーラーはいくつもフォームを作成することができますので、用途別にわかりやすい名前をつけておくとよいでしょう。「テンプレート選択」では、よく利用するような項目があらかじめセットされた状態から作成することができます。

入力項目編集

フォームの項目を追加するには、画面左側の「基本セット」または「プリセット」の項目を、画面右側のエリアにドラッグ&ドロップします。名前や住所などのよく使う項目のほかにも、「テキストフィールド」や「チェックボックス」など、自由なフォームで構成が可能です。

環境設定

入力項目ができたら、環境設定を行います。ここでは、フォームの公開・非公開のコントロールのほか、スマートフォンや携帯電話への表示対応の設定を行います。

画面確認・デザイン変更

この画面では、フォームのデザインや、実際にページにどのような表示で適用されるのかを確認することができます。組み込むホームページになじむように、設定を整えましょう。

コード表示

フォームメーラーは、あくまでフォーム機能を提供する単体のサービスです。フォームを作成後は、ホームページからリンクを張ったり、ホームページに埋め込むなどの作業が必要です。コード表示は、Jimdoなどの外部のサービスと連携するための専用のコードを取得するためのページです。

外部のWebサイトに貼り付けするためのコードをコピー

コード表示画面で、ページ下部までスクロールすると「HTMLコード」が表示されています。

Jimdoのページに、一体化させて表示するには「<form>要素のみ」に切り替えて、表示されたコード部分をすべて選択し、コピーします。以上でフォームメーラー側で行う作業はすべて完了です。

Jimdoに埋め込む

Jimdoにコンテンツを追加の際、「・・・その他コンテンツ&アドオン」という青いボタンがありますので、そこをクリックし隠されたメニューを表示させます。そして、[</> ウィジェット / HTML]をクリックし項目を追加します。

入力エリアに、先ほどコピーしておいたコードを貼り付け[保存]ボタンをクリックします。

これで、メールフォームがJimdoに組み込まれました。

導入後は、問題なくメールフォームが可動しているかどうか、テストしてみましょう。ウィジェットは編集画面中ではうまく表示がされないことが多々ありますので、必ずプレビュー状態で確認します。

フォーム送信ボタンである[確認画面へ]ボタンをクリックすると、フォームメーラーのページへ移動します。アドレスバーの部分を確認してみると、このページがSSLで保護されていることがわかります。

まとめ

  • 外部サービスを利用して、送信者へメールの控えを自動送信などの機能を実現する
  • フォームメーラーは登録もカンタンで、ドラッグ&ドロップでフォームを作成する
  • Jimdoのウィジェット機能をつかうことにより、Jimdoとフォームメーラーの連携が実現

次回は、「アイコンにこだわろう!お気に入りに表示される画像(ファビコン)を作成する方法 」をお伝えします。(つづく)

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

赤間 公太郎(あかま・こうたろう)

赤間 公太郎(あかま・こうたろう)

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert
http://www.magical-remix.co.jp/
http://www.kotalog.net/

宮城県出身。IT関連の専門学校を卒業後、仙台のデザイン会社に入社。Webサイトのデザイン・コーディングを中心に従事。2002年退職後すぐに個人事業としてマジカルリミックスを創業。2007年に法人化し株式会社マジカルリミックスを設立。規模を問わずお客様のニーズにあわせたWebサイトの企画立案、制作、アクセスと売上アップをめざした更新サポートまで一貫して手がけている。
また、Web制作だけにとどまらず、社内向けのセキュリティ・IT活用のプライベートトレーニング、セミナー出演、執筆なども意欲的に手がける。全国からの講演依頼も多数。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。

主な著書に『10日でSEO&アクセスアップ Jimdoデザインブック』(エムディエヌコーポレーション)『10日で作るかっこいいホームページ Jimdoデザインブック』(同)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。

[所属]
仙台商工会議所 エキスパートバンク登録/みやぎ産業振興機構 専門家アドバイザー/みやぎ工業会正会員

10日で作るかっこいいホームページ Jimdoデザインブック 改訂新版

  • はじめてWEB 読も読もキャンペーン「テーマ別セレクト本」プレゼント!
  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/10/8~2017/10/14]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ