Systeme.ioのブログにフォームやポップアップを追加する方法
この記事では、systeme.io で作成したブログにインラインフォームやポップアップフォームを設定する方法について説明します。
ステップ 1：インラインフォームを作成する
まず、セールスファネルからコンタクトフォームを作成する必要があります。
これを行うには、セールスファネル に移動し、ステップを追加する（1）をクリックして新規ステップを作成し、インラインフォーム （2）を選択します。
表示されたテンプレートの部分（3）をクリックして、使用するテンプレートを選びます。
フォームをカスタマイズするために、ページを編集する（4）をクリックして、ページエディターに移動します。
フォームには少なくとも1つのフォーム入力項目が必要になりますが、必要に応じて複数のフォームフィールドを追加できます。
フォーム入力要素を選択し、次に設定（歯車）アイコンをクリックしてフィールド（フォーム入力項目）を設定します。ドロップダウンリストから収集したい入力タイプを選択します。
あわせて、ボタンのアクションも設定する必要があります。ボタンを選択し、ユーザーがフォームを送信した後の動作を指定します。
エディターを閉じる前に、変更内容の保存をクリックすることを忘れないでください。保存しないとインラインフォームの変更内容は反映されません。
ステップ 2：ポップアップフォームを作成する
セールスファネルに移動し、ステップを追加する（5）をクリックして新しいステップを作成し、次にポップアップフォーム（6）を選択します。
表示されたテンプレートの部分（7）をクリックして、使用するテンプレートを選びます。
ポップアップフォームをカスタマイズするために、ページを編集する（8）をクリックしてページエディターに移動します。
コンタクトフォームには少なくとも 1 つのフォーム入力項目が必要になりますが、必要に応じて複数のフォームフィールドを追加できます。
フォーム入力要素を選択し、次に設定（歯車）アイコンをクリックしてフィールドを設定します。ドロップダウンリストから収集したい入力タイプを選択します。
また、入力項目の収集時に実行されるボタン設定が必要であり、ボタンがクリックされた時の動作の設定をする必要があります。
ブログページ上でコンタクトフォームを表示するタイミングも設定できます。この時間はエディター内で調整でき、指定する時間は秒単位です。
エディターを閉じる前に、変更内容の保存をクリックすることを忘れないでください。
ステップ 3：ブログにインラインフォームを設定する
ブログにコンタクトフォームを追加するには、そのスクリプトをコピーしてブログページに貼り付ける必要があります。
まず、インラインフォームのステップ設定に戻り、スクリプトをクリックします。
インラインフォームページへのリンクが表示されたポップアップが開きます。リンクをクリップボードにコピーするをクリックします。
次に、メニューから編集するをクリックするか、インラインフォームを追加したいページ名を直接クリックして、ブログページのエディターを開きます。
次に、ブログページ上にRaw HTML要素をドラッグ＆ドロップします。
そして、Raw HTML要素の設定を開きます。
コードを編集をクリックし、インライン フォームページから取得したリンクのスクリプトを貼り付けます。
保存をクリックして HTML コードを保存し、エディター内で保存をクリックしてから、ブログページを終了してください。
その後、ブログページをプレビューすると、以下のようにフォームが表示されていることを確認できます：
ステップ 4：ブログにポップアップフォームを設定する：
ポップアップとしてコンタクトフォームを設定する場合、ブログページ上での表示方法は次の 2 通りがあります：
- 自動： 一定時間が経過するとポップアップが表示されます。
- クリック時： ユーザーが特定のリンクやテキストをクリックするとポップアップが表示されます。
注：1 つ目の方法は、ブログにインラインフォームを追加する場合と同じ手順です。そのため、ここでは 2 つ目の方法について詳しく説明します。
テキストをクリックしたときにポップアップフォームを表示するには、まずポップアップフォームの設定ステップに戻り、リンクを作成するをクリックします。
テキストからポップアップを開くリンクを作成するためのポップアップが表示されます：
- クリック可能なテキストの表示内容を設定します。
- リンクをクリップボードにコピーするをクリックします。
リンクを追加したいブログページのエディターを開きます。
次に、ブログページ上にRaw HTML要素を設定します。
そして、Raw HTML要素の設定を開きます。
コードを編集をクリックし、ポップアップフォームを開くリンクのスクリプトを貼り付けてから保存をクリックします。
ブログページを終了する前に、必ずエディター内で保存をクリックします。
その後ブログページをプレビューすると、以下のようにクリックしてくださいというテキストが表示され、それをクリックすると、ポップアップフォームが表示されることを確認できます：
