Tayoriで作成したフォームをWordPressで設置する方法

2019/08/16How to

SNSでシェア

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

 

SNSでシェア

Tayoriを無料で使ってみる

無料でお問い合わせフォームやFAQをあなたのウェブサイトに簡単に設置

今すぐ始める

関連記事

Tayoriのおたよりを購読する

Twitterでフォロー

facebookでいいね!

RSSで購読