PageFlyでお問い合わせページを作成する方法

PageFlyの問い合わせページについて

PageFlyを使用すると、コーディングスキルがなくても、視覚的に魅力的な問い合わせページを簡単に作成できます。このガイドでは、PageFlyを使用して問い合わせページを構築する手順をご説明します。

PageFlyで問い合わせページを作成する方法

ステップ1：通常ページを作成する

1. PageFlyダッシュボードで、「ページ」タブに移動します。

2. 「新規白紙ページ作成」ボタンをクリックします。

3. ドロップダウンメニューから「通常」を選択します。

4. エディターの種類を選択します。

• Gen 2 Editor: ネストされたコンテナを備えたFlexシステムを利用した高度なエディターです。

• Legacy Editor: 従来のレイアウトオプションに焦点を当てた分かりやすいエディターです。

または、「テンプレートから作成」ボタンをクリックして、PageFlyテンプレートを問い合わせページに使用することもできます。

ステップ2：画像バナーをアップロードする

ページキャンバスにセクションを追加する

1. エディターで、「エレメント」アイコンをクリックします。

2. PageFlyタブの下で、「レイアウト」エレメントを選択します。

3. 1/1オプション (Legacyエディターの場合) またはBlank block (Gen 2エディターの場合) のいずれかをページエディターにドラッグアンドドロップします。

Legacyエディターでは、ブレッドクラムのSectionをクリック > Generalタブに移動 > Set fixed widthオプションを無効にすることで、Rowの表示スペースを拡大できます。

Gen 2エディターでは、Flexセクションを選択 > Stylingタブに移動 > Content widthパラメーターの下にある「Fill container」オプションを選択することで、これを行うことができます。

バナーの背景画像を追加する

• ステップ1：Stylingタブで、Backgroundパラメーターまでスクロール > Select imageをクリックして画像を選択します。

Image Managerから画像を使用するか、インターネットからアップロードできます。詳細については、こちらをお読みください。

• ステップ2：Stylingタブで、Spacingセクションに移動 > top-paddingとbottom-paddingの値を設定して、セクションの高さを画像に合わせて変更します。中央の小さなボックスは、PaddingとMarginの4辺すべてに同じ値を設定します。この場合、上下のパディングを200pxに設定します。

• ステップ3：Backgroundパラメーターまでスクロールし、More Settingsボタンをクリック > Background PositionにはCenter、Background SizeにはCoverを選択します。

「Contact Us」見出しを追加する

Elementsアイコンをクリック > 次に、PageFlyタブでHeadingエレメントを選択 > 最初のバリアントをセクションにドラッグアンドドロップします。

見出しエレメントのテキストを変更し、スタイルを設定するには、以下の手順に従います。

• ステップ1：Generalタブで、サンプルテキストを「CONTACT US」に変更します。

• ステップ2：Stylingタブをクリック > Content color > お好みの色を選択します。

• ステップ3：Spacingで、必要に応じてmargin topとbottomを調整します。

• ステップ4：Typographyパラメーターまでスクロール > お好みのフォントファミリーを選択し、必要に応じてフォントサイズを調整します。

ステップ3：Google Mapエレメントを追加する

Elementsアイコンをクリック > 次に、PageFlyタブでGoogle Mapエレメントを選択 > 最初のバリアントをページエディターにドラッグアンドドロップします。

マップの場所を設定するには、Generalタブを選択 > ContentパラメーターでMap location、Map zoom、Map typeを変更します。

Google Mapエレメントの詳細については、こちらをお読みください。

ステップ4：連絡先情報フィールドと問い合わせフォームを作成する

Google Mapと同じセクションに、1/2 – 1/2のレイアウトを追加します。左側の列には店舗の情報が含まれます。右側の列には、顧客が店舗に情報を送信できるように問い合わせフォームエレメントが配置されます。

連絡先情報フィールドを追加する

Generalタブでの設定

左側の列に、次のコンテンツを持つ4つの見出しエレメントを追加します：Contact information、Address、Email、Phone number。1つの見出しエレメントを作成し、その見出しをクリックして複製し、4つの見出しエレメントにすることができます。

次に、各見出しにコンテンツを追加します。各見出しをクリックし、GeneralタブのContentパラメーターに店舗情報を入力します。

各情報行にはアイコンを追加します。

• 見出しをクリックし、Generalタブを確認します。

• Show iconオプションを有効にします。星アイコンが表示されます。別のアイコンに変更したい場合は、アイコンをクリックするだけです。この場合は、「location-dot」アイコンに置き換えます。

残りの見出しについても同様に行うことができます。

Stylingタブでのスタイルのカスタマイズ

Stylingタブに移動して、フォントスタイルを設定します。

• 見出しとテキストエレメントのお好みのフォントファミリーとウェイトを選択します。

• デザインのニーズに合わせて、各見出しとテキストエレメントのフォントサイズを調整します。

• Copy Styles機能を使用して、1つの見出しから他の見出しに同じスタイルをすばやく適用し、一貫性を確保します。

問い合わせフォームを追加する

「エレメント」アイコンをクリック > Shopifyタブに移動 > 問い合わせフォームエレメントを右側の列にドラッグアンドドロップします。

フォームのスタイルは、左側の列で見出しにスタイルを設定したのと同様に行うことができます。

PageFlyが提供するこの役立つビデオガイドで、顧客データを収集するためのShopifyフォームを簡単に作成する方法を学びましょう。

ステップ5：Instagram Feedエレメントを追加する

Instagramエレメントを使用すると、顧客はあなたのブランドの個性を垣間見ることができ、ブランドへの信頼を高め、顧客エンゲージメントを促進し、最終的に売上を向上させることができます。

見出し「Follow Us On Instagram」を追加する

Headingエレメントを使用して見出しを作成します。Generalタブで、Heading textに「Follow us on Instagram」というテキストを追加します。次に、Stylingタブに切り替えてテキストをカスタマイズします。

Instagram Feedエレメントを追加する

「エレメント」アイコンをクリック > 上記の見出しと同じセクションにInstagram Feedエレメントをドラッグアンドドロップします。

Instagramに接続する必要があることに注意してください。

Instagramエレメントの詳細については、この記事をご確認ください。

ステップ6：ページを保存して公開する

Saveボタンをクリックし、次にPublishボタンをクリックしてページを公開します。Live viewボタンをクリックすると、ライブでページを確認できます。

問い合わせページを構築する方法と、PageFlyでそれを最大限に活用する方法について詳しく知るには、これらのブログをご確認ください。

よくある質問

1. 問い合わせページが重要なのはなぜですか？

問い合わせページは、訪問者がブラウザから離れることなく、電話、メッセージ、またはフォームへの入力によってブランドに簡単に連絡できるため重要です。

2. PageFlyの問い合わせページにはどのような要素を含めることができますか？

問い合わせページには、以下の要素を追加して強化できます。

• 問い合わせフォーム

• 情報のためのテキストコンテンツ

• 訪問者を引き付けるビジュアル

• 場所のためのマップ統合 (オプション)

• 追加の連絡チャネルのためのソーシャルメディアボタン (オプション)