このツールでは、クリック操作と簡単な入力だけでお問い合わせフォームを作ることができます。

  • 自動生成されるHTMLコードを御社のホームページに貼り付けするだけでフォーム設置が完了します
  • メールサーバーの設定など難しい作業は不要です
  • 御社へのお問い合わせ内容およびお客様の個人情報はLisketには保存されません

簡単設定でフォームを作る

Step1. 新規作成

フォームを新規作成します。

image

「フォーム名」「完了ページのURL」を入力して保存します。

image

送信先メールアドレス

誤送信やなりすまし防止のためメールアドレスを変更する場合は認証が必要です。入力したメールアドレス宛に認証コードが送信されますので手続きを行ってください。

完了ページのURL

お客様が「送信」ボタンを押した直後に表示されるページです。御社のホームページに「お問い合わせが完了しました」などのページをご用意ください。

Step2. HTMLコードのコピー

しばらく待つとHTMLコードが表示されますのでコピーしてください。

image

Step3. HTMLコードの貼り付け

御社のホームページのHTMLコードに、コピーしたHTMLコードを貼り付けます。

image

  • お使いのホームページ編集ソフトでコード編集モードにする必要があります
  • 貼り付ける場所は<body>から</body>の間です
  • ホームページの編集に関する技術的な問題はLisketサポート範囲外となります

完了

このようなフォームが設置されます。

image

問い合わせをする

テストで1件問い合わせをしてみましょう。

Step1. 問い合わせをしてみる

「お名前」「メールアドレス」「ご質問内容」を入力し送信ボタンをクリックします。

image

完了ページのURLで指定したページが表示されます。

image

Step2. メールが届く

送信先メールアドレスにメールが届くことをご確認ください。

送信元:送信先メールアドレスと同じもの
件名:お問い合わせがありました
本文:
下のお客様からお問い合わせがありました。

お名前: 山田 太郎
---------------------------------------------------------------------
メールアドレス: test@xxx.com
---------------------------------------------------------------------
電話番号:
---------------------------------------------------------------------
ご質問内容:
テストメール送信
---------------------------------------------------------------------

完了

これでテスト完了です。テストメールを削除してお問い合わせフォームをご利用ください。

コンバージョンタグを埋め込む

フォームの送信完了画面に、Yahoo!プロモーション広告やGoogle AdWords、その他サービスのコンバージョンタグを埋め込むことができます。

各種サービスのコンバージョンタグの取得方法等はLisketのサポート範囲外となりますので、各サービスの窓口にお問い合わせください。

再編集

ツールの画面を開いて「設定変更」をクリックします。

image

「CVタグ」のタブを開いてコンバージョンタグを貼り付けします。

image

画面右下の「CVタグ設定を保存」ボタンで保存します。

image

タグが作動するのは送信ボタンを押してから完了ページが表示されるまでの間です。コンバージョンがうまく計測されない場合は作動時間を調整してください。

image

保存したフォームを再編集する

再編集

ツールの画面を開くと、保存したフォームを再編集することができます。

image

基本設定を変更する

image

フォーム名

フォームをいくつも保存した時に識別する名前です。

送信先メールアドレス

通知メール(御社宛てに送信される「問い合わせがありました」メール)の送信先です。

差出人メールアドレス

フォームから送信されるメールの差出人(From)欄に表示されるメールアドレスです。

通知メールのタイトル

通知メールのタイトルを変更できます。空欄の場合は「お問い合わせがありました」というタイトルになります。

差出人名

フォームから送信されるメールの差出人(From)欄に表示される名前です。

自動返信メール

お客様に「お問い合わせありがとうございました」メールを自動返信するかどうを設定できます。

通知メールの差出人

通知メールの差出人情報を変更できます。ユーザーの情報を使うにチェックをつけると、先に設定した差出人メールアドレス差出人名の代わりに、お客様がフォームに入力した内容が使用されます。

完了ページのURL

問い合わせ後に表示する「お問い合わせが完了しました」など記載されたページです。ページは御社のホームページ上にご用意ください。

エラーページのURL

問い合わせに失敗した場合にお客様に表示されるページです。ページは御社のホームページ上にご用意ください。空欄にした場合、失敗時にはエラーメッセージだけの簡素な画面が表示されます。

保存

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

image

設定を変更した場合でも、HTMLコードの貼り替えは必要ありません。

保存したフォームの項目を増やす

再編集

ツールの画面を開いて「設定変更」をクリックします。

image

追加

「項目を追加」でどの項目を追加するか選びます。

image

追加できる項目は5種類です。

image
image

保存

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

image

項目の追加・削除をした場合でも、HTMLコードの貼り替えは必要ありません。

保存したフォームの見た目を変更する

フォームの見た目はCSSを使って自由に編集することができます。

この操作はHTML,CSSに知識のある方を前提としています。
HTML,CSSの技術的な問題はLisketのサポート範囲外となりますのでご注意ください。
また将来的にLisketで出力タグの変更があった場合はCSSを書き換える必要がありますので、ご了承の元で編集をお願いいたします。

CSSのコピー

フォームを設置したページを編集します。お使いのホームページ編集ソフトでコード編集モードにしてください。

まず<style>から</style>までコピーします。

image

</style>の下にペーストします。(/* */はコメントですので削除してもかまいません。)

image

CSSの編集

ペーストした部分のCSSを編集します。

例:

<style type="text/css">
    .lisket-form-maker-form { width: 700px; }
    .lisket-form-maker-form td { font-size:10pt;border:none;border:solid 7px #fff; }
    .lisket-form-maker-form th { text-align:left !important;border:solid 7px #fff;background-color:#666; }
    .lisket-form-maker-form label { font-weight:normal;font-size:10pt;color:#fff; }
    .lisket-form-maker-form span:not(.example) { font-weight:normal;background-color:#333;padding:4px;color:#5BC0DE !important; }
    .lisket-form-maker-form span.example { color:#A8D2DF;font-size:10pt; }
    .lisket-form-maker-form table tr:last-child { background-color: #999; }
    .lisket-form-maker-form table tr:last-child input { width:100px;margin:5px;font-size:12pt; }
</style>

上記の例では以下のような見た目になります。

image

保存

お使いのホームページ編集ソフトで保存してください。

HTMLコードを消してしまった

HTMLコードは何度でもコピーが可能です。ツールの画面から再度コピーしてください。

再編集の画面を開く

ツールの画面を開いて「設定変更」をクリックします。

image

「フォームコード」を開いてHTMLコードをコピーします。

image

再度ホームページに貼り付ければ完了です。

image