Benchmark Email サポートセンター

AIサポートチャット(β版)をお試しください。

AIに質問する

サポートページ aero-right 埋込型フォームの編集方法は?

埋込型フォームの編集方法は?

登録フォーム 更新日 8月 16, 2023

動画:登録フォームの項目とデザインのカスタマイズ

ここでは、埋込型フォームのサイズ変更、入力項目を横並びに配置する方法、およびフォームの自由記述欄入力文字数についてご説明します。

目次:

埋込型フォームのサイズを変更する方法

全体のサイズは変更できませんが、横幅を変更することは可能です。下記の手順に従ってください。

1.  左のダッシュボードメニューよりコンタクトリストをクリックし、登録フォームを選択

2.登録フォーム作成」ボタンをクリックし、埋込型フォームを選択後、「次へ」ボタンをクリック

3. ステップ1で詳細を入力後、ステップ2デザインで、画面左の「標準設定」をクリック

4.幅変更」のボタンを右にスライドし、ONにします。

5.横幅」に任意の数字を入力して横幅を変更してください。

6. 変更後、右上の「保存&出力」ボタンをクリックし、HTMLコードをホームページへアップロードします。(古いコードがある場合は、一度コードを完全に削除した後にアップロードしてください。)

注意点:

  • 「幅変更」ボタンをONにした場合、デフォルトで横幅は400px、最大画像領域は320pxに設定されています。登録フォームの横幅を320px以下に変更すると、自動的に画像サイズはフォームのサイズに合うように調整されます。
  • 「幅変更」ボタンをOFFにした場合、設置場所に対して100%の幅(利用可能な領域いっぱい)で表示されます。
  • デスクトップ上の最大表示横幅は999pxです。
  • モバイルデバイスでフォームを開いた場合は、自動で画面サイズに合わせて表示されます。
  • 変更が適用されない場合は、ブラウザのキャッシュが削除されているかご確認ください。

入力項目を編集する方法

埋込型フォーム(多項目)で表示する項目を追加・削除したり、項目に関するテキストを編集する方法を説明します。

1.埋込型フォーム(多項目)を選び、登録フォームを作成します

2.登録フォームの左側にカーソルを置くと緑色の縦の三点リーダ・・・が表示されるので、そこをクリック

3.表示された「フォーム項目」下部の「項目追加」をクリック

4.必要な項目にチェックを入れます

これらの項目は項目名や回答の種類を任意に編集できます。

項目の順番を変更する方法

1. 登録フォームを開き、項目の左にカーソルを合わせます。

2. 灰色の線が表示されますので、クリックすると線が緑色に変わり、項目が表示されます。

3. ここで「姓」の項目を追加する場合は、表示設定のスライドバーを右(青色)にします。(必須項目にチェックを入れると、項目名の右上にアスタリスク*が付きます。)

4. 項目名の左の矢印()をクリックします。

5. 項目名の左に表示される緑の縦三点をドラッグ&ドロップして任意の順番に変更します。

登録フォームの自由記述欄に入力できる文字数に制限はありますか?

登録フォームの文字数制限については以下のFAQをご参照ください。

FAQ:登録フォームから登録する場合の文字数制限について

入力項目を横並びに配置する方法

埋込型フォームでは、「名」、「姓」、「メールアドレス」の3つまで項目設定が可能です。初期設定の項目は、「名」と「メールアドレス」です。

入力項目を横並びに配置する際は、項目を2つにすることをお勧めしております。ウェブサイトのデザイン上、項目が3つ必要な場合は「姓」の項目を追加してください。

項目の順番を変更する方法はこちらをクリックしてください。

まず、登録フォーム画面を開きます。

ダッシュボードメニューより、コンタクトリストをクリック>登録フォームを選択します。

埋込型フォームを一から作成、または作成済みの埋込型フォームを開きます。

1. 登録フォームの作成が完了しましたら、「保存&出力」ボタンをクリック

2. フォーム出力のポップアップ画面で「次へ」ボタンをクリック

3. 以下の登録フォームコード画面で、ドロップダウンメニューよりRaw HTMLコードを選択します。

4. 右下の「コピー」ボタンをクリックし、全てのコードをコピーします。

5. 右上の閉じるボタン(×)をクリックし、ポップアップ画面を閉じます。画面左上のBenchmark Emailロゴをクリックしてホームに戻ります。

次にHTMLコードエディタを開きます。こちらのステップは任意です。テキストファイルや他のサービスを使用することもできます。

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ビルダーのご使用は、あくまでもレイアウトを確認するためのものです。メール内に登録フォームを入れることはできません。

ご不明な点がございましたらこちらよりサポートへご連絡下さいませ。

>>「登録フォーム」のまとめページに戻る

Benchmarkから業界トレンド&最新情報をお届けします

ご登録頂きありがとうございます!

登録を完了させるには、認証メールのご確認をお願いします。