エックスサーバーは高機能！ お問い合わせフォームも超簡単に作れるよ！
「エックスサーバーでお問い合わせフォームを作れるの？」「お問い合わせフォームの作り方は簡単？」というかたへ。
Xserver（エックスサーバー）ユーザーの私が、エックスサーバーの問い合わせフォーム「メールフォーム」の作り方を図解します。簡単すぐに、お問い合わせフォームをブログに設置できますよ！
・SEOライター / エディター、オウンドメディア・コンサルタント
・ウェブの初級資格を保有、PCインストラクター経験が少しあり
・A8アフィリエイトBASE 2020で、1年間ブログ作成を学んだ
・賢威8 WordPress版でブログを作成！ 収益も上がっている
※PR広告を含みます。
エックスサーバーのお問い合わせフォームとは
CGI（サーバーでプログラムを動作させる仕組み）を使った、エックスサーバー独自のお問い合わせフォーム！
Xserver（エックスサーバー）のお問い合わせフォーム「メールフォーム」は、問い合わせのためのメールフォームを、簡単にサイトに設置できる機能。
設定後、サイトにタグを入れるだけで、問い合わせフォームを簡単に設置できるので、とても便利です。お問い合わせフォーム（メールフォーム）でできることは、次のとおり。
カスタマイズで、希望のお問い合わせフォームを作れるので、企業サイトにもおすすめですよ！
- お問い合わせの項目設定（カスタマイズ）
- メールフォームのデザイン設定
- メールフォームの自動返信設定
エックスサーバーのお問い合わせフォームの作り方
出典：Xserver（エックスサーバー）
基本のお問い合わせフォームは、設定だけで表示されるよー！
Xserver（エックスサーバー）のお問い合わせフォーム、「メールフォーム」の作り方を図解しましょう。まずは、サーバーパネルにログインし、「ホームページ」の「CGIツール」をクリックします。
出典：Xserver（エックスサーバー）
「メールフォーム」の「一覧・インストール」をクリックします。
出典：Xserver（エックスサーバー）
エックスサーバーの問い合わせフォームを設置したい、ドメイン（url）を選びます。ドメイン名右の「選択する」をクリックしましょう。
出典：Xserver（エックスサーバー）
「メールフォームインストール」タブをクリックして開き、問い合わせフォーム（メールフォーム）のための、下記の項目を設定します。
ログインIDとパスワードは、問い合わせフォーム（メールフォーム）の設定画面にログインするための、IDとパスワードです。自分で決められます。設定後、「確認画面へ進む」ボタンをクリックします。
- メールフォームURL：インストール先のフォルダ名（自分で決めて入力）
- 管理ツールログインID：メールフォーム設定画面のログインID（ユーザーID）
- 管理ツールパスワード：メールフォーム設定画面のログインパスワード
- 受信メールアドレス：お問い合わせを受信したいメールアドレス
出典：Xserver（エックスサーバー）
確認画面が表示されます。「インストールする」ボタンをクリックします。
出典：Xserver（エックスサーバー）
問い合わせフォーム（メールフォーム）のインストールが完了しました！ 問い合わせフォームを設定するための、設定画面のurlが表示されます。クリックして、アクセスをしてみましょう。
出典：Xserver（エックスサーバー）
問い合わせフォーム（メールフォーム）設定のログイン画面です。自分で決めた、ログインID（ユーザーID）とパスワードを入力して、ログイン！
出典：Xserver（エックスサーバー）
基本の問い合わせフォームは、出来上がっています。そのまま使うのもよし、カスタマイズして使うのもよしですよ。
Xserver（エックスサーバー）のお問い合わせフォームのデフォルトです。名前、連絡先メールアドレス、お問い合わせ内容だけの、シンプルなメールフォームです。
出典：Xserver（エックスサーバー）
カスタマイズなし、そのままのお問い合わせフォームを、ブログに設置してみました。設置も簡単！ 「設定用のHTMLタグ」タブをクリックして開き、設定用のHTMLタグが表示されるのでコピーし、ブログに貼り付けするだけです。
記事に貼り付けしました。ブログのフッター（下部）に入れるなど、問い合わせフォームを希望の場所に、簡単に設置できますよ！
プレビューです。「お問い合わせフォーム」の文字をクリックしてみます。
お問い合わせフォームが表示されました。入力をして、自分のメールアドレスに送ってみました。
お問い合わせの確認表示も出ます。親切・安心ですね！
送信後、お問い合わせ完了の表示も出ます。
メールアドレスに、お問い合わせの内容が届きました。
お問い合わせフォームのカスタマイズ
出典：Xserver（エックスサーバー）
エックスサーバーのお問い合わせフォームは、項目の追加と並べ替えも超簡単！
Xserver（エックスサーバー）のお問い合わせフォーム、「メールフォーム」のカスタマイズも簡単です。項目を追加して、希望のお問い合わせフォームを作ることができました。図解しましょう。
画面の右に、「使用可能な項目」が表示されます。フォームに入れたい項目の追加は、項目の「追加」ボタンをクリックするだけ！
お問い合わせフォーム（メールフォーム）に追加できる項目は、次のとおりです。
- 名前
- ふりがな
- URL
- 年齢
- 性別
- 郵便番号
- 都道府県
- 住所
- TEL
- FAX
- 連絡先メールアドレス
- 件名
- お問い合わせ内容
下記の「予備項目」もあり、自分で自由に項目を作ることもできます。自在にメールフォームを作ることができますね！
- 希望のテキスト
- 希望のテキストボックス
- プルダウンメニュー
- ラジオボタン（チェックボタン）
- チェックボックス
出典：Xserver（エックスサーバー）
都道府県、住所、TELを追加してみました。追加した項目は、図のように、左に表示されます。下の「設定を保存する（確認）」ボタンをクリックします。
出典：Xserver（エックスサーバー）
メールフォームの確認画面が表示されます。「設定を保存する（確定）」ボタンをクリックすると、設定が完了です！ 「プレビュー」ボタンをクリックして、完成した問い合わせフォームを見てみましょう。
カスタマイズをして作った、エックスサーバーのお問い合わせフォームです。都道府県は、全県からプルダウンリストで選べますよ。
お問い合わせフォームのデザイン変更
色をクリックするだけで、オリジナルのフォームがすぐ完成！
Xserver（エックスサーバー）のお問い合わせフォーム、「メールフォーム」のデザインを変更してみましょう。「デザインの設定」タブをクリックして開きます。メールフォームのサイズも変更できますよ。
出典：Xserver（エックスサーバー）
色の変更も超簡単でした！ フォーム項目の「色見本」の色をクリックするだけ。
出典：Xserver（エックスサーバー）
お問い合わせフォーム内の文を変えるのも、簡単でした。文を変えるだけでOKです。デザインと文を変更後、「設定を保存する（確認）」ボタンをクリックします。
出典：Xserver（エックスサーバー）
確認画面が表示されます。「設定を保存する（確定）」ボタンをクリックしましょう。
「プレビュー」ボタンで、デザインを変更した、お問い合わせフォームを見てみましょう！ 色も本当に簡単にカスタマイズできました。
お問い合わせフォームの自動返信設定
出典：Xserver（エックスサーバー）
自動返信設定も、タブをクリックして文を変えるだけ！
Xserver（エックスサーバー）のお問い合わせフォーム、「メールフォーム」の自動返信設定も簡単です。「自動返信メールの設定」タブをクリックして開き、文を入力するだけでした。
問い合わせフォーム例（全項目）
エックスサーバーの問い合わせフォームを、全項目で作るとこうなる！
全項目で問い合わせフォームを作ってみました。参考にしてみてください。
追加できる項目を、すべて追加！
予備項目にある、オリジナルのテキスト、テキストボックス、プルダウンメニュー（リスト）、ラジオボタン（チェックできるボタン）、チェックボックスも入れてみました。
右の項目名の「追加」ボタンをクリックするだけ。追加すると、図のように左に表示されます。
ラジオボタン（選んでチェックできる）や、チェックボックスを作るのも簡単でした。エックスサーバーは、ウェブの専門知識がなくても、簡単すぐに、問い合わせフォームを作ることができました。
まとめ
出典：Xserver（エックスサーバー）公式サイト
好きな色・好きな項目で、お問い合わせフォームを超簡単に作ってみよう！
Xserver（エックスサーバー）のお問い合わせフォーム、「メールフォーム」をご紹介しました。エックスサーバーは、高性能なだけではなく、高機能。メールフォームの設置も簡単で楽々です。
あわせて読みたい記事
ブログのWordPressレンタルサーバーは決まり！ 初心者が失敗しない、おすすめのサーバーを、徹底比較してランキング！ 高速・安定のサーバーを選ばないと、SEOで不利になります。
「WordPressのサーバー選びに迷っている」「ブログにおすすめのレンタルサーバは？」というかたへ。WordPressブログを運営する、A8アフィリエイトBASE2020でブログ作成を学んだ私が、ブログに最適・おすすめのWordPressレンタルサーバーを徹底比較！
エックスサーバー（Xserver）を使ってよかった！ ブログには、エックスサーバーが1番おすすめの理由です。
「Xserver（エックスサーバー）の評判は、ぶっちゃけどう？」「WordPress（ワードプレス）に最適なサーバーは？」というかたへ。エックスサーバーがWordPressに最適な理由をご紹介！
1番簡単なWordPressの始め方！ エックスサーバーのクイックスタートを、初心者向けに完全図解しました。
「WordPress（ワードプレス）でブログを始めるには？」「1番簡単な始め方は？」というかたへ。ブログを運営する私が、初心者も約20分で開設できる、1番簡単なブログの始め方を完全図解！
エックスサーバーは、独自のWebメールシステムもあり使えます。用途にあわせてメールを使えますよ！
「エックスサーバーのWebメールって何？」「Webメールを使うメリットは？」というかたへ。エックスサーバーユーザーの私が、エックスサーバーのWebメールの使い方を図解します。
