エフトラEFO

操作マニュアル

送信ボタンデザインの設定

エフトラEFO初期設定の入力支援機能「送信ボタンデザイン」の設定方法です

1送信ボタンデザインについて

送信ボタンデザイン機能とは、フォームの送信ボタンのデザインを変更する機能です。

詳しくは送信ボタンデザインをご覧ください。

なお本機能はサブミットブロックとの併用も可能です。 その場合、未入力/エラー項目がある場合は「サブミットブロック画像」、未入力/エラー項目がない場合は「送信ボタンデザイン」が表示されます。

2送信ボタンデザイン設定ページへのアクセス

入力支援機能の選択に続いて表示されます。

またはダッシュボード内の、「入力支援機能」欄の「送信ボタンデザイン」ボタンからもアクセスすることが可能です。

ダッシュボードの「入力支援機能」欄の「送信ボタンデザイン」ボタン

▲ダッシュボードの「入力支援機能」欄の「送信ボタンデザイン」ボタン

入力支援機能の選択時に機能を選択していないと、設定画面へのリンクも表示されませんのでご注意下さい。

下記の画面が表示されます。

送信ボタンデザインの設定画面

2送信ボタンデザインの設定

各種設定項目にご記入ください。

送信ボタンデザインの設定 各メニュー

各項目について

1対象のボタン どのボタンのデザインを変更するかを指定します。まずは指定方法を下記の3種類よりお選びください。
  • id属性: 送信ボタンにid属性が割り振られている場合、利用できます
  • class属性: 送信ボタンにclass属性が割り振られている場合、利用できます
  • jQueryのセレクター: 送信ボタンにidやclassの属性がない場合には、jQueryのセレクター方式で指定いただけます
次に、上記で選択したボタンの指定方法に応じた属性値またはセレクターをご記入ください。
2デザイン ボタンのデザインは下記の2通りの方法で変更できます。まずはいずれかの変更方法をお選びください。
  • 3画像で用意: プリセットの登録画像、またはお手持ちの画像をボタンとして登録できます。
  • 4文言を自由に設定: ブラウザの描画(CSS)によってデザインを変更します。
対象のボタンのHTMLによっては、いずれかの方法が使えない場合がございます。詳しくは補足1をご覧ください
3画像で用意 「画像で用意」選択時には下記の設定画面が表示されます。 画像で用意 設定画面
まずは下記の3種類いずれかの方法で画像を登録してください。
  • 登録画像から選択: プリセットの画像(4色×4サイズ×文言5種類)よりお好きな画像をお選びください。
  • 画像をアップロード: お手持ちの画像ファイルをアップロードください。通常時とマウスオーバー時の2種類の画像を登録ください。
  • 画像をURLで指定: WEB上にアップロードされた画像をURLで登録できます。通常時とマウスオーバー時の2種類の画像を登録ください。
次に、ボタンの表示サイズを指定ください。表示サイズを指定しない場合、画像そのものの表示サイズで表示されます。(但し「!important」等を利用したCSS設定がある場合はそちらが優先されます)
4文言を自由に設定 「文言を自由に設定」選択時には下記の設定画面が表示されます。 文言を自由に設定 設定画面
下記のメニューを用いてボタンのデザインを変更してください。
  • 枠線の色: ボタンの枠線の色を指定できます。
  • 背景色: 通常時とマウスオーバー時のボタンの色を指定できます。
  • テキスト: ボタンのテキストと、文字のレイアウト、スタイル、サイズ、色を指定できます。

補足1: ボタンデザイン変更方法について

指定した「対象のボタン」が次のような場合、送信ボタンデザインの処理は実施されません。設定方法にご注意ください。

  • 画像タグ(imgまたはinput[type=image])の場合
    • デザインに「文言を自由に設定」を利用して設定を行うことはできません。
  • input[type=button]、input[type=submit]の場合
    • デザインに「画像で用意」を利用して設定を行うことはできません。

上記のような場合は、対象のボタン要素の1つ上の要素(divタグ、pタグなど)を指定するようにしてください。

この場合もとのボタンは非表示となりますので、もとのボタンの「onclick」要素等に付与しているJavaScriptの処理は実行されなくなりますのでご注意ください。

4送信ボタンデザイン設定の保存

設定が完了したら、「保存して次の機能へ」を押下し保存、次の機能の設定に移ります。

「保存して次へ」ボタン

他機能の詳しい設定方法については、下記よりご覧ください。

ガイドナビゲーション設定に進む
サブミットブロック設定に進む
離脱ブロック設定に進む
住所自動入力に進む
ふりがな自動入力に進む
初期項目フォーカスに進む
入力モード自動変換に進む
半角・全角自動変換に進む
リアルタイムアラートに進む
入力形式事前指示に進む
入力成功サインに進む
エラー時背景色設定に進む
入力時背景色設定に進む
初期表示文言設定に進む
メアドサジェストに進む
スマホキーボード変換に進む
Facebook自動入力に進む
Yahoo!自動入力に進む

すべての入力支援機能の設定を終えたら

フォームに2ページ目以降の入力画面が存在する場合は、下記を参照のうえ2ページ目以降の設定に進んで下さい。

2ページ目以降の設定

2ページ目の入力画面が存在しない、またはすべての入力ページの入力支援機能の設定を終えた場合は、本番反映/タグ貼り付けのステップにお進みください。

本番反映/タグ貼り付け

お問合せ

お困りのことや不明点など、サポート事務局までお気軽にご相談ください。
お電話、チャット、メールの3つの方法でお問い合わせいただけます。

  • お電話

    平日10:00~18:00

    03-6272-8993

    ※担当者不在の場合、折り返しのご連絡となります
  • メール

    24時間受付中

    お問合せフォーム ※営業時間外のお問合せは翌営業日の確認となります