フォームの確認画面をコピペコードで作る方法【elementor pro】

ちょこっとコード

2026-02-10

前田あゆみ

普段あなたが何かのサイトでフォームを入力したら、入力内容を確認する画面が出ることがよくありますよね？

elementor proのフォームウィジットで作成する際、この確認画面を実装するには一工夫必要です！

少しコードを入れますが、コピペ＋書き換えでできるので、作ってみましょう〜！

フォームを作成

詳細は省きますが、このような感じでelementor proのフォームウィジットを使い、CSSを追加してスタイルを整えて、簡単にフォームを作ってみました。

必須・ラジオボタンなどのスタイルを整えるCSSはこちらの記事で解説しています！

Stepを追加

項目を追加して、タイプを「Step」に設定します。

そうすると、上部に別のStepが自動で追加されています！

下記画像のように、上部のStepのラベルは「入力」、下部のStepのラベルは「確認」としておきます。

そうするとフォームウィジット内の項目が
入力 → お名前等 … → 確認
の順で表示されているかと思います。

下部のボタンが英語なので、次はここを直しましょう！

フォームウィジットのコンテンツ > Buttons > Step Buttons で文言を変更します。

これで、フォーム項目を入力して「確認画面へ進む」を押したら次の画面に進む準備が整いました！

コードで確認画面を整える

ここからゴリゴリにコードを使って確認画面を作り込んでいきます！

コピペ＋書き換えでできますので、やってみましょう！

HTMLを追加

フォームに新しい項目を追加し、タイプをHTMLにします。

そしてHTMLの欄に、以下のコードの中身をフォームの項目に合わせて書き換えてペーストします。
※ちなみにHTMLの書き換えの時は、サイドバーの幅を広げて、HTML欄の高さを広げると編集しやすいですよ！

HTML

<div class="text"><p>ご入力内容にお間違いがないか、ご確認ください。</p></div>
<div class="confirm-table">
  <dl>
    <div class="row">
      <dt>お名前</dt>
      <dd data-field="name"></dd>
    </div>
    <div class="row">
      <dt>メールアドレス</dt>
      <dd data-field="email"></dd>
    </div>
    <div class="row">
      <dt>お問い合わせ項目</dt>
      <dd data-field="genre"></dd>
    </div>
    <div class="row">
      <dt>お問い合わせ内容</dt>
      <dd data-field="message"></dd>
    </div>
  </dl>
</div>

<div class="text"><p>ご入力内容にお間違いがないか、ご確認ください。</p></div>
<div class="confirm-table">
  <dl>
    <div class="row">
      <dt>お名前</dt>
      <dd data-field="name"></dd>
    </div>
    <div class="row">
      <dt>メールアドレス</dt>
      <dd data-field="email"></dd>
    </div>
    <div class="row">
      <dt>お問い合わせ項目</dt>
      <dd data-field="genre"></dd>
    </div>
    <div class="row">
      <dt>お問い合わせ内容</dt>
      <dd data-field="message"></dd>
    </div>
  </dl>
</div>

書き換えのポイント

<div class=“row”></div>を、上から順番に1つづつ、フォームの項目分作る

<dt></dt>の中には項目のラベルを入れる（例：お名前、メールアドレスなど…）
<dd data-field=“”></dd>この“”の中には項目のIDを入れる（例：name , email など…）

項目のIDは、フォームの項目の「詳細」タブから確認・編集できます。
あらかじめわかりやすいものにしておきましょう。

CSSとJavaScriptコードを追加

elementor proならカスタムコードに、elementor 無料版ならプラグインコードスニペットなどをインストールして、下記コードをコピペしてください。

CSS

<style>
.elementor-form .confirm-table dl{
  display:grid;
  grid-template-columns:12em 1fr;
  gap:12px 16px;
}
.elementor-form .confirm-table dt{
  font-weight:600; /* フォームの項目を太字に */
}
.elementor-form .confirm-table dd{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
}
.elementor-form .confirm-table .row{
  display:contents;
}
.text{ /* ご入力内容に…のテキストのスタイル */
  font-size:1.2rem;
  font-weight:600;
  color:#D7501A;
  margin-bottom:40px;
  text-align:center;
}
.elementor-form .confirm-table{
  margin-bottom:20px;
}

@media (max-width:767px){
.elementor-form .confirm-table dl{
  grid-template-columns:150px 1fr;
  gap:12px 16px;
}
}
</style>

<style>
.elementor-form .confirm-table dl{
  display:grid;
  grid-template-columns:12em 1fr;
  gap:12px 16px;
}
.elementor-form .confirm-table dt{
  font-weight:600; /* フォームの項目を太字に */
}
.elementor-form .confirm-table dd{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
}
.elementor-form .confirm-table .row{
  display:contents;
}
.text{ /* ご入力内容に…のテキストのスタイル */
  font-size:1.2rem;
  font-weight:600;
  color:#D7501A;
  margin-bottom:40px;
  text-align:center;
}
.elementor-form .confirm-table{
  margin-bottom:20px;
}

@media (max-width:767px){
.elementor-form .confirm-table dl{
  grid-template-columns:150px 1fr;
  gap:12px 16px;
}
}
</style>

JavaScript

<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.querySelector('form.elementor-form');
    if (!form) return;

    const escapeHtml = (str) => {
        if (!str) return '';
        return String(str).replace(/[&<>"']/g, function(match) {
            return {
                '&': '\u0026amp;',
                '<': '\u0026lt;',
                '>': '\u0026gt;',
                '"': '\u0026quot;',
                "'": '\u0026#39;'
            }[match];
        });
    };

    const updateConfirmation = () => {
        const displayFields = form.querySelectorAll('[data-field]');
        
        displayFields.forEach(display => {
            const fieldName = display.getAttribute('data-field');
            const inputs = form.querySelectorAll(`[name="form_fields[${fieldName}]"], [name="form_fields[${fieldName}][]"]`);
            
            if (inputs.length === 0) return;

            let value = '';
            const type = inputs[0].type;

            if (type === 'radio') {
                const checked = Array.from(inputs).find(input => input.checked);
                if (checked) value = checked.value;
                
            } else if (type === 'checkbox') {
                const checkedValues = Array.from(inputs)
                    .filter(input => input.checked)
                    .map(input => input.value);
                value = checkedValues.join('、');
                
            } else {
                value = inputs[0].value;
            }

            display.innerHTML = escapeHtml(value).replace(/\n/g, '<br>');
        });
    };

    form.addEventListener('change', updateConfirmation);
    form.addEventListener('input', updateConfirmation);

    const nextButtons = form.querySelectorAll('.e-form__buttons__wrapper__button-next');
    nextButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            setTimeout(updateConfirmation, 100);
        });
    });

    updateConfirmation();
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.querySelector('form.elementor-form');
    if (!form) return;

    const escapeHtml = (str) => {
        if (!str) return '';
        return String(str).replace(/[&<>"']/g, function(match) {
            return {
                '&': '\u0026amp;',
                '<': '\u0026lt;',
                '>': '\u0026gt;',
                '"': '\u0026quot;',
                "'": '\u0026#39;'
            }[match];
        });
    };

    const updateConfirmation = () => {
        const displayFields = form.querySelectorAll('[data-field]');
        
        displayFields.forEach(display => {
            const fieldName = display.getAttribute('data-field');
            const inputs = form.querySelectorAll(`[name="form_fields[${fieldName}]"], [name="form_fields[${fieldName}][]"]`);
            
            if (inputs.length === 0) return;

            let value = '';
            const type = inputs[0].type;

            if (type === 'radio') {
                const checked = Array.from(inputs).find(input => input.checked);
                if (checked) value = checked.value;
                
            } else if (type === 'checkbox') {
                const checkedValues = Array.from(inputs)
                    .filter(input => input.checked)
                    .map(input => input.value);
                value = checkedValues.join('、');
                
            } else {
                value = inputs[0].value;
            }

            display.innerHTML = escapeHtml(value).replace(/\n/g, '<br>');
        });
    };

    form.addEventListener('change', updateConfirmation);
    form.addEventListener('input', updateConfirmation);

    const nextButtons = form.querySelectorAll('.e-form__buttons__wrapper__button-next');
    nextButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            setTimeout(updateConfirmation, 100);
        });
    });

    updateConfirmation();
});
</script>