toSNSでシェアツイートTayoriはお問い合わせフォームやWebアンケート、チャットなどを簡単に導入できるカスタマーサポートツールです。お客様からいただいた要望は定期的に反映するようにアップデートが実施されています。このページではHTMLコード形式でのフォーム設置方法について説明します。TayoriのHTMLコード形式とはTAYORIには4つのフォーム設置形式があります。HTMLコード形式とはそのうちの一つであり、スタータープラン以上のユーザーだけが利用可能となっています。(料金の詳細は料金プランを参照ください)以下は簡単に各フォーム設置形式の特徴をまとめたものです。コード埋め込み形式Tayoriが作成したJavascriptのコードをWEBページに埋め込んでもらうことで画面端にボタンを表示することが可能。ボタンをクリックもしくはタップするとお問い合わせフォームに遷移します。iframe形式Tayoriが作成したiframe(インラインフレーム)形式のコードをWEBページに埋め込んでもらうことによって、別ページに遷移することなくお問い合わせフォームを表示します。リンク形式Tayoriが作成したリンクをWEBページに埋め込んでもらうことによって、お問い合わせフォームに遷移するためのリンクを表示します。HTMLコード形式Tayoriが作成したHTMLコードをWEBページに埋め込んでもらうことでお問い合わせフォームを表示します。HTMLコード形式を選択することで、お問い合わせフォームを構成する『お名前』や『メールアドレス』などをHTMLコードのまま生成できます。クラス名などを付与することによってお客様が用意したCSSや画像など各種デザインを適用して自由にカスタマイズすることが可能です。フォームの作成・編集方法フォーム管理画面からHTMLコード形式で新しくフォームを作る場合は『新規フォーム作成』、既存のフォームをHTMLコード形式に変更する場合は『編集』をクリックします。『新規フォーム作成』をクリックした場合は、フォームのテンプレートを選択して『次へ』をクリックします。『編集を開始』をクリック。『新規項目の追加』をクリックするとこのページの『フォーム項目の種類』で紹介した各項目が表示されるので、任意のものを再度クリックします。今回は『担当者名』を選択しました。クリックした『担当者名』がフォームの末尾に追加されました。必要な項目をすべて追加したら画面右上にある『変更を保存』をクリックして保存します。以上でフォームの作成と編集は完了です。フォーム項目の種類フォームに追加できる各種項目は以下になります。姓名を入力するテキストボックスを表示します。お名前カナ姓名のカナを入力するテキストボックスを表示します。名前(姓名別)姓と名に入力欄が分かれているテキストボックスを表示します。名前カナ(姓名別)姓(カナ)と名(カナ)に入力欄が分かれているテキストボックスを表示します。入力するテキストボックスを表示します。選択するプルダウンリストを表示します。順に4つのテキストボックスを表示します。住所(一行)住所を入力するテキストボックスを表示します。会社名を入力するテキストボックスを表示します。電話番号テキストボックスを3つ表示して、○○○-○○○-○○○形式で入力します。電話番号(ハイフン有り)電話番号を入力するテキストボックスを表示します。順にテキストボックスとセレクトボックスを表示します。メールアドレスメールアドレスを入力するテキストボックスを表示します。一行テキスト設問タイトルを自由に設定できるテキストボックスを表示します。複数行テキスト複数行入力可能なテキストエリアを表示します。日付を入力するテキストボックスを表示します。カウンターマイナスボタンとプラスボタンで数を増減できる項目を表示します。ファイルアップロードファイルをアップロードできるファイルアップローダーを表示します。複数選択(チェックボックス)複数選択できるチェックボックスを表示します。単一選択(ラジオボタン)単一選択できるラジオボタンを表示します。入力できるテキストエリアを表示します。子要素あり)子要素を持つプルダウンリストを表示します。改ページ改ページします。参考:フォーム、Htmlサンプル集、種類別Tayoriを活用したフォームの作り方HTMLコードの生成方法フォーム管理画面からHTMLコード形式で設置したいフォームの『設置』をクリックします。画面を下にスクロールして『HTMLコード方式』を選択して『次へ』をクリックします。設置サイトドメインのテキストボックスにフォームを設置するサイトのドメインを入力して『ドメインを追加』をクリックします。ドメインの登録が完了したら『コードを生成』をクリック。サイトに貼り付けるためのHTMLコードが表示されるので、『コピー』をクリックしてフォームを表示したいサイトのページにペーストします。『設置を終了』をクリックすると画面を閉じることが可能です。以上でHTMLコードの生成は完了です。HTMLコードをWordpressに埋め込む方法ここでは『フォームの作成・編集方法』で生成したHTMLコードをWordPressに埋め込む方法を説明します。今回はWordPressにあらかじめ固定ページとして用意したお問い合わせページにフォームを設置します。WordPressにログインして管理画面から固定ページをクリックします。フォームを表示する固定ページをクリックします。『HTMLコードの生成方法』の最後で生成したHTMLコードを本文に貼り付け、公開します。公開した画面を確認してみました。表示されていることがわかります。HTMLコードをWordPressに貼り付ける方法は以上です。チェックが自動で行われるため、該当するフォームが無いと正常に送信できません。class=”error-message”></div>」にメッセージが挿入され表示されます。class=”parts-error-message”></div>」にメッセージが挿入され表示されます。エラーメッセージの変更は出来ません。HTMLの構造(idやタグ)を変更してしまうと動作しない事がありますのでご注意ください。*classの付与は可能です。JavaScriptにより自動で生成されるのでご注意ください。設置後にフォームを編集して保存しなおすと、設置していたHTMLと保存後のHTMLが変更されますので再設置が必要となります。*変更される主な内容は「変更したフォーム」「各フォームに付与さているID」フォーム非公開時はHTMLを生成出来ず、送信されても受付けることが出来ません。日付入力フォームはカレンダー機能などが無くテキストボックスとなっています。日付のチェックが入りますので、不正な値が送信されるとエラーとなりますのでご注意ください。プルダウンやラジオボタン、チェックボックスの値(value)を変更すると正常に送信出来ません。JavaScriptを利用する場合、TayoriのJavaScriptと、処理や命名規則、名前などがぶつかるとエラーが発生いたします。JavaScriptで各フォームの項目を変更したり、CSSによりスタイルを変えた場合、正常に動作しない場合がございます。*JavaScriptの場合は「appendChildやremoveChild、createElementなど」、CSSの場合は「filterでbody全体に掛けていたり、postionを指定した場合」HTMLタグやCSSの記述方法などについてはサポートしていません。料金プラン運営会社フォームチャットFAQアンケートFacebookTwitter利用規約プライバシーポリシ。