TayoriBlogTayoriBlog

  • このエントリーをはてなブックマークに追加

Tayoriで作成した問い合わせフォームをWordPressで設置する方法

Tayori_blog_banner2

この記事では、CMSの代表格といえるWordpressを用いてWEBサイトやブログを管理されてる方向けにTayoriのフォーム設置方法を紹介します。

TayoriのフォームをWordpressに設置するには下記の目次の通り4つの方法があります。

以下でそれぞれの方法でのフォームの見え方と設置方法を詳細に確認していきましょう。

フォームを編集・作成する

ログイン後に、管理画面から「フォーム管理」> 「新規作成」を押します。

1.フォーム作成

使用用途のフォームに合わせたテンプレートを選択して、「次へ」進みます

2.テンプレートを選択

 

FAQを既に作成済みですと以下の画面が出てきます。フォームとFAQを連携したい場合には、FAQを選択して「次へ」を押します。

3. FAQ連携

 

簡易的なチュートリアルが出てきますので、確認したら「編集を開始」で編集画面に移ります。

4.チュートリアル確認

 

編集画面で編集が完了したら、「公開」設定をして、「変更を保存」をクリックします。すると設置設定に遷移します。

5.フォーム編集画面

 

設置設定では、以下のようにボタン形式でサイトに埋め込む(Javascript方式)とiframe、リンク形式、HTML形式の大きく4つの設置方法があります。自社のWEBサイトや方法に会う形での設置方法を選択しましょう。

6. フォームの設置方法の選択

次の章からは具体的にそれぞれの設置方法について、具体的な設置方法を確認していきます。

WordPressにボタン形式で設置する

Tayoriでは指定のコードをWebサイトに埋め込むことで、お問合せフォームを開くためのボタンを表示することが可能です。ボタンをクリックするとモーダルウィンドウ形式でフォームが画面に覆いかぶさるように表示されます。

Tayori_コード_表示

Tayori_コード_表示2

以下はコード埋め込みでの設置手順です。

既にフォーム作成済みの方は、「設置」をクリックし、設置方法として「丸型ボタン方式」か「四角型ボタン方式」を選びます。

6. フォームの設置方法の選択

画面遷移に従ってボタンのデザインや色、表示位置を選択します

7. ボタン形式設置

 

設置するサイトのドメインを入力した後で、表示されるコードをコピーします。

8.ボタン形式、埋め込みコードの出力

フォームを設置するサイトのWordpress管理画面を開き、外観 > テーマの編集 からテーマフッター(footer.php)を開き、</body>(body要素終了タグ)の直前にコピーをしたコードを貼り付けて完了です。

Tayori_wp

設置をしたあとは実際にWebサイトでボタンが表示されているか確認してみましょう。

Tayori_リンク_設置4

 

iframe形式でフォームをWordpressに埋め込み

Tayoriではiframeでフォームを設置することも可能です。iframeでフォームを設置することでユーザーは別ページに遷移することなく、フォーム入力ができます。

iframeで設置した場合、こちらのようにフォームが表示されます。

テスト

 

以下はiframeでフォームを設置する手順です。

フォーム管理画面で設置したいフォームを選び、「設置」をクリックし、設置方法として「iframe」を選びます。

6. フォームの設置方法の選択

必要に応じてiframeで表示するフォームのサイズを変更して、コードをコピーします。

10. iframeコード

 

WordPress管理画面を開き、リンクを設置したい固定ページや投稿ページのHTML編集画面で、Tayoriからコピーをしたiframeのコードを貼り付けます。これでフォームの設置は完了です。プレビュー画面などで正しく表示がされているかを確認してみましょう。

Tayori_iframe_設置4

 

また、iframeでフォームを設置する場合は以下の属性で表示を調整することも可能です。

  • width :iframeで表示する部分の幅を調整します。
  • height:iframeで表示する部分の高さを調整します。
  • scrolling:iframeで表示する枠にスクロールバーを表示するかどうかを選べます。scrolling=”yes”でスクロールバーを表示、scrolling=”no”でスクロールバーを非表示にできます。scrolling=”auto”とすると、必要な場合のみスクロールバーを表示します(初期値ではscrolling=”auto”になっています)。
  • frameborder:iframeのフレームの境界線の表示を調整できます。frameborder=”0″ を指定することで境界線を消すことができます。

例えば、スクロールバーと境界線をどちらも非表示にする場合にはこのようなコードになります。

<div style=”width:100%;height:600px;overflow:auto;-webkit-overflow-scrolling:touch;”><iframe src=”フォームのURL” width=”100%” height=”100%” scrolling=”no” frameborder=”0″></iframe></div>

さらにデザインをカスタマイズをされたい場合には、以下に紹介するHTMLでの設置が適しています

HTMLでの埋め込み

Tayoriのスタータープラン、プロフェッショナルプランではHTMLでフォームを埋め込むこともできます。HTMLでの設置の場合は、独自に用意したCSSを適用することで柔軟にデザインを変更することができるため、最もカスタマイズ性が高い設置方法といえます。

以下はHTMLでフォームを設置する手順です。

まずフォーム管理画面で設置したいフォームを選び、「設置」をクリック。設置方法として「HTML」を選びます

6. フォームの設置方法の選択

HTMLで設置をする場合は、フォーム送信後にリダイレクトされるページを選ぶことができるので、リダイレクト先のURLを設定します。

11. html方式設置

設置サイトのドメインを指定し、表示されるHTMLをコピーします。

12. HTMLコード出力

WordPress管理画面を開き、リンクを設置したい固定ページや投稿ページのHTML編集画面で、TayoriからコピーをしたHTMLのコードを貼り付けます。これでフォームの設置自体は完了です。

Tayori_HTML_設置4

 

ただHTML設置の場合は、初期状態ではデザインが施されていない状態となりますので、CSSを使ってお好みのデザインを適用してみましょう。

※HTML形式で設置の場合、公開後に一度でも「変更を保存」再度押してしまうと再度設置する必要があるので注意が必要です。(アラートでも表示されます)

まとめ

いかがでしたでしょうか。Tayoriを活用すれば、無料から簡単に問い合わせフォームを様々な方法で設置が可能です。

Tayori」は、無料からフォーム、FAQ(Q&A)ページが簡単に作成できるツールです。これまでに、40,000アカウントの導入実績があります。お問い合わせ管理など、チームで顧客対応を見える化して、様々な業務の効率化を支援してきました。無料で登録後にすぐに利用可能で、最短1分で導入が可能です。

まずは無料版からお試しください。

Tayori 公式サイトはこちら

 

フォーム・FAQ作成ツール Tayoriフォーム FAQ作成ツール Tayoriフォーム FAQ作成ツール Tayori

関連記事

導入4万アカウント突破 無料から使えるフォーム・FAQ作成ツール Tayori

公式サイトへ

閉じる