はじめに
みなさんこんにちは。Spearlyチームのライターもなんです。この記事は、プログラミング初心者の私がSpearly CMSを使ってお問合せフォームを作成するための記事です。Spearly CMSのフォーム機能は、
「すでにあるサイトに、お問合せフォームを追加したい」「お問合せフォームだけ、別のサービスを使っている」
「お問合せのデータを一括で管理したい」
という方にぴったりな機能となっています。今回は、Spearly CMSのフォーム機能の特徴も解説しつつ、お問合せフォームを作成するので、ぜひ最後までご覧ください。
Spearly CMSのフォーム機能とは
Spearly CMSのフォーム機能の最大の特徴は、フォームが送信された際の自動返信メールの作成をSpearly CMS上で行うことができることです。Spearly CMSの「オプション設定」の部分で、自動返信メールの作成ができるほか、フォームが送信された際に送信される管理者側のへの通知メールを設定することもできます。
こちらのフォームもコンテンツと同様に、新規サイト・既存サイトへの埋め込みが可能です。フォームの作成から、管理、自動返信メールまで設定できるのがSpearly CMSの強みになっています。
お問い合わせフォーム作成の手順
今回は既存のサイトにフォームを埋め込むという設定で、実際の手順を解説します。お問い合わせフォーム作成の大まかな流れは、
- フォームを作成する
- フォームをサイトのHTMLファイルの中に埋め込む
- スタイルを当てる
の3つです。では早速お問い合わせフォームの作成に入りましょう。
【手順１】フォームを作成する
①メニューから「フォーム一覧」を選択する
自分のページにログインすると、左端に小さな三角のマークがあります。そこを押すと、メニューが出てくるので、「フォーム一覧」を選択します。
②フォームを追加し基本情報を入力する
「フォームを追加」をクリックし、基本情報を入力します。基本情報の入力が終わったら「保存して次へ」をクリックします。ここではまだフォームの内容は作られていません。
③お問い合わせフォームの内容を入力する
次にお問い合わせフォームの内容の作成をします。今回のお問い合わせフォームは、
・名前
・電話
・メールアドレス
・お問合せ内容
の４つの要素で構成します。
このとき、フォームフィールドタイプは、それぞれの項目に合ったものを選びましょう。お問合せ内容は、複数行入力が可能な「テキストエリア」を選択してください。
④自動返信メールの設定をする
画面上部に戻るとオプション設定のページがあります。ここで「送信内容確認メール通知設定」の「回答者に送信確認メールを送信する」にチェックを入れると、自動返信メールの設定ができます。
これでフォーム作成の全ての手順は終了です。1番上の項目から埋め込みプレビューを押してみると...
お問い合わせフォームが完成しました！次に、お問い合わせフォームの埋め込みに入ります。
【手順２】お問い合わせフォームを埋め込む
①HTMLファイルを用意する
フォームを埋め込むためのHTMLファイルを用意します。既存のサイトにフォームを埋め込みたい場合は、サイトのHTMLファイルを用紙してください。今回は、フォームの作成のみをしたいので、新しくHTMLファイルを作成しました。コードは以下の通りです。<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>
②埋め込みタグをコード内に埋め込む
1番上の項目から、埋め込み方法のページを開きます。今回は埋め込みタグを使って問い合わせフォームを作るので、「埋込タグを使う」の手順に従って埋め込みを行なっていきましょう。
③共通スプリクトタグを埋め込む
ステップ１のJavaScriptコードの読み込みからコードをコピーして<head>内に埋め込みます。続いて、ステップ２のフィールドコードの埋め込みからコードをコピーして<body>内に埋め込みます。フォルダを保存してブラウザで開いてみると…
お問合せフォームができました。ですが、このままだと使いづらいので、HTMLファイルを少し書き換えたあと、スタイルをあてて整えます。
【手順３】スタイルを当てる
①スタイルをあてやすいようにHTMLファイルを書き換える
Spearly CMSが生成してくれた埋め込みタグはそのままにして、スタイルがあてやすいように、タグを書き換えたりclass名をつけたりしています。②スタイルをあてる
width: 100%;
margin-bottom: 20px;}
.contact-item,.contact-body {
border: 1px solid #E8E1E1;
padding: 20px;}
.contact-item {
background-color: #E8E1E1;
text-align: left;
width: 30%;}
.contact-body {
width: 70%;}
.form-textarea {
height: 200px;
padding: 24px;
width: 100%;}
#name,#mail,#tel {
border: 1px solid #E8E1E1;
border-radius: 5px;
max-width: 400px;
padding: 7px;
width: 100%;}
#contact {
border: 1px solid #E8E1E1;
border-radius: 5px;
height: 200px;
padding: 7px;
width: 100%;}
.contact-submit {
border-radius: 50px;
background-color: #a5a284;
border: none;
color: #fff;
display: block;
font-weight: bold;
font-size: 16px;
margin: 0 auto;
padding: 15px;
width: 250px;}
ブラウザで開いてみると…
これでお問合せフォーム作成の手順は以上になります。
おわりに
最後まで見ていただきありがとうございました！お問合せフォームの作成の手順はわかりましたでしょうか？お問合せフォームは１つ作っておけばさまざまな場面で使えると思うので、ぜひ作ってみてくださいね。
🔻Spearly CMSはこちら🔻
