AI要約
ほとんどの中小企業は、一つの重大な間違いを犯しています。それは、ウェブ上の他のサインアップフォームとほとんど変わらない、ごく標準的なサインアップフォームを使用していることです。
お客様からの問い合わせに対応する際に、お客様のフォームを確認する機会があるたびに、このパターンを繰り返し目にします。
そこで、読者の皆様が魅力的なサインアップフォームを作成し、ニュースレターリストを構築するのに役立つ簡単なガイドを作成することにしました。
このガイドでは、WordPressで最も人気のあるページビルダーツールであるElementorを使用して、独自のカスタムサインアップフォームを作成する手順を説明します。
Elementorでカスタムサインアップフォームを作成する
以下のクイックリンクを使用して、チュートリアルの任意のセクションにすぐにジャンプしてください。
この記事の内容
始めましょう。
ステップ1：ElementorとWPFormsをインストールする
多くの人がElementorを使ってページを公開しているため、Elementorを使用してカスタムサインアップフォームを作成する方法を紹介します。
まだインストールしていない場合は、サイトにElementorをインストールしてください。
このチュートリアルでは、プレミアムElementorライセンスは必要ありません。代わりに、ElementorとWPFormsを組み合わせて、無料でサインアップフォームを作成できます！😎
プラグインのインストール方法がわからない場合は、プラグインインストールの初心者向けガイドをご覧ください。
ElementorとWPFormsの組み合わせを使用して、完全に無料で美しいカスタムサインアップフォームを作成できますが、より良い結果を得るために高度なツールにアクセスするには、WPForms Proライセンスを試すことをお勧めします。
両方のプラグインをインストールしたら、完全にカスタマイズされたサインアップフォームの作成を開始する時間です！
ステップ2：Elementorでページを作成または編集する
既存のページまたはまったく新しいページにサインアップフォームを追加できます。通常、ニュースレターフォームは、より大きなランディングページのいくつかのセクションの1つとして埋め込まれます。しかし、ここでは簡単にするために、サインアップフォームのみを含む新しいページを作成します。
まず、WordPressダッシュボードを開き、**ページ » 新規追加**をクリックします。
WordPressブロックエディターに入ったら、上部にあるElementorで編集ボタンをクリックします。
ボタンをクリックすると、Elementorエディターが数秒で読み込まれます。ドラッグアンドドロップエディターを使用して、完全なランディングページを作成できます。
次のステップでは、WPFormsウィジェットを使用してカスタムサインアップフォームを作成します。
ステップ3：新しいサインアップフォームを作成する
ここではカスタムサインアップフォームを追加するだけでよいので、WPFormsウィジェットを探して、右側の領域にドラッグします。
WPFormsウィジェットをページに挿入したら、WPFormsで作成した保存済みのフォームを選択するか、新しいフォームを作成できます。
左側のペインにある**+新規フォーム**ボタンをクリックして、新しいサインアップフォームを作成します。
この時点で、WPFormsフォームビルダーがオーバーレイとして読み込まれます。ここで、ページに埋め込む必要があるサインアップフォームを作成できます。
まずはフォームに名前を付けます。これにより、WordPressダッシュボードで後から参照および検索しやすくなります。
次に、下にスクロールし、テンプレート選択ペインの下にある検索バーを使用して適切なテンプレートを見つけます。このチュートリアルでは、ニュースレターサインアップフォームテンプレートを使用します。
テンプレートを選択すると、フォームビルダーが画面に読み込まれます。このテンプレートにはすでに名前とメールフィールドが含まれていることに気づくでしょう。これは、ニュースレターサインアップに必要なすべてです。
しかし、楽しみはそれだけではありません！このフォームを次のレベルに引き上げ、真の輝きを与えることができます。
その方法の1つは、より多くの人々がサインアップを促す楽しい見出しを追加することです。
これは、WPForms Proで利用可能なコンテンツフィールドを使用して行うことができます。コンテンツフィールドをフォームの上部に挿入します。
フィールドを追加したら、それをクリックして、左側のペインにある関連するフィールドオプションを開きます。
左側のペインにあるテキストエディターを使用すると、コードなしで任意のテキストを追加できます。テキストを追加し、見出し4としてフォーマットします。テキストをより目立たせるために絵文字も追加しましょう！🕺
エディターの下にあるプレビューの更新ボタンを押して、右側のフォームで変更が反映されることを確認してください。
ついでに、送信ボタンのテキストも変更して、フォームの性質により関連性の高いものにしましょう。
フォームビルダーのサイドバーから、設定 » 一般をクリックします。送信ボタンのテキストフィールドが見つかるまで下にスクロールします。ここに入力するだけで、デフォルトのテキストを置き換えることができます。
素晴らしい！フォームはすでにうまく形になってきています。ここで、上部にある保存ボタンを押してフォームを保存するのが良いタイミングです。
しかし、ニュースレターサインアップフォームは、メールマーケティングツールと統合されていなければ意味がありません。
次のステップでは、フォームをマーケティングアプリと統合する方法を示します。これにより、新しい購読者は自動的に購読者リストにコピーされます。
ステップ4：サインアップフォームをマーケティングプラットフォームに接続する
WPFormsは、Plus以上のプランからさまざまなマーケティング統合をサポートしています。WPForms Liteを使用している場合でも、Constant Contact統合を無料で利用できます。
この例では、サインアップフォームをBrevoに接続する方法を簡単に示します。
サイドバーのマーケティングタブに移動するだけです。
次に、フォームを接続したいサービスを選択します。Constant Contactを除き、サポートされているすべてのマーケティング統合では、まず適切なアドオンをインストールする必要があります。
まだアドオンをお持ちでない場合は、クリックするとWPFormsがインストールしてくれます。
この場合、Brevoを使用しています。マーケティングタブ内のBrevoをクリックすると、インストールのプロンプトが表示されました。はい、インストールしてアクティブ化するを押した後、Brevoアドオンのインストールと準備が完了するまでわずか5秒でした。
次に、左側のペインでBrevoが選択された状態で、右上にある新しいアカウントを追加をクリックします。
これで、Brevo APIキーとアカウントのニックネームを入力するだけです。Brevo APIキーの見つけ方についてさらにヘルプが必要な場合は、詳細についてBrevoアドオンのドキュメントを参照してください。
必要な情報を入力したら、追加をクリックします。
Brevoアカウントとの接続が完了すると、新しい設定リストが右側のペインに表示されます。
ドロップダウンフィールドを使用して、フォームがBrevoアカウントでどのように機能するかを構成してください。フォームが送信されたときにBrevoで実行するアクション、新しい購読者を追加または削除するリスト、メールフィールドのマッピングなどを設定できます。
完了したら、必ず上部にある保存を押してください。
マーケティング連携が完了しました。簡単でしたね！
ステップ5：サインアップフォームをスタイル設定して公開する
この時点で、サインアップフォームに必要な機能の設定は完了です。しかし、このチュートリアルの冒頭で強調したように、インパクトのあるフォームは機能的であるだけでなく、視覚的にも印象的である必要があります。
コンテンツフィールドでテキストや絵文字を追加してフォームをさらにエキサイティングなものにしましたが、WPFormsとElementorの組み合わせの力でさらに進めることができます。
フォームの準備ができたら、クロスボタンを押してWPFormsを終了します。これで、新しく作成したフォームがウィジェットとして埋め込まれたElementorエディタが表示されるはずです。
フォームをクリックし、左側のペインにあるスタイルタブを選択します。
このタブの下には、さまざまなフォームコンポーネントのスタイルをカスタマイズするためのオプションがあります。たとえば、コードなしでフィールド、ラベル、ボタンのスタイルをカスタマイズできます。
私たちのフォームでは、フィールドの境界線はデフォルトで角がまっすぐな長方形です。しかし、より丸いフィールドの境界線が必要な場合は、フィールドスタイルの下にある境界線の半径値を増やすだけで実現できます。
同様に、フィールド、ラベル、ボタンの色をワンクリックで変更できます。デフォルトの色はテーマに完全に一致するため、それらを使用します。ただし、フォームでさまざまな色を自由に試すことができます。
Elementorでは、フォームコンテナのスタイルも変更できます。これを行うには、高度な設定タブをクリックします。
レイアウト調整、アニメーション効果、背景のカスタマイズなど、多くの魅力的な設定があります。
フォームコンテナに背景色を追加して、より生き生きとした外観にしましょう。背景オプションをクリックして、追加設定を含むメニューを展開します。
右側の色の選択アイコンをクリックして、単色を追加します。
カラーピッカーツールを使用すると、クリックするだけで簡単に色を選択できます。
色を選択すると、フォームはすぐに視覚的に魅力的になります！
しかし、フォーム内の要素がコンテナの境界線に触れており、あまり見栄えが良くありません。
これは簡単な修正です！
左側のペインの[詳細設定]メニューにある[レイアウト]オプションをクリックして、マージンとパディングの設定にアクセスします。パディングを追加しただけで、結果は素晴らしいものになりました！
これで、フォームを発行する準備が整いました。ただし、さらにカスタマイズを試したい場合は、ここでさらに時間をかけてさまざまなオプションを検討してください。
準備ができたら、下部にある[発行]ボタンを押します。
発行したページを今すぐ表示するかどうかを尋ねるメッセージがすぐに表示されます。
発行後にページを表示してください。
これで完了です！
ElementorとWPFormsを使用してカスタムサインアップフォームを追加しました。
これにより、フォームがウェブサイトにユニークに見えるようになり、手間なくメール購読者を増やすのに役立つ、時間節約型の統合機能が搭載されていることを確認できます！
Elementorサインアップフォームに関するFAQ
Elementorでサインアップフォームを作成することについて、まだ質問がありますか？ここでは、お客様からよく寄せられる質問をいくつかご紹介します。
サインアップフォームを作成するためにElementor Proが必要ですか？
いいえ、WPFormsがインストールされていれば、サインアップフォームを作成するためにElementor Proは必要ありません。Proバージョンにアップグレードする必要なく、ElementorでWPFormsウィジェットにアクセスできます。ただし、Elementorには独自のフォームビルダーも別途用意されています。Elementorのみでサインアップフォームを作成したい場合は、Proライセンスが必要です。
Elementorは優れたページビルダーツールですが、Elementorのフォームビルダーはより基本的であり、WPFormsのような高度なフォームビルダーと比較していくつかの制限があります。
サインアップフォームをウェブサイトのブランディングに合わせてスタイル設定するにはどうすればよいですか？
サインアップフォームをウェブサイトのブランディングに合わせる最も簡単な方法は、フォームのさまざまな側面でサイトのテーマカラーを使用することです。WPFormsはテーマのプライマリカラーとセカンダリカラーを自動的に選択するため、これらの色を境界線、ラベル、ボタンなどのフォームのさまざまなコンポーネントに簡単に使用できます。
ElementorのWPFormsウィジェットで[スタイル]タブをクリックすると、これらのスタイルカスタマイズ設定にアクセスできます。そこでは、利用可能なテーマカラーから選択して、ブランディングに合わせてフォームのさまざまな部分の色を変更するオプションが見つかります。コーディングは不要です！
カスタムCSSを使用してサインアップフォームをスタイル設定できますか？
はい、WPFormsを使用している場合は、サインアップフォームにカスタムCSSクラスを追加できます。これを行うには、ElementorでWPFormsウィジェットを選択した後、[スタイル]をクリックし、次に[詳細設定]をクリックします。その後、カスタムCSSを挿入してサインアップフォームをスタイル設定できます。
マルチステップサインアップフォームを作成するにはどうすればよいですか？
WPFormsでは、マルチステップサインアップフォームを作成するためのいくつかの方法が提供されています。ページ区切りを追加してフォームを複数のページに分割するか、通常のフォームをページ区切りを挟んだマルチステップサインアップフォームに自動的に変換するリードフォームアドオンを使用できます。
次に、カスタムConvertKitフォームを作成します
WPFormsは、ConvertKitを含むさまざまなマーケティングプラットフォームと連携します。カスタムConvertKitフォームの作成方法を示す専用ガイドがあります。ぜひチェックしてください！
オンラインで商品を販売している場合は、無料の注文フォームのオプションを比較することもできます。
カスタムサインアップフォームを作成する準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには、多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
もしこの記事がお役に立ったなら、WordPressの無料チュートリアルやガイドをもっと知るために、FacebookとTwitterでフォローしてください。
