フォームをJSトリガーとして埋め込みたいですか？以下の手順に従って、JSトリガーとしてフォームをウェブサイトに埋め込む方法を説明します。
EmbedFormsのアカウントがまだない場合は、7日間の無料トライアルを開始してください。
フォームを作成するためのクイックガイド
EmbedFormsのアカウントを作成
フォームを作成およびカスタマイズ
ウィジェットを作成
これで、JSトリガーとしてフォームを埋め込む準備が整いました。
トリガーとして埋め込む手順
1.EmbedFormsのホーム画面より、「+新規フォーム作成」をクリックし、テンプレートの1つを選択するか、最初からフォームを作成およびカスタマイズします。
2.フォームを作成およびカスタマイズしたら、「ウィジェット」タブに移動し、「+新規作成」をクリックし、ウィジェットを作成したいフォームを選択します。左側のメニューで「JSトリガー」を選択します。
3.トリガーIDを定義し「保存」をクリック。そして、ウィジェットコードをコピーします。
ウィジェットコードのコピー
ウィジェットコードを取得したら、以下のコードをコピーします。
<style> .button { font-weight: 500; font-size: 20px; padding: 1rem; border-radius: 10px; background-color: blue; border: none; color: #FFFFFF; } </style> <button class="button" id="Add the ID that you have added on your form"> <b> Leave a review </b></button> //Widget code here
フォームで設定したIDを「id="Add the ID that you have added on your form"」の部分に追加します。以下のようになります。
id="#formJsTrigger"
そして、//Widget code hereの部分にウィジェットコードを配置します。
最終的なコード
<style>.button {font-weight: 500;font-size: 20px;padding: 1rem;border-radius: 10px;background-color: blue;border: none;color: #FFFFFF;}}</style> <button class="button" id="formJsTrigger"> <b> Leave a review </b></button> <div class="embedsocial-forms-iframe" data-ref="38fd80e47cd71d1ffc657839ac7052d00584a222" data-widget="true" data-height="auto"></div> <script> (function(d, s, id){ var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ef.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialFormsScript")); </script>
これで完了です。このコードをウェブサイトに埋め込むと、ボタンが表示され、クリックすると作成したフォームにリダイレクトされます。
ボタンのデザインは自由にカスタマイズ可能です。この部分のコードは完全にカスタマイズできます。
<style> .button { font-weight: 500; font-size: 20px; padding: 1rem; border-radius: 10px; background-color: blue; border: none; color: #FFFFFF; } </style>
詳細やご不明点は、このページの右下のチャットサポートかCSチームにお問い合わせくださいませ。