サポートページ 埋込型フォームの編集方法は?
動画:登録フォームの項目とデザインのカスタマイズ
ここでは、埋込型フォームのサイズ変更、入力項目を横並びに配置する方法、およびフォームの自由記述欄入力文字数についてご説明します。
目次:
全体のサイズは変更できませんが、横幅を変更することは可能です。下記の手順に従ってください。
1. 左のダッシュボードメニューよりコンタクトリストをクリックし、登録フォームを選択
2. 「登録フォーム作成」ボタンをクリックし、埋込型フォームを選択後、「次へ」ボタンをクリック
3. ステップ1で詳細を入力後、ステップ2デザインで、画面左の「標準設定」をクリック
4. 「幅変更」のボタンを右にスライドし、ONにします。
5. 「横幅」に任意の数字を入力して横幅を変更してください。
6. 変更後、右上の「保存&出力」ボタンをクリックし、HTMLコードをホームページへアップロードします。(古いコードがある場合は、一度コードを完全に削除した後にアップロードしてください。)
注意点:
埋込型フォーム(多項目)で表示する項目を追加・削除したり、項目に関するテキストを編集する方法を説明します。
1.埋込型フォーム(多項目)を選び、登録フォームを作成します
2.登録フォームの左側にカーソルを置くと緑色の縦の三点リーダ・・・が表示されるので、そこをクリック
3.表示された「フォーム項目」下部の「項目追加」をクリック
4.必要な項目にチェックを入れます
これらの項目は項目名や回答の種類を任意に編集できます。
1. 登録フォームを開き、項目の左にカーソルを合わせます。
2. 灰色の線が表示されますので、クリックすると線が緑色に変わり、項目が表示されます。
3. ここで「姓」の項目を追加する場合は、表示設定のスライドバーを右(青色)にします。(必須項目にチェックを入れると、項目名の右上にアスタリスク*が付きます。)
4. 項目名の左の矢印(<)をクリックします。
5. 項目名の左に表示される緑の縦三点をドラッグ&ドロップして任意の順番に変更します。
登録フォームの文字数制限については以下のFAQをご参照ください。
埋込型フォームでは、「名」、「姓」、「メールアドレス」の3つまで項目設定が可能です。初期設定の項目は、「名」と「メールアドレス」です。
入力項目を横並びに配置する際は、項目を2つにすることをお勧めしております。ウェブサイトのデザイン上、項目が3つ必要な場合は「姓」の項目を追加してください。
項目の順番を変更する方法はこちらをクリックしてください。
ダッシュボードメニューより、コンタクトリストをクリック>登録フォームを選択します。
埋込型フォームを一から作成、または作成済みの埋込型フォームを開きます。
1. 登録フォームの作成が完了しましたら、「保存&出力」ボタンをクリック
2. フォーム出力のポップアップ画面で「次へ」ボタンをクリック
3. 以下の登録フォームコード画面で、ドロップダウンメニューよりRaw HTMLコードを選択します。
4. 右下の「コピー」ボタンをクリックし、全てのコードをコピーします。
5. 右上の閉じるボタン(×)をクリックし、ポップアップ画面を閉じます。画面左上のBenchmark Emailロゴをクリックしてホームに戻ります。
1. 左のダッシュボードメニューより、メール>メールを選択
2. 「メール作成」ボタンをクリックし、メールの種類は通常メール配信を選択します。
3. エディター選択で、HTMLコードを選択し「次へ」ボタンをクリック
4. メール名を入力します。
注意:この手順は登録フォームのレイアウトを確認するためのものですので、実際に配信することはありません。ご確認後は、こちらのメールを削除することをお勧めします。
5. チェックリストを全て入力する必要はありませんので、直接本文&デザインの「メール編集」ボタンをクリックします。
6. 画面左に表示される初期設定のテキストをハイライトし、埋込型フォームからコピーしたコードを貼り付けます。
以下のフッターは、最後にコードをコピーした際は表示されませんのでご安心ください。
7. キーボードのショートカットキーを使って、以下のfieldsetタグを検索します。Windowsの場合は Ctrl + F で、Macの場合は ⌘(command) + F で検索します。
<fieldset class=”formbox-field
<fieldset class=”formbox-field とは、フォームの入力項目ボックスのタグです。
上記左の青いボックス内のタグは、右側に表示される登録フォームの項目の「名」、桃色のボックス内のタグは「メールアドレス」を指します。
それでは、タグを編集をしていきましょう。
8. <fieldset の前に、以下のタグを追加します。(以下をコピー&ペーストして追加も可能)
<table><tr><td>
9. 入力が完了しましたら、終了タグを挿入します。 </fieldset>を探して、その後ろに以下の終了タグを追加します。
</td>
10. 次の項目の<fieldset の前に以下のタグを追加します。
<td>
項目が3つある場合は、最後の項目のタグ<fieldset の前に<td>を追加して、</fieldset>の後ろに</td>を追加してください。
11. 各項目にタグを追加しましたら、以下のタグを最後の</fieldset> の後ろに挿入してください。
</td></tr></table>
これで、入力項目が横並びに配置されるようになりました。
12. 最後に、横幅を削除します。再度、検索ショートカットキーを使って width: 320px; を検索し、削除します。他のコードを誤って削除しないように気をつけてください。
width: 320px;
全ての手順完了後は、以下のようにコードが表示されます。追加したタグは水色でハイライトしています。
入力項目を横並びに配置したフォームの完成ですが、必ず全てのコードをコピーしてウェブサイトに貼り付けてください。
ご注意:上記のHTMLビルダーのご使用は、あくまでもレイアウトを確認するためのものです。メール内に登録フォームを入れることはできません。
ご不明な点がございましたらこちらよりサポートへご連絡下さいませ。
登録を完了させるには、認証メールのご確認をお願いします。