自サイトへの無料問い合わせフォームの埋め込み方についてご存じでしょうか？
現在多くの無料問い合わせフォームが存在します。
無料問い合わせフォームは、こちらでご紹介する方法を使って、自サイトに簡単に埋め込むことができます。
では、一体どうやって無料問い合わせフォームを埋め込むのでしょうか？
今回は 自サイトへの無料問い合わせフォームの埋め込み方 についてわかりやすくご紹介します。
目次
自サイトへの無料問い合わせフォームの埋め込み方の流れ
こちらでは自サイトへの無料問い合わせフォームの埋め込み方の流れについてわかりやすくご紹介させていただきます。
無料問い合わせフォームについては、Googleフォームを使ってご説明します。
ほとんどの無料問い合わせフォームについても、ほぼ似たような流れになります。
①Googleフォームにアクセスする
❶最初に検索エンジンで「Googleフォーム」を検索します。
❷Googleフォームのホームページに入ります。
❸「パーソナル」と「ビジネス」があるので「パーソナル」をクリックします。
❹「新しいフォームを作成」のページが反映されます。
左から2つ目の「連絡先情報」をクリックします。
ただし、オリジナル「問い合わせフォーム」を作るのであれば「空白」をクリックしてもOKです。
❺画面が「連絡先情報」の編集ページに変わります。
❻「連絡先情報・名前・メールアドレス・住所・電話番号・コメント」の項目があるので、必要な項目を編集します。
❼編集の仕方は、編集したい項目にカーソルを合わせ、クリックするだけです。
ここでは試しに「連絡先情報 → 問い合わせ」に変更します。
連絡先情報のままでもOKです。
❽必要な項目を編集終えたら、問い合わせのフォーマットは完了です。
➁設定を編集する
「設定」とは「問い合わせフォーム」の機能を編集することです。
ページは「連絡先情報」のままでOKです。
❶「連絡先情報」のページの右上にある「歯車」のマークをクリックします。
❷「設定」のページが反映されます。
❸「設定」の「全般タブ」の「回答を1回に制限する」のチェックをはずします。
チェックをはずすことで、解答者はグーグルアカウントでのログインなしでも解答することができます。
ただし、こちらは自由です。
❹「設定」のページの右下にある「保存」をクリックします。
❺これで「設定」は完了です。
➂コードをコピー
こちらでは「問い合わせフォーム」のコードをコピーする流れについてご説明します。
❶「保存」をクリックすると「連絡先情報」のページに戻ります。
❷ページの右上にある「送信」のボタンをクリックします。
❸「フォームを送信」のページが反映されます。ページの上部中央にある「＜＞」をクリックします。
❹「＜＞」の真下に
「HTML を埋め込む」と
「<iframe src=”https://docs.google.com/forms/d/e/1FAIpQLSeViDp-eyVRZX0SM45d98p3yO5tPxLlfygS7FbVPHSjytPcRg/viewform?embedded=true” width=”640″ height=”943″ frameborder=”0″ marginheight=”0″ marginwidth=”0″>読み込んでいます…</iframe>」
のショートコードが表示されます。
❺コードをクリックして、選択されたら、右下にある「コピー」のボタンを押します。
❻左下に「クリップボードにコピーしました。」のポップが出たら、コピー完了です。
④フォームの「幅」「高さ」の調整
ここでは「問い合わせフォーム」の「幅」「高さ」の調整・編集の仕方についてご説明します。
❶フォームのコードはデフォルト値では
「width=”640″ 」
「height=”943″」
となっています。
❷このままでは縦長になるので、横長になるように長さを編集します。
「width=”100%” 」
「height=”800″」
と編集することで、横長フォームに反映されます。
❸パソコン画面対応・スマホ画面対応など、
実際反映されたものを確認して、後から「幅」「高さ」を変更することも可能です。
⑤自サイトの固定ページに入る
ここでは自サイトの固定ページに入り、タイトルを入力するところまでの流れについてご説明します。
自サイトはワードプレスを使います。
❶自サイトにログインします。
❷ダッシュボードに入り、左側メニューバーの「固定ページ」をクリックします。
❸固定ページ左上部の「新規追加」をクリックします。
❹ビジュアルエディターのページが表示されます。
❺ビジュアルエディターのページの右上の「・」が3つ並んでいるボタンをクリックします。
すると右側にメニューバーが出現します。
❻メニューバーの真ん中くらいに、エディターの項目があります。
コードエディターのボタンをクリックしてページを開いてください。
❼画面がコードエディターに変わります。
❽ページの中央に「タイトルを追加」があるので「問い合わせ」をテキストで入力します。
「タイトルを追加」に何かテキストを入れないと反映されないのでご注意ください。
ここまでで、自サイトの固定ページに入り、タイトルを入力するところまでの流れが完了です。
⑥「問い合わせフォーム」のコードを埋め込む
ここでは「問い合わせフォーム」のコードを埋め込む流れについてご説明します。
❶「問い合わせ」を入力した窓の真下に「テキストまたはHTMLを入力して開始」の窓があります。
その窓に「問い合わせフォーム」のコードを貼り付けます。
❷貼り付けて「プレビュー」をクリックして、反映したものを確認します。
問題がなければ「公開」をクリックして「問い合わせフォーム」のコードの埋め込み作業は完了になります。
