申込フォームのイベント説明とフォーム部分を横並びにレイアウトすることはできますか?

 

イーべ!で作成した申込フォームをイベント説明とフォーム部分を横並びにレイアウトすることができます。

※ スクリプトを使用するため、セキュリティの観点から無料お試し期間中はご利用いただけません。

>> 申込フォームのサンプルはコチラ

イベント説明とフォーム部分を横並びにレイアウトする設定方法

【1】管理画面の「イベント情報編集」内「イベント編集」をクリックする。

【2】イベント説明文を「ソースモード」にし、冒頭に「フォームを横並びにするスクリプト」を記載する。

※ 以下の<style type=”text/css”>から</style>までをコピーして、画像のように貼り付けます。

<style type=”text/css”>
    @media screen and (min-width: 768px) {
        .event-content {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            width: 1280px;
        }
        .event-head {
            grid-column: 1 / -1;
            border-bottom: 1px solid #ccc;
        }
        .event-body {
            padding-right: 2rem;
        }
        #form-contents {
            padding-top: 60px;
        }
        #event-content {
            border: none;
        }
    }
</style>

【3】カスタム設定にある「受付状態表示(PC版)」と「詳細表示(PC版)」を「非表示」に変更する。

更新日 2023年8月2日