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