カスタムコードデザインStudio

【保存版】離脱率を下げる！ステップフォーム実装解説｜Studio標準フォーム対応

離脱を防ぐUX改善フォームを『Studio』だけで実現。標準フォームを活かして、入力チェック・確認画面・送信まで完結する3ステップフォームの作り方を徹底解説！現場でそのまま使えるコード付きで制作効率もUP🚀

公開 2025年11月5日更新 2025年12月30日読了目安約9分

「入力欄が多くて離脱が多い…」そんな時に効くのが「ステップフォーム」。画面を分けて少しずつ入力してもらうだけで、完走率がぐっと上がります。本記事ではノーコードWeb制作ツール『Studio』で、標準フォーム×カスタムコードだけで作る実用的なステップフォームを解説します。初心者でもOK、コピペで動きます👌

本実装はStudioの有料プランの加入が必要です。

全体像と完成イメージ

Step1：最初の必要最低限の質問（例：お名前）
Step2：詳細入力（例：性別・メール・電話・お問い合わせ）※今回の記事では性別のみを実装して紹介しています
Step3：確認 → 送信

バリデーション（入力チェック）で空欄や形式ミスをブロックし、確認画面には入力値を差し込んで表示します。実際のステップフォームのデモはこちらから動きを確認してください。

1.フォームのベース準備 🧱

ステップフォームのベースとなるフォームの枠を以下の手順で作成します。

新規ページ追加（ページ通常）　ステップフォームを設置するページを作成してください。

Studioデザインエディタで新規ページを追加しているスクリーンショット
追加 → 基本 → フォーム（下記のいずれか）をページに配置　どのフォームを選択しても中の要素はすべて削除するので、ここではどのフォームを選択して配置しても問題ありません。

フォームパーツの選択肢（Form1/Form2/Form3）
フォーム本体を選択し、横幅：100%　縦幅：autoに設定　配置したフォーム全体を選択した状態で、フォームのサイズを整えます。

フォーム本体のボックス設定パネル（幅100%・高さauto）
フォーム送信後のページ（サンクスページ）を設定（任意）　フォーム送信後に表示するページがあれば、ここで設定しておきましょう。

フォームの基本設定パネルの画像

ここまでの手順でフォームのベース（枠）は完成です。

ステップ画面（BOX）の準備 🏃‍♂️‍➡️

上記の手順で作成したフォームのベースの中に、以下の手順でユーザー入力をさせる各ステップとなるボックスを配置します。

フォームの中にBOXをステップ数だけ追加（例：3つ）※実際のステップの数にあわせてボックスを配置してください。今回の実装手順ではステップは3つなので、Boxを3つ配置します。

Studioエディタで3つのBoxをフォーム内に配置した状態
フォーム内のBOX以外のパーツは削除　フォームの中に含まれいてるデフォルトパーツはすべて削除してください。

デフォルトのフォームパーツを削除する手順
それぞれのBoxにIDを付与　配置されているBoxにリンク先となるIDを設定します。step1, step2, step3

3つのBoxにstep1/step2/step3のIDを設定した状態
各BOXのサイズを横100%／縦100vhに設定（全画面切り替えが簡単）（重要）各ステップがそれぞれ全画面で切り替え表示されるようにサイズを固定します。

ここまでの手順でステップフォームのベースの完成です。

ステップフォームのパーツ作成とデザイン設定 ✍️

各ステップ画面に必要なフォームパーツを配置します。フォームのデザインやボタンのデザインは自由に行ってください。ただし、入力フィールドには以下のIDを付けるようにしてください。

名前：input-name
性別：gender
メール：input-email
電話：input-tel
お問い合わせ：input-message

1.「step1」のフォーム作成

フォームパーツ「input」を配置（名前入力）・ID：input-name
「Box」を配置し「次へボタン」を作成・ID：btn-next-1・リンク先に「step2」を設定

2.「step2」のフォーム作成

フォームパーツ「Radio」を配置（性別選択）・ID：gender
「Box」を配置し「次へボタン」を作成・ID：btn-next-2・リンク先に「step3」を設定
「Box」を配置し「戻るボタン」を作成・ID：btn-back-2・リンク先に「step1」を設定

3.「step3」のフォーム作成

「Text」を配置し「名前確認」を作成・ID：confirm-name
「Text」を配置し「性別確認」を作成・ID：confirm-gender
「Box」を配置し「戻るボタン」を作成・ID：btn-back-3・リンク先に「step2」を設定
フォームパーツ「Button」を配置（送信ボタン）・ID：btn-submit

4.フォーム全体の表示を整えます

現状、ステップ1〜3の全てのセクションがデザインエディタで縦に表示されている状態です。ステップ毎に表示がされるよう、以下の通りにフォームのベースサイズと並びを変更してください。

縦幅：100vh
はみ出し表示：非表示
表示：左寄せ・中央揃え
表示の並び：右

ページに追加する完成コード（コピペOK）💡

最後の手順として、ページ設定 → カスタムコード（body内の末尾）に以下をそのまま貼り付けます。※IDは上記と一致させてください。

<script>
(function(){
  'use strict';
  var $=function(id){return document.getElementById(id);};

  function valName(){var el=$('input-name');var v=(el&&el.value||'').trim();if(!v){alert('お名前を入力してください');el?.focus();return false;}return true;}
  function valGender(){var g=document.querySelector('input[name="gender"]:checked');if(!g){alert('性別を選択してください');document.querySelector('input[name="gender"]')?.focus();return false;}return true;}
  function valEmail(){var el=$('input-email');if(!el)return true;var v=(el.value||'').trim();if(!v){alert('メールアドレスを入力してください');el.focus();return false;}var ok=/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);if(!ok){alert('メールアドレスの形式が正しくありません');el.focus();return false;}return true;}
  function valTel(){var el=$('input-tel');if(!el)return true;var v=(el.value||'').trim();if(!v){alert('電話番号を入力してください');el.focus();return false;}var ok=/^[0-9+\-\s()]{7,20}$/.test(v);if(!ok){alert('電話番号の形式が正しくありません');el.focus();return false;}return true;}
  function valMessage(){var el=$('input-message');if(!el)return true;var v=(el.value||'').trim();if(!v){alert('お問い合わせ内容を入力してください');el.focus();return false;}return true;}

  function validateStep1(){return valName();}
  function validateStep2(){return valName() && valGender() && valEmail() && valTel() && valMessage();}

  function fill(){
    var g=document.querySelector('input[name="gender"]:checked');
    var vName=($('input-name')&&$('input-name').value||'').trim();
    var vGender=g?(g.value||'').trim():'';
    var vEmail=($('input-email')&&$('input-email').value||'').trim();
    var vTel=($('input-tel')&&$('input-tel').value||'').trim();
    var vMsg=($('input-message')&&$('input-message').value||'').trim();

    var cn=$('confirm-name');     if(cn) cn.textContent=vName;
    var cg=$('confirm-gender');   if(cg) cg.textContent=vGender;
    var ce=$('confirm-email');    if(ce) ce.textContent=vEmail;
    var ct=$('confirm-tel');      if(ct) ct.textContent=vTel;
    var cm=$('confirm-message');  if(cm) cm.textContent=vMsg;
  }

  function observeStep3(){
    var s3=$('step3'); if(!s3){ fill(); return; }
    var ob=new MutationObserver(function(list){
      for(var i=0;i<list.length;i++){
        if(list[i].attributeName==='hidden' && !s3.hasAttribute('hidden')){ fill(); }
      }
    });
    ob.observe(s3,{attributes:true,attributeFilter:['hidden']});
  }

  function preventEnterProgress(ev){
    if(ev.key!=='Enter') return;
    var t=ev.target;
    if(t && (t.tagName==='TEXTAREA' || t.isContentEditable)) return; // 改行は許可
    var s1=$('step1'), s2=$('step2'), s3=$('step3');
    var inSteps=(s1&&s1.contains(t))||(s2&&s2.contains(t))||(s3&&s3.contains(t));
    if(inSteps){
      ev.preventDefault();
      ev.stopPropagation();
      if(ev.stopImmediatePropagation) ev.stopImmediatePropagation();
    }
  }

  function bind(){
    // Enterの既定動作を全面ブロック（キャプチャ段階・複数イベント）
    window.addEventListener('keydown',  preventEnterProgress, true);
    window.addEventListener('keypress', preventEnterProgress, true);
    window.addEventListener('keyup',    preventEnterProgress, true);

    var next1=$('btn-next-1');
    if(next1){
      next1.addEventListener('click',function(e){
        if(!validateStep1()){ e.preventDefault(); e.stopPropagation(); return false; }
      },true);
    }

    var next2=$('btn-next-2');
    if(next2){
      next2.addEventListener('click',function(e){
        if(!validateStep2()){ e.preventDefault(); e.stopPropagation(); return false; }
        fill();
      },true);
    }

    observeStep3();
    fill();
  }

  if(document.readyState==='complete'||document.readyState==='interactive'){bind();}
  else{window.addEventListener('load',bind);document.addEventListener('DOMContentLoaded',bind);}
})();
</script>

ページを公開して、実際の動きを確認してみましょう。※ライブプレビューでは動きません。必ず本番環境で動作検証を行なってください。

うまくいかない時のチェックリスト 🔍

step1 / step2 / step3 のIDが正しい
入力フィールドのIDがコードと一致
「次へ」ボタンにbtn-next-1 / btn-next-2が付与されている
Step3の確認表示要素にconfirm-*のIDが設定済み
フォームのベースは横幅：100%／縦幅：100vh、各ステップBOXも横幅：100%／縦幅：100vh
カスタムコードはページ設定に貼っている（EMBED内ではなく）

まとめ 🚀

『Studio』の標準フォームに少しのID設計＋カスタムコードを添えるだけで、実用レベルのステップフォームが完成します。入力負荷を減らし、完走率と送信品質を両立しましょう。