Webフォーム作成の記事
ARTICLEMovable Typeを利用してメールフォームを設置しよう！
Webサイトを制作したときに、メールフォームを設置したいと考えることもあるでしょう。Movable Typeを利用すれば、誰でもかんたんにメールフォームを設置することができます。本記事では、Movable Typeの種類やメリットについて解説します。
目次
Movable Typeとは？
Movable Typeは、CMSツールのひとつです。
CMSとは、「Contents Management System」の頭文字をとったもので、にいうとWebサイトのコンテンツを構成するテキストや画像、デザイン・レイアウト情報（テンプレート）などを一元的に保存・管理するシステムのことです。
Movable TypeはCMSツールの中でも自由度が高く、管理しやすいのが特徴で、低コストで利用できることから全国で5万サイト以上で利用されています。
Movable Typeのメリット
Movable Typeのメリットとして、次の4点が挙げられます。
メリット①GUIで操作できるのでプログラミングの知識が不要
メリット②受付時間を調整できる
メリット③チームで一元管理可能
メリット④レスポンシブに対応
一つずつ解説します。
メリット①GUIで操作できるのでプログラミングの知識が不要
Movable Typeは直感的なGUI操作が可能です。GUIとは、グラフィカルユーザインターフェース(Graphical User Interface)の頭文字をとったもので、ユーザが画面上で視覚的に捉えて行動を指定できるインターフェースのことです。
ドラッグ＆ドロップによる入力項目の選択や、サイトにマッチしたテンプレートが用意されているので、プログラミングの知識がなくてもかんたんに利用することができます。
メリット②受付時間を調整できる
Movable Typeはフォーム受信の受け付け終了日と、時間を調整できます。
受付に関して変更できる項目も多く準備されており、以下の項目を設定可能です。
- 受け付け終了日
- 受け付け件数
- 受け付け終了時のメッセージ
- 受付完了時の動作
- 受付完了時のメッセージ
メリット③チームで一元管理可能
有料プランのみになりますが、Movable Typeでは受付データをチームで管理できる機能があります。
フォームに関する権限としては、次の3つが存在しています。
- オーナー：フォームの契約者です。契約関係の操作含め、すべての機能を利用できます。
- フォーム管理者：フォームの管理、機能を利用できます。契約関係の操作はできません。
- 参加者：招待を受けたうえで、受付データのみを閲覧できるようになります。
上記を含めた権限についての詳細は、提供元のシックス・アパートが公表している以下のページをご確認ください。
https://movabletype.net/form/manual/member.html
メリット④レスポンシブに対応
Movable Typeは、レスポンシブ機能付きなので、スマホやiPhoneからもフォームへの投稿が可能となっています。現在では、スマートフォンを利用してサイトに訪問するユーザーが多い傾向にありますので、レスポンシブ機能はユーザビリティの向上という面でもメリットといえるでしょう。
Movable Typeのデメリット
Movable Typeのデメリットとしては次の3つが挙げられます。
デメリット①テンプレート数が少ない
デメリット②プラグイン数が少ない
デメリット③脆弱性への対策が必要
一つずつ解説します。
デメリット①テンプレート数が少ない
Movable Typeにはテンプレートの数が少ないと言うデメリットがあります。
テンプレートのカスタマイズにはプログラミングの知識が必要になるので、プログラミングの知識がない人が細かくカスタマイズされたフォームを利用したいと場合には、Movable Typeだと不便に思う点が多くなるでしょう。
Movable Type のテンプレートは、大きく5つに分類されています。
- インデックステンプレート
- アーカイブテンプレート
- テンプレートモジュール
- システムテンプレート
- ウィジェット
また、カスタマイズに関する情報がネット上に少ないこともデメリットのひとつです。
デメリット②プラグイン数が少ない
Movable TypeはWordPressと比較するとプラグインが少ないため、即時に変更を加えたいときに不便だと感じる人もいるでしょう。また、テーマについても同様に、WordPressと比較すると種類が少ないです。
なお、準備されているプラグインについては以下のサイトから確認可能です。
https://plugins.movabletype.jp/
デメリット③脆弱性への対策が必要
絶対に穴のないシステムは存在しないですが、Movable Typeもその他のCMSやシステムと同様、これまでに脆弱性が見つかっています。
脆弱性が見つかった際は、提供元のシックス・アパート株式会社のリリースページからも概要と対象製品、対策などが公表されているため、よく確認して対応を行う必要があります。
特にフォームにおいて個人情報を扱う場合は、セキュリティの観点から十分な注意が求められるでしょう。
Movable Typeメールフォームの使い方
Movable Typeメールフォームの使い方について解説します。使い方は4ステップです。
- ステップ①アカウントを作成
- ステップ②メールフォームを作成
- ステップ③埋め込みコードを記事に埋め込む
- ステップ④CSSでデザインを作る
一つずつ解説します。
ステップ①アカウントを作成
まずはMovable Typeの会員登録を行い、アカウントを作成します。
会員登録の手順は以下の通りです。
1.トップページよりメールアドレスを送信
2.届いたメール内に記載されているURLをクリック
3.パスワード、ユーザー名などを入力
4.利用規約に同意して登録する
こちらから登録が可能です。
ステップ②メールフォームを作成
会員登録が完了したら、メールフォームの作成を行いましょう。
1.フォームサービスの作成をクリック
2.基本設定タブ内の入力
3.項目変更タブで入力項目をカスタマイズ
以上の3ステップで作成可能です。GUIで設定できるので、慣れていない人でもかんたんに作成できます。
ステップ③埋め込みコードを記事に埋め込む
メールフォームの作成が完了したら、埋め込みコードを記事に埋め込みましょう。
埋め込む際には、HTML形式でペーストすることを忘れないようにしてください。
ステップ④CSSでデザインを作る
フォームをおしゃれにデザインしたいときには、CSSを記述しましょう。CSSの記述方法は以下の通りです。
1.左サイドバー「フォーム」より「一覧」をクリック
2.編集するフォームを選択
3.「基本設定」タブ内「カスタムCSS」の入力フィールドへ記述
ウェブページ、ブログ記事でそれぞれ異なるCSSを適用する場合には、編集画面に以下のような記述を行いましょう。
body {
font-family: serif;
}
body.entry {
background: pink;
}
body.entry p {
color: red;
}
body.page {
background: green;
}
body.page p {
color: yellow;
}theme.yamlでスタイルを指定する場合は以下のような記述を追加してください。
elements:
default_prefs:
importer: default_prefs
data:
content_css: "{{theme_static}}path/to/cssfile.css"申請や応募受付の電子化・システム化ならWebフォーム作成システム「SPIRAL」
当社のご提供する 「Webフォーム作成システムSPIRAL」は、かんたん操作で自由自在にフォーム作成が行える定額制のWebフォーム作成システムです。 申請や応募の受付だけでなく、その後のステータス管理や応募者用マイページ作成など、受付から管理までをWebシステム化することができます。
受付フォームは画像やPDFなどのアップロードにも対応。拡張子指定や容量制限、入力制限もできるので、自社の要件にあったフォームを構築することができます。また、デザインはテンプレートからの選択の他、HTML、CSS、JavaScriptを利用してカスタマイズも可能です。
申請者用・管理者様にそれぞれマイページを作成し、ステータス管理や申請内容の情報変更をWeb上で行うこともできます。
書類申請、出願・公募受付、補助金・助成金申請、契約加入・更新受付、キャンペーン受付、問い合わせ受付など様々な業界・用途・シーンで延べ12,000社以上のご利用実績がございます。
サービスの詳細については「Webフォーム作成システムSPIRAL」のページをご覧いただくか、サービス導入をご検討中の方はこちらからぜひお問い合わせください。
まとめ
本記事ではMovable Typeについて解説しました。
GUI操作でメールフォームを作成することができるので、プログラミングの知識がない人でもかんたんに作成することができるでしょう。ただし、より高いセキュリティやカスタマイズ性を求める場合だと不十分な場合もあります。利用を検討中の場合は、自社の目的がかなえられるかをよく確認したうえで導入を行いましょう。
