Saruの進化は止まらない!!

私の気に入った物の感想・紹介・説明・etc.

お手軽な連絡用ページ。お問い合わせフォームを作りました。【フォームメーラー無料版】

f:id:Saru_chaaan:20170630051623j:plain

 

お問い合わせフォームを作りたいと思っている人はおらんかねーー。

あなたを見つけました。

 

ブログの手軽な連絡手段が欲しいですよね。

そーんなあなたに必見の説明を用意しました。

 

 

お問い合わせフォームとは

ブログやブログを管理している人への質問、意見、感想、その他いろいろを受け付けるところですね。

 

ビフォア

連絡はしたい!

でも、メールアドレス入力とかめんどうだし~~。

やっぱりやーーめた。

 

そんなあなたの友達も

 

アフター

お問い合わせフォームあるじゃん!やったーーー。

連絡しよーーー。

 

ってなるわけなんです。

 ページから連絡が出来るので楽なんですよね。

 

返事はあなたのメールアドレスに送られますよ。

詳しくは、下に説明を書きますね。

 

 

送信する側の流れ

ページにいく。(行かなきゃそんそん!)

名前を入力する。(ハンドルネームでもOK)

メールアドレスを入力する。(返信用に必要です。)

本文を入力する。(これがなくては始まらない!)

 

ではそれを作っていきましょう。

 

 

メールフォームの作成

サイトに登録します。

次に注文フォームの作成、投票フォームの作成、一般フォームの作成から、

一般フォームの作成を選びます。

 

入力項目編集

お問い合わせフォームの全体が分かるので、ここを編集していきます。

 

必要の無い項目は、項目の右側にあるバツで消せます。

項目を編集したい場合はペンのマークです。

 

左側のものを入れたいときは、ドラッグしたままもってきてください。

順番を変えるのも、ドラッグして動かします。

 

変更点は、私の作ったお問い合わせをもとに、上から順に説明します。

 

名称未設定フォーム

フォーム名をお問い合わせと変更する。

 

フォーム説明を変更します。

どのように使って欲しいかを書くところになります。

(Saruの進化は止まらない!!への質問やご意見、お仕事依頼などありましたら、こちらをお使いください。)ですね。

 

名前の変更点

項目名を(名前(ハンドルネームでも大丈夫です。))に変えています。

私が送る場合は姓Sa、名ruでしょうか。(違和感がすごい)

本文にでも○○です。ってしてもらえると助かります。

 

入力必須にチェックを入れています。

これで、空白での送信が出来なくなります。

ここから下の全てを入力必須にするのでをチェックを忘れずに!

 

メールアドレスの変更点

確認用入力欄にチェックを入れています。

この項目にチェックを入れることで、2回入力して間違いを防止できますね。

 

テキストエリアを追加

本文を作るために、左側にあるテキストエリアを追加します。

 

項目名を本文に変更です。

 

サイズの部分で、縦幅と行数の変更をすると入力するスペースが大きくなります。

私の設定は、横幅60、行数20です。参考にしてください。

 

 

最低限必要なのはこれくらいでしょうか。

あとはオリジナルのメールフォームを作ってください。

 

 

画面確認・デザイン変更

出来上がったメールフォームを確認することが出来ます。

何も変更していません。

 

コード表示

URLリンクがあるので、それをあなたのページで使ってあげれば、メールフォームのページに飛びます。

使い方は、下に説明とリンクを張っています。

 

環境設定

公開設定のPCを公開するにしていないと、ページに飛んでも表示されません。

スマートフォンは、PCの画面を表示するにしておけば、PCの公開とともに自動で公開になります。

携帯は、個別に公開するを選ぶ必要があります。

 

 

フォームメーラー側の設定は以上です。

 

 

ちょっと注意

今回使うのはフォームメーラーという無料で使えるものになります。

ただし、「バナーを設置してください。お願いします!!」

だそうです。

サイト内だからこのページでもいいのかな?最悪いいのかな?

SSL標準装備の無料メールフォーム作成・管理ツール | フォームメーラー

 

設置場所と方法

サイドバーのところにリンクを作ったので、そこから飛んでください。

f:id:Saru_chaaan:20170630035326j:plain

こちらの方の、一番下にあるコードを参考にしました。

ありがとうございます。

www.tssb26.com

私のを使いたい場合は、ブログ内のコードをコピーしちゃってください。

上のニーさんのを参考にした(パクった)ので、ここにコードはのせないことにします。

 

また、ニーさんはgoogleのメールフォームを使っているようなので、

お問い合わせを作る参考にしてみてはどうでしょうか?

 

 

おわりに

気軽に使ってくださーい。

せっかく実装したのに0通とか悲しすぎて泣きそうになるのでね。

 

送ることが無いって?すまーーん。

もっと魅力的になりまーーす。