問い合わせフォームのプレビュー

ハワイの鳥

エックスサーバーは高機能! お問い合わせフォームも超簡単に作れるよ!

「エックスサーバーでお問い合わせフォームを作れるの?」「お問い合わせフォームの作り方は簡単?」というかたへ。

Xserver(エックスサーバー)ユーザーの私が、エックスサーバーの問い合わせフォーム「メールフォーム」の作り方を図解します。簡単すぐに、お問い合わせフォームをブログに設置できますよ!


この記事を書いた人

・ウェブの初級資格を保有、PCインストラクター経験が少しあり
・ブログに本気で取り組む、A8アフィリエイトBASE(2020年)を1年間受講し学んだ
・賢威8 WordPress版を選び、挫折しないでブログを作成できた

エックスサーバーのお問い合わせフォームとは

エックスサーバー(問い合わせフォーム表示)

ハワイの鳥

CGI(サーバーでプログラムを動作させる仕組み)を使った、エックスサーバー独自のお問い合わせフォーム!

Xserver(エックスサーバー)のお問い合わせフォーム「メールフォーム」は、問い合わせのためのメールフォームを、簡単にサイトに設置できる機能。

設定後、サイトにタグを入れるだけで、問い合わせフォームを簡単に設置できるので、とても便利です。お問い合わせフォーム(メールフォーム)でできることは、次のとおり。

カスタマイズで、希望のお問い合わせフォームを作れるので、企業サイトにもおすすめですよ!

  • お問い合わせの項目設定(カスタマイズ)
  • メールフォームのデザイン設定
  • メールフォームの自動返信設定

エックスサーバーのお問い合わせフォームの作り方

エックスサーバー(問い合わせフォーム設定)

出典:Xserver(エックスサーバー

ハワイの鳥

基本のお問い合わせフォームは、設定だけで表示されるよー!

Xserver(エックスサーバー)のお問い合わせフォーム、「メールフォーム」作り方を図解しましょう。まずは、サーバーパネルにログインし、「ホームページ」の「CGIツール」をクリックします。

エックスサーバー(問い合わせフォーム設定2)

出典:Xserver(エックスサーバー

「メールフォーム」の「一覧・インストール」をクリックします。

エックスサーバー(問い合わせフォーム設定3)

出典:Xserver(エックスサーバー

エックスサーバーの問い合わせフォームを設置したい、ドメイン(url)を選びます。ドメイン名右の「選択する」をクリックしましょう。

エックスサーバー(問い合わせフォーム設定4)

出典:Xserver(エックスサーバー

メールフォームインストール」タブをクリックして開き、問い合わせフォーム(メールフォーム)のための、下記の項目を設定します。

ログインIDとパスワードは、問い合わせフォーム(メールフォーム)の設定画面にログインするための、IDとパスワードです。自分で決められます。設定後、「確認画面へ進む」ボタンをクリックします。

  • メールフォームURL:インストール先のフォルダ名(自分で決めて入力
  • 管理ツールログインID:メールフォーム設定画面のログインID(ユーザーID)
  • 管理ツールパスワード:メールフォーム設定画面のログインパスワード
  • 受信メールアドレス:お問い合わせを受信したいメールアドレス

エックスサーバー(問い合わせフォーム設定5)

出典:Xserver(エックスサーバー

確認画面が表示されます。「インストールする」ボタンをクリックします。

エックスサーバー(問い合わせフォーム設定6)

出典:Xserver(エックスサーバー

問い合わせフォーム(メールフォーム)のインストールが完了しました! 問い合わせフォームを設定するための、設定画面のurlが表示されます。クリックして、アクセスをしてみましょう。

エックスサーバー(問い合わせフォームログイン)

出典:Xserver(エックスサーバー

問い合わせフォーム(メールフォーム)設定のログイン画面です。自分で決めた、ログインID(ユーザーID)とパスワードを入力して、ログイン!

エックスサーバー(問い合わせフォーム)

出典:Xserver(エックスサーバー

基本の問い合わせフォームは、出来上がっています。そのまま使うのもよし、カスタマイズして使うのもよしですよ。

エックスサーバー(問い合わせフォーム表示)

Xserver(エックスサーバー)のお問い合わせフォームのデフォルトです。名前、連絡先メールアドレス、お問い合わせ内容だけの、シンプルなメールフォームです。

エックスサーバー(問い合わせフォームのタグ)

出典:Xserver(エックスサーバー

カスタマイズなし、そのままのお問い合わせフォームを、ブログに設置してみました。設置も簡単! 「設定用のHTMLタグ」タブをクリックして開き、設定用のHTMLタグが表示されるのでコピーし、ブログに貼り付けするだけです。

エックスサーバー(問い合わせフォームのタグ設置)

記事に貼り付けしました。ブログのフッター(下部)に入れるなど、問い合わせフォームを希望の場所に、簡単に設置できますよ!

エックスサーバー(問い合わせフォームのテスト)

プレビューです。「お問い合わせフォーム」の文字をクリックしてみます。

エックスサーバー(問い合わせフォーム送信)

お問い合わせフォームが表示されました。入力をして、自分のメールアドレスに送ってみました。

エックスサーバー(問い合わせフォーム送信完了)

お問い合わせの確認表示も出ます。親切・安心ですね!

エックスサーバー(問い合わせフォーム送信完了2)

送信後、お問い合わせ完了の表示も出ます。

エックスサーバー(問い合わせメールの受信)

メールアドレスに、お問い合わせの内容が届きました。

お問い合わせフォームのカスタマイズ

エックスサーバー(問い合わせフォーム編集)

出典:Xserver(エックスサーバー

ハワイの鳥

エックスサーバーのお問い合わせフォームは、項目の追加と並べ替えも超簡単!

Xserver(エックスサーバー)のお問い合わせフォーム、「メールフォーム」のカスタマイズも簡単です。項目を追加して、希望のお問い合わせフォームを作ることができました。図解しましょう。

画面の右に、「使用可能な項目」が表示されます。フォームに入れたい項目の追加は、項目の「追加」ボタンをクリックするだけ!

お問い合わせフォーム(メールフォーム)に追加できる項目は、次のとおりです。

  • 名前
  • ふりがな
  • URL
  • 年齢
  • 性別
  • 郵便番号
  • 都道府県
  • 住所
  • TEL
  • FAX
  • 連絡先メールアドレス
  • 件名
  • お問い合わせ内容

下記の「予備項目」もあり、自分で自由に項目を作ることもできます。自在にメールフォームを作ることができますね!

  • 希望のテキスト
  • 希望のテキストボックス
  • プルダウンメニュー
  • ラジオボタン(チェックボタン)
  • チェックボックス

エックスサーバー(問い合わせフォーム項目追加)

出典:Xserver(エックスサーバー

都道府県、住所、TELを追加してみました。追加した項目は、図のように、左に表示されます。下の「設定を保存する(確認)」ボタンをクリックします。

エックスサーバー(問い合わせフォーム編集保存)

出典:Xserver(エックスサーバー

メールフォームの確認画面が表示されます。「設定を保存する(確定)」ボタンをクリックすると、設定が完了です! 「プレビュー」ボタンをクリックして、完成した問い合わせフォームを見てみましょう。

エックスサーバー(問い合わせフォームプレビュー)

カスタマイズをして作った、エックスサーバーのお問い合わせフォームです。都道府県は、全県からプルダウンリストで選べますよ。

お問い合わせフォームのデザイン変更

問い合わせフォームのデザイン変更

ハワイの鳥

色をクリックするだけで、オリジナルのフォームがすぐ完成!

Xserver(エックスサーバー)のお問い合わせフォーム、「メールフォーム」のデザインを変更してみましょう。「デザインの設定」タブをクリックして開きます。メールフォームのサイズも変更できますよ。

問い合わせフォームの色変更

出典:Xserver(エックスサーバー

色の変更も超簡単でした! フォーム項目の「色見本」の色をクリックするだけ。

問い合わせフォームの文変更

出典:Xserver(エックスサーバー

お問い合わせフォーム内の文を変えるのも、簡単でした。文を変えるだけでOKです。デザインと文を変更後、「設定を保存する(確認)」ボタンをクリックします。

問い合わせフォームの設定保存

出典:Xserver(エックスサーバー

確認画面が表示されます。「設定を保存する(確定)」ボタンをクリックしましょう。

問い合わせフォームのプレビュー

プレビュー」ボタンで、デザインを変更した、お問い合わせフォームを見てみましょう! 色も本当に簡単にカスタマイズできました。

お問い合わせフォームの自動返信設定

問い合わせフォーム(自動返信メール設定)

出典:Xserver(エックスサーバー

ハワイの鳥

自動返信設定も、タブをクリックして文を変えるだけ!

Xserver(エックスサーバー)のお問い合わせフォーム、「メールフォーム」の自動返信設定も簡単です。「自動返信メールの設定」タブをクリックして開き、文を入力するだけでした。

問い合わせフォーム例(全項目)

問い合わせフォーム例

ハワイの鳥

エックスサーバーの問い合わせフォームを、全項目で作るとこうなる! 

全項目問い合わせフォームを作ってみました。参考にしてみてください。

問い合わせフォーム例2

追加できる項目を、すべて追加!

問い合わせフォーム例3

予備項目にある、オリジナルのテキスト、テキストボックス、プルダウンメニュー(リスト)、ラジオボタン(チェックできるボタン)、チェックボックスも入れてみました。

問い合わせフォームの項目追加

右の項目名の「追加」ボタンをクリックするだけ。追加すると、図のように左に表示されます。

問い合わせフォーム(チェックボックス等)

ラジオボタン(選んでチェックできる)や、チェックボックスを作るのも簡単でした。エックスサーバーは、ウェブの専門知識がなくても、簡単すぐに、問い合わせフォームを作ることができました。

お問い合わせフォームのまとめ

エックスサーバー公式サイト(キャンペーン)

出典:Xserver(エックスサーバー)公式サイト

ハワイの鳥

好きな色・好きな項目で、お問い合わせフォームを超簡単に作ってみよう!

Xserver(エックスサーバー)のお問い合わせフォーム、「メールフォーム」をご紹介しました。エックスサーバーは、高性能なだけではなく、高機能。メールフォームの設置も簡単で楽々です。


あわせて読みたい記事

エックスサーバー(Xserver)にしてよかった! エックスサーバーがおすすめの理由です。

エックスサーバーは、独自のWebメールシステムもあり使えます。用途にあわせてメールを使えますよ!