エックスサーバーは高機能! お問い合わせフォームも超簡単に作れるよ!
「エックスサーバーでお問い合わせフォームを作れるの?」「お問い合わせフォームの作り方は簡単?」というかたへ。
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メールの使い方を図解します。