この記事の所要時間: 440

こんにちは

マサキです。

前々回の記事で「フォームメーラー」について書きました。

前々回の記事は下記になります。

無料で簡単にフォームの作成ができます

今回はフォームメーラーをカスタマイズして、ブログなどに設置する方法について書いていきますね。

まずはフォームメーラー」に登録しましょう。

フォームメーラー

登録が完了しましたら、ログインしてみましょう。

下図がログイン画面になります。

ログイン画面

「フォームメーラー」のカスタマイズをしよう

画面右上の「一般フォームを作成」をクリックします。

「フォーム名」と「フォーム説明」を入力します。

※「フォーム名」には最初、「名称未設定フォーム」と入力されています。

フォーム説明は入力必須項目ではありません。

ここでは、「フォーム名」に「お問い合わせ」と入力します。

「フォーム説明」には例として、「ご相談、ご質問がありましたら、お気軽にお問合せくださいね。」と記入します。

「テンプレート選択」を「テンプレート(個人情報入力セット)を使う」を選択しますと、最初から「名前」、「住所」や「電話番号」などが設置されています。

ここでは、「使わない」を選択します。

初期画面

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

「フォーム一覧」に作成したフォームが表示されます。

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

ここが編集画面になります。

編集画面

「基本セット」、「プリセット」にある項目で設定したいものをドラッグ&ドロップで右側に持っていきます。

※ドラッグ&ドロップとは・・・画面上でマウスポインタがウィンドウの枠やファイルのアイコンなどに重なった状態でマウスの左ボタンを押し、そのままの状態でマウスを移動(ドラッグ)させ、別の場所でマウスのボタンを離す(ドロップ)こと。

「名前」を入力する項目を設定しましょう。

「名前」をドラッグ&ドロップで持っていきます。

名前の設置1

このようになります。

名前2

「苗字」と「名前」を入力する必要がでてきます。

相手によれば、「名前だけを入力したい」、「本名はちょっと・・・ハンドルネームで入力したい。」と思う人がいるかもしれません。

僕はこのようにしています。

「テキストフィールド」をドラッグ&ドロップで設置します。

「編集」をクリックします。

名前の編集

「項目名」に入力されている「テキストフィールド」を「お名前(ハンドルネーム可)」と編集します。

「入力必須」はどの項目にもあります。

ここにチェックを入れると、その項目は「入力必須」の項目となります。

ここではチェックをいれます。

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

名前3

このようになります。

名前4

次は「メールアドレス」の項目を作成してみましょう。

方法は上記の「お名前(ハンドルネーム可)」と同じです。

「お名前(ハンドルネーム可)」の下に「テキストフィールド」をドラッグ&ドロップします。

「お名前(ハンドルネーム可)」の所を「メールアドレス」に変更して作成してください。

次は「ブログ・メルマガの引用可否」という項目を作成してみましょう。

「リスト・メニュー」を「メールアドレス」の下にドラッグ&ドロップします。

リスト

「編集」をクリックします。

「項目名」に「ブログ・メルマガへの引用可否」と入力します。

「選択肢」の「選択肢1」を削除し、下記のように縦書きします。

引用可(イニシャル)

引用不可

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

リスト2

最後に読者さんが「お問い合わせ、質問」を入力する欄を作成しましょう。

「テキストエリア」を「ブログ・メルマガへの引用」の下にドラッグ&ドロップします。

テキストエリア

「編集」をクリックします。

「サイズ」の項目で、欄の大きさを自由にカスタマイズできます。

ここでは、「横幅120 行数20」にします。

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

以上でフォームメーラーのカスタマイズは完了です。

「フォームメーラー」を公開しよう

画面上部の「一覧へ戻る」をクリックします。

初期設定では「非公開」になっています。

作成したフォームの「環境設定」をクリックします。

環境設定

「PC」、「スマートフォン」、「携帯」でフォームメーラーを公開したいデバイス(端末)を「公開」にします。

ここでは3つとも「公開」にします。

公開

画面下方の「設定を保存する」をクリックします。

以上で、「フォームメーラーを公開しよう」は終了です。

最後に作成したフォームを設置してみましょう。

作成したフォームを設置しよう

画面上部の「一覧へ戻る」をクリックします。

公開するフォームの「コード表示」をクリックします。

URL(https://~)が表示されます。

これをリンクとして設定します。

↓↓↓に作成したフォームを貼っています。

お問い合わせフォーム

設置済みのフォームを編集したい!

すべてのリンクを修正しないといけない?

心配ご無用です。

URL(https://~)は修正後も変わりませんので、リンクの修正は不要です。

うまくフォームの作成できましたか?

うまく作成できない。

ここがわからない等ありましたら、お気軽に下記よりご連絡くださいね。

マサキにメールする

ランキングに参加しています。

応援のほどよろしくお願いします、

ブログランキング