Systeme.ioでブログにフォームやポップアップを追加する方法
この記事では、systeme.io で作成したブログにインラインフォームやポップアップフォームを設置する方法について説明します。
ステップ 1：インラインフォームを作成する
まず、セールスファネルからフォームを作成する必要があります。
これを行うには、「セールスファネル 」に移動し、「ステップを追加する」（画像の1番）をクリックして新規ステップを作成し、「インラインフォーム 」（画像の2番）を選択します。
「選択する」（画像の3番）をクリックして、お好みのテンプレートを選択します。
フォームをカスタマイズするために、「ページを編集する」をクリックして、ページエディターに移動します。
フォームには少なくとも1つの「フォーム入力項目」が必要になりますが、フォーム入力欄はいくつでも追加することができます。
「フォーム入力」項目をクリックし、左側の設定パネルの選択リストから収集したい「入力タイプ」を選択し、該当する入力欄を設定してください。
また、設定したフォーム入力項目の収集時に実行されるボタン設定が必要であり、ボタンクリックされた時の動作をあらかじめ決めておく必要があります。
エディターや 「インラインフォーム 」を離れる前に、「変更内容を保存 」ボタンをクリックすることを忘れないでください。
ステップ 2：ポップアップフォームの作成
「セールスファネル 」に移動し、「ステップを追加する 」（画像の5番）をクリックして新しいステップを作成し、「ポップアップフォーム 」（画像の6番）を選択します。
「選択する」（画像の7番）をクリックして、お好みのテンプレートを選択します。
ポップアップフォームをカスタマイズするために、「ページを編集する」をクリックしてページエディターに移動します。
フォームには少なくとも1つの「フォーム入力項目」が必要になりますが、フォーム入力欄はいくつでも追加することができます。
「フォーム入力」項目を選択し、左側の設定パネルの選択リストから収集したい「入力タイプ」を選択し、該当する入力欄を設定してください。
また、設定したフォーム入力項目の収集時に実行されるボタン設定が必要であり、ボタンクリックされた時の動作をあらかじめ決めておく必要があります。
ブログページにフォームを表示させる時間を設定することができます。この時間はエディターを使用して調整することが可能です。指定する時間は秒単位です。
エディターや 「ポップアップフォーム 」を離れる前に、「変更内容を保存 」ボタンをクリックすることをお忘れなく。
ステップ 3：ブログにインラインフォームを設置する
ブログにフォームを設置するには、その 「スクリプト 」を取得し、ブログページに貼り付ける必要があります。
最初のステップは 「インラインフォーム 」の 「ステップ設定 」に戻り、「スクリプト 」をクリックすることです。
「インラインフォーム」のページにリンクされた 「スクリプト 」のコードを含むポップアップが表示されますので、「リンクをクリップボードにコピー する」をクリックしてください。
その後、インラインフォームを追加したいブログページのエディターに移動する必要があります。
次に、ブログページにHTML要素を追加する必要があります。
そして、HTML要素の設定に移動する必要があります。
「コードを編集」をクリックし、インラインフォームのページから取得した「スクリプト」コードを貼り付けます。
「保存」をクリックしてHTMLコードを保存します。また、エディターで「変更内容を保存」をクリックし、ブログページを終了する前に必ず保存することを忘れないでください。
その後、ブログページをプレビューすると、以下のようにフォームが表示されます：
ステップ 4：ブログにポップアップフォームを設置する ：
登録フォームをポップアップとして設定する場合、ブログページに表示する方法は2つあります：
- 出現時間の設定に従って表示されるポップアップに設定する
- テキストをクリック可能でポップアップを開くように設定する
最初の方法はブログにインラインフォームを追加する方法と同じなので、2番目の方法について詳しく説明します。
テキストをクリックした後に 「ポップアップフォーム 」を表示させるには、まずファネルのステップ設定から 「ポップアップフォーム 」に戻り、「リンクを作成 」をクリックします。
テキストからポップアップを開くリンクをクリックすると、ポップアップが表示されます：
- クリック可能なテキストの表示内容を設定します。
- 「リンクをクリップボードにコピーする」をクリックします。
ポップアップを表示させたいブログページのエディターに移動します。
次に、ブログページにHTML要素を追加する必要があります。
そして、HTML要素の設定に移動する必要があります。
「コードを編集」をクリックし、ポップアップフォームのページを開くリンクの「リンク（スクリプト）」を貼り付けます。
必ず「保存」をクリックしてHTMLコードを保存します。また、エディターの「変更内容を保存」をクリックしてページを保存してから、ブログページを終了してください。
その後、ブログページをプレビューすると、下図のように「クリックしてください」というテキストが表示され、それをクリックすると、ポップアップフォームが表示されます：
関連記事：