JotFormでお問い合わせフォームを作成して、自分のサイトに設置する手順例

JotFormでお問い合わせフォームを作成して、自分のサイトに設置する手順例
当サイトではこれまでお問い合わせフォームを設けていませんでしたが、先日JotFormという海外のサービスを利用して、ようやく設置しました。この投稿では、JotFormで簡素なお問い合わせフォームを作成し、自分のサイトに挿入する手順の一例をご紹介します。
コメント: 0

無料でウェブ・フォームを作成できるサービス、JotFormを利用して、下の画像のような一般的なお問い合わせフォームを作成してみました。その手順を簡単にご紹介します。

お問い合わせフォームの完成イメージ

JotFormにアカウントを作成

JotFormのサイトに行くと、アカウントを作成する前からフォームの作成ができてしまいます。初めての方は、ここでどのようにフォームを作成できるのか体験することが出来て便利です。しかし、これからフォームを作成して管理していくために、サインアップしてアカウントを作成しましょう。ユーザー名、Eメール、パスワードを登録するだけで簡単に作成できます。

サインアップやログインをする前にhttps://www.jotform.com/にアクセスすると、通信をSSLで暗号化出来ます。

フォーム名を決定する

先ずはフォーム名をお好みのフォーム名に変更しましょう。複数のフォームを管理するような場合、管理画面で他のフォームと見分けが付くように、適切なフォーム名を入力してください。ここまで準備ができたら、いよいよフィールドの追加です!

フィールドの追加

「いよいよフィールドの追加です!」なんて書きましたが、フィールドの追加は簡単です。左サイドバーの'Text Box'や'Text Area'などをクリックするとフィールドが追加されます。フィールドの順番を変更するには、画面右側のプレビューでドラッグ&ドロップするだけという手軽さです。

お名前

一行のテキスト・フィールドを追加するには、左サイドバーの[Form Tools] > [Text Box]をクリックします。ラベルは'Name'とします。

左サイドバーの[Form Tools] > [Text Box]をクリックすると、一行のテキスト・フィールドが追加されます。

Eメール

Eメール・フィールドを追加するには、左サイドバーの[Quick Tools] > [E-mail]をクリックします。ラベルは'E-mail'のままにします

左サイドバーの[Quick Tools] > [E-mail]をクリックすると、Eメール・フィールドが追加されます。

件名

お名前フィールドと同様に、一行のテキスト・フィールドを追加するには、左サイドバーの[Form Tools] > [Text Box]をクリックします。ラベルは'Subject'とします。

メッセージ

複数行のフィールドを追加するには、左サイドバーの[Form Tools] > [Text Area]をクリックします。ラベルは'Message'とします。

CAPTCHA

CAPTCHAフィールドを追加するには、左サイドバーの[Quick Tools] > [Captcha]をクリックします。ラベルは'Verification'とします。

入力必須項目を決定する

Eメールやメッセージ・フィールドなど、空欄では送信できない入力必須フィールドを決定します。私は全てのフィールドを入力必須としましたが、お好みでどうぞ。

フィールドの入力必須/任意の切り替えには、画面右側のプレビュー画面で、編集したいフィールドをクリックして選択したあと、画面上部の[Required]という赤いアイコンをクリックします。

入力必須にしたいフィールドをクリックで選択し、赤い[Required]ボタンで必須フィールドに切り替えます。

スタイルの編集

フォームの全体のスタイルを設定

画面右側のプレビュー画面の上部の[Form Style]タブを開くとテーマ、フォント、フォントの大きさ、フォントの色、背景、フォームの幅、ラベルの幅、ラベルの整列を設定するためのツールバーが開きます。これらはカスタムCSSからでは変更できないようなので、ここで変更することになります。ご自身のサイトのスタイルに合わせて変更してください。

Eメール・フィールドの横幅を揃える

お名前フィールドと件名フィールドに比べて、Eメール・フィールドだけが横幅が長いので修正します。画面右側のプレビュー画面でE-mailをクリックして選択し、画面上部のツールバーの[Size]をクリックし、サイズを'20'に設定します。

カスタムCSSを加える

画面上部の[Setup & Embed] > [Preference]をクリックするとポップアップで設定ダイアログが開きます。[Form Styles]をクリックすると、下部に'Inject Custom CSS'という欄がありますので、ご自身のサイトのスタイルに合わせて編集していきます。私はスタイルを編集する前に、一番上の'Themes'という項目を'Default'にしました。

Inject Custom CSSという項目でご自身のサイトのスタイルに合わせてCSSを追加してください。

どの要素(HTMLタグやid、classなど)を変更したら良いのかを知るには、画面左上の[Preview]をクリックし、ポップアップ・ダイアログで[Open in new tab]をクリックします。ここで開いたページをChromeのInspect Element機能や、FirefoxのFirebugアドオンなどを利用して、確認してください。

ChromeのInspect Element機能やFirefoxのFirebugアドオンなどを使うと、どのようにCSSを変更すればよいかわかります。

CSSを変更すると、JotForm管理画面のプレビューに反映されます。

JotFormの管理画面のプレビューが真っ黒なスタイルになってしまいました。

通知メールの設定

画面右側のプレビュー画面の上部の[Setup & Embed] > [Email List]をクリックすると、[Notification]という項目がすでにありますので、クリックします。

[Email Alert]タブをクリックすると、すでに[Notification]という項目があります。

するとポップアップで編集画面が開きます。デフォルトではHTMLメールで通知が届くようになっていますので、私は[Switch to Text Mode]というボタンをクリックして、テキストモードに切り替えました。内容も少し変更して、以下のようにしました。

通知メールをテキスト・モードで編集

Name:
{name}

E-mail:
{email3}

Subject:
{subject}

Message:
{message}

-----

Submission ID:
{id}

IP Address:
{ip}

次に[Reply-To and Recipient Settings]ボタンをクリックして設定しましょう。私は次のように設定しました。

Sender Name: Name
Sender E-mail: noreply@jotform.com
Reply-to Email: E-mail

'Reply-To and Recipient Settings'設定画面

編集を終えたら[Finish]ボタンをクリックします。

日本語翻訳(日英の切り替えが可能に)

[Language]をクリックすると多言語対応のためのダイアログが開きます。

画面上部ツールバーの[Setup & Embed] > [Language]をクリックするとポップアップ・ダイアログが開きます。[+ Add New]をクリックして、'Japanese'を選択します。次に、[Japanese]をクリックして、'Set Default'とします。これによって、ユーザーがお問い合わせフォームを開いた時、最初に日本語で表示されるようにします。

日本語をデフォルトの言語に設定します。

'Edit'をクリックすると、'Edit Translation'というダイアログが開きますので、一つ一つの項目を翻訳していきます。

各項目を一つ一つ翻訳していきます。警告メッセージも翻訳することが出来ます。

私がとりあえず翻訳したものを下に例として掲載しておきます。英語の知識の無さは元より、'Form Warnings'は、どのような状況でどのように表示されるかがわからないので、結構いい加減なものです。しかし、今回作成するような簡素なお問い合わせフォームにおいては大丈夫だと思います。「ここの翻訳はおかしいよ」というところを修正・報告していただければ幸いです。

フィールドのラベルの英日翻訳例

Name - お名前
E-mail - Eメール
Subject - 件名
Message - メッセージ
Verification - 認証
Submit - 送信

Form Warningsの英日翻訳例

This field can only contain letters
このフィールドには文字だけを入力可能です。

This field can only contain letters and numbers.
このフィールドには文字と数字だけを入力可能です。

Are you sure you want to clear the form?
本当にフォームをクリアしますか?

E-mail does not match
Eメールアドレスが一致しません。

Enter a valid e-mail address
有効なEメールアドレスを入力してください。

There are errors on the form. Please fix them before continuing.
フォームにエラーがあります。次へ進む前に訂正してください。

There are errors on this page. Please fix them before continuing.
現在のページにはエラーがあります。次へ進む前に訂正してください。

Score total should only be less than or equal to
最大スコア合計:

There are incomplete required fields. Please complete them.
未入力の必須フィールドがあります。入力してください。

Input should not be less than the minimum value:
入力可能な最小値:

Input should not be greater than the maximum value:
入力可能な最大値:

Your score should be less than or equal to
あなたの最大スコア:

The maximum digits allowed is
最大桁数:

The maximum number of selections allowed is
選択可能な最大数:

The minimum required number of selections is
必須の最小選択数:

{file} is empty, please select files again without it.
{file} は空です。別のファイルを再度選択してください。

{file} is too small, minimum file size is {minSizeLimit}.
{file} はサイズが小さすぎます。最小ファイルサイズは {minSizeLimit} です。

The files are being uploaded, if you leave now the upload will be cancelled.
ファイルをアップロードしています。今ページを遷移するとアップロードがキャンセルされます。

{file} is too large, maximum file size is {sizeLimit}.
{file} はサイズが大きすぎます。最大ファイルサイズは {sizeLimit} です。

{file} has invalid extension. Only {extensions} are allowed.
{file} は許可されていない拡張子を持っています。 {extensions} だけが許可されています。

This field can only contain numeric values
このフィールドには数字だけが入力可能です。

Date must not be in the past.
過去の日付を入力してください。

Please Wait...
お待ちください...

This field is required.
このフィールドは必須です。

Every row is required.
全ての行への入力が必要です。

At least one field required.
少なくとも一つのフィールドへの入力が必要です。

Sorry! Only one entry is allowed. Multiple submissions are disabled for this form.
申し訳ございません。入力は一回のみ可能です。このフォームでは複数回の送信はできません。

You can only upload following files:
アップロード可能なファイル:

File size cannot be bigger than:
最大ファイルサイズ:

'Thank You'メッセージの編集

ユーザーがメッセージを送信するとデフォルトでは'Thank You'と大きなメッセージが表示されます。そのメッセージを変更するには、画面上部ツールバーの[Setup & Embed] > [Thank You]をクリックして、'Thank You message'を選択して[Next]ボタンをクリックし、編集します。

自分のサイトに設置

画面上部のツールバーの[Setup & Embed] > [Embed Form]をクリックするとポップアップ・ダイアログが開きます。

そこに下記のようなコードがありますのでコピーして、ご自身のサイトのフォームを表示したい箇所に貼り付けてください。

<script type="text/javascript" src="https://secure.jotform.co/jsform/**************"></script>

ここで注意が必要なのですが、無料メンバーがSSL(https)で暗号化されたフォームを受け取れるのは月に10通までです。SSLでなければ月に100通まで受け取れるので、下記のコードに書き換えて貼り付けると良いでしょう。

<script type="text/javascript" src="http://form.jotform.co/jsform/**************"></script>

JotFormの管理画面に'https'ではなく'http'でアクセスすると、後者のコードが生成されるのですが、相違点は'https://secure'と'http://form'の部分だけですので、書き換えることも簡単です。

0 件のコメント:

コメントを投稿