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

 

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

※ 無料お試し期間中はご利用いただけません。

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

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

【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版)」を「非表示」に変更する。

更新日 2024年1月30日