【ConvertKit】WordPressでフォームを表示する方法

1.フォームの表示とは?

ConvertKitで作成できるForm(フォーム)は、「メルマガ登録」や「Ebookプレゼント」などの、いわゆるオプトインフォームです。
※お問い合わせフォームなどの長文を入力するようなフォームは作成できません。

例えば、下の画像は、ConvertKitで作成した「Ebookプレゼント」のオプトインフォームです。

【ConvertKit】WordPressでフォームを表示する方法

しかし、作成するだけでWordPressに自動で表示されるわけではありません。このページでは、このフォームを例にして、WordPressに表示する手順を解説していきます。

なお、このページで言うフォームは「Inline(インライン)形式」のものを指します。

【ConvertKit】WordPressでフォームを表示する方法

2.WordPressでフォームを表示する方法は2つ

「ConvertKitで作成したフォーム」をWordPressで表示する方法は2つです(厳密にはいくつかありますが、この2つだけ押さえておけば困ることはありません)。

  1. HTMLを挿入する
  2. ショートコードを挿入する

どちらの方法を用いてもフォームは同じく表示さますが、メリット・デメリットがあります。

フォームの表示方法コードの長さプラグインの要否
HTMLを挿入恐ろしく長い不要
ショートコードを挿入短い

HTMLがどのくらい長いかと言うと、画像のスクロールバーを見てもらえればわかると思います。

【ConvertKit】WordPressでフォームを表示する方法

これを挿入するのは(個人的には)避けたいところです。

一方のショートコードはとても短いです(短いから“ショートコード”と呼称するわけですが)。

【ConvertKit】WordPressでフォームを表示する方法

プラグインを利用するデメリット(表示速度が遅くなるかもしれない)もありますが、私はショートコードを利用してフォームを表示しています

それでは、本題に入りましょう。

3. ConvertKitとWordPressを連携する手順

3-1.プラグイン「ConvertKit」のインストール

プラグイン「ConvertKit」

プラグイン「ConvertKit」をインストールして有効化。

参照

プラグインのインストールと有効化の手順がわからない人は【WordPress】プラグインとは?利用時の注意点とインストール方法を参照してください。

3-2.プラグイン「ConvertKit」の設定

【ConvertKit】WordPressでフォームを表示する方法

WordPressダッシュボードを開く。
左側のメニュー内、『設定 > ConvertKit』をクリック。

【ConvertKit】WordPressでフォームを表示する方法

「General」タブがデフォルトで開かれています。

API Key
API Secret
それぞれ入力する必要があるため、ConvertKitで各値を確認します。

ConvertKitダッシュボードに移動。

【ConvertKit】WordPressでフォームを表示する方法

画面右上の「下向き矢印」からメニューを表示し、『Setting』をクリック。

【ConvertKit】WordPressでフォームを表示する方法

左側のメニュー内、『Advanced』をクリック。
『API Key』と『API Secret』をそれぞれコピー。
※『API Secret』は『Show』をクリックすると表示されます。

前述のプラグイン設定画面に戻り、各値をペースト(貼り付け)。

『変更を保存』をクリック。

Default Form (Posts & Pages)

【ConvertKit】WordPressでフォームを表示する方法

デフォルトのフォームを設定できます。
『API Key』と『API Secret』を入力し保存をすると、「ConvertKitで作成済みのフォーム」を選択できるようになり(未作成の場合は「None」のみ)、ここで選択したデフォルトのフォームは、すべてのPosts(投稿ページ)とPages(固定ページ)の下部に表示されます。

※画像内にある「Default form (商品)」は別のプラグインとの連携によって表示されている項目のため無視してください。

カテゴリーごとにデフォルトフォームを設定する方法

【ConvertKit】WordPressでフォームを表示する方法

WordPressダッシュボード内、『投稿 > カテゴリー』から、カテゴリーの個別編集画面に移動すると、同様にデフォルトフォームの設定ができます。
※上記デフォルト設定より優先されます。

ページ(投稿ページ・固定ページ)ごとにデフォルトフォームを設定する方法

【ConvertKit】WordPressでフォームを表示する方法

WordPressダッシュボード内、『投稿 > 投稿一覧』・『固定ページ > 固定ページ一覧』から、ページの個別編集画面に移動すると、同様にデフォルトフォームの設定ができます。
※上記カテゴリーごとのデフォルト設定より優先されます。
※「Default」は、「Default Form (Posts & Pages)」の設定に従う設定です。

Debug
Disable javascript

【ConvertKit】WordPressでフォームを表示する方法

デフォルトのまま(チェックを入れない)。

「General」タブの隣、「Tool」タブ「Contact Form 7」タブには設定(変更)箇所はありません。

【ConvertKit】WordPressでフォームを表示する方法

これでConvertKitとWordPressの連携設定は完了です。

4.WordPressにフォームを表示する手順

4-1.フォームを表示する(埋め込み)

投稿ページや固定ページにショートコードを埋め込み、フォームを表示する方法です。

ConvertKitダッシュボード内、『Grow > Landing Pages & Forms』から、作成済みフォームの編集画面を開く。

【ConvertKit】WordPressでフォームを表示する方法

画面右上の『Publish』をクリック。

【ConvertKit】WordPressでフォームを表示する方法

ポップアップ画面で、『WORDPRESS』タブを選択し、表示されるショートコードをコピー。

【ConvertKit】WordPressでフォームを表示する方法

投稿ページや固定ページの任意の場所(段落ブロック)に、コピーしたショートコードをペースト。

【ConvertKit】WordPressでフォームを表示する方法

ペーストすると自動的にショートコードブロックに変換されます(最初からショートコードブロックを選択してもOK)。

公開(更新・プレビュー)するとフォームが表示されます。
※下のフォームは、実際にショートコードを入力したものです。

4-2.フォームを表示する(ウィジェット)

ウィジェットを利用して、フォームを表示する方法です。

【ConvertKit】WordPressでフォームを表示する方法

WordPressダッシュボード内、『外観 > ウィジェット』をクリック。

【ConvertKit】WordPressでフォームを表示する方法

フォームを表示したいウィジェットの『+』をクリックし、『すべて表示』をクリック。

【ConvertKit】WordPressでフォームを表示する方法

『ConvertKit Form』を探してクリック。

【ConvertKit】WordPressでフォームを表示する方法

『Title』を入力し(空欄でもOK)、作成済みの『Form』を選択。

ウィジェットの『更新』をクリックすると、ウィジェットの箇所にフォームが表示されます。

5.まとめ

お疲れ様でした。
以上で、WordPressと連携してフォームを表示する設定は完了です。

「日本語化されていないから尻込みしていたけど、やってみたらよくある簡単な設定じゃん」と感じた人もいると思います。そもそも、「ConvertKit」と「WordPress」のような海外製品同士は、最初から連携しやすいように設計されています。

英語表記だからという理由だけで敬遠していたら損をします。引き続き、一緒に学習していきましょう。

\ 最後にシェアもお願いします /

Similar Posts