【誰でもできる】無料・15分でお問い合わせページを作る方法

blog-hero-img費用0円、作業時間15分でお問い合わせページを作ります。パソコン苦手のビギナーでも簡単にできる方法です。

pen-icon2022.01.13

align-left-icon

目次

Profile Pic

この記事の筆者：三好アキ（ウェブエンジニア）


「売り上げが伸びない」、「ウェブサイトから問い合わせが来ない」など、ウェブでお困りのお客さまの課題解決を、最新の知見を活かして行なっています。海外滞在が長く、日本語の情報が少ないJamstackやヘッドレスCMSなど最新のウェブテクノロジー、ウェブマーケティングに精通。事業について詳しくはこちらをご覧ください。


ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。本に関するインタビュー記事はこちら。



無料で作れるお問い合わせページ

ここ最近、近隣エリアでビジネスをされている方のホームページを見ていると、「お問い合わせ」ページのないホームページが数多くあるのに気が付きました。

お問い合わせページを作る有料サービスもありますが、実は無料で作れます。

本記事の内容は、ホームページやネットの知識がない完全な初心者の方でもできる、お問い合わせページの作り方です。

費用は0円、作業時間は15分ほどで、下のようなお問い合わせページが完成します。

public

下のアドレスからアクセスできます。

• my-contact-page-monotein.netlify.app

本記事ではマックを使って進めていくので、「ステップ１」で出てくる「テキストエディット」に関して、ウィンドウズの方は「メモ帳」を使ってください。

ステップ１（準備）

「アプリケーション」から「テキストエディット」を開きます。

application-textedit

画面上部メニューの「テキストエディット」から「環境設定」クリックします。

preference

次に環境設定下部の「すべてをデフォルトに戻す」ボタンを押します。

reset.jpg

次は上の方にある「フォーマット」欄で、「標準テキスト」を選択します。

plaintext

そして「開く/保存」タブをクリックし、「HTMLファイルを、フォーマットしたテキストではなくHTMLコードとして表示」にチェックを入れます。

display-html

いま加えた変更を反映させるため、一度テキストエディットを終了させます。

上部メニュー画面「テキストエディット」をクリックし、「テキストエディットを終了」を選択します。

close-text-edit

再びテキストエディットを開きます。

application-textedit

そこに下の文字をすべてコピーして貼り付けてください。


<body style="margin: 0; height: 100vh; background: rgb(90,141,252); background: linear-gradient(18deg, rgba(90,141,252,1) 0%, rgba(99,255,212,1) 100%);">
    <div style="display: flex; justify-content: center; align-items: center;">
        <div style="width: 65%;">
            <h1>お問い合わせ</h1>
            <p>お気軽にご連絡ください</p>
            <form method="post" netlify-honeypot="bot-field" data-netlify="true" name="お問い合わせ"> 
                <input type="hidden" name="form-name" value="お問い合わせ"/>
                
                <label for="name">お名前</label>  
                <br>
                <input type="text" name="name" id="name" required style="outline: none; border: none; width: 100%; border-radius: 10px; padding: 5px; margin-bottom: 20px;"/>
                <br>
                
                <label for="email">メールアドレス</label>
                <br>
                <input type="email" name="email" id="email" required style="outline: none; border: none; width: 100%; border-radius: 10px; padding: 5px; margin-bottom: 20px;"/>
                <br>
                
                <label for="textarea">ご用件</label>
                <br>
                <textarea name="message" rows="10" id="textarea" required style="outline: none; border: none; width: 100%; border-radius: 10px; padding: 5px; margin-bottom: 20px;"></textarea>
                <br>
                
                <button type="submit" style="border: none; width: 100%; border-radius: 10px; height: 30px; background-color: rgb(255, 85, 47); color: #fff; cursor: pointer;">送信</button>
            </form>
        </div> 
    </div>
</body>

下のようになります。

textedit-with-code

画面上部メニュー「ファイル」から「保存」を選びます。

savefile

保存するファイルの「名前」にはindex.htmlと入力します。「タグ」は空欄で大丈夫です。

file-name

右下の「保存」ボタンを押します。

save-button-file

この時、次のような確認画面が出ることがありますが、その場合は「".html"を使用」ボタンをクリックしましょう。

warninghtml

いま保存したファイル、index.htmlの上で右クリックし、「このアプリケーションを開く」で「Google Chrome」を選択します。

select-chrome

Googleクローム以外でも、サファリやエッジなどのお好きなウェブブラウザでも大丈夫です（index.htmlファイル自体をウェブブラウザ上にドラッグ & ドロップする方法も可能です）。

下のようにお問い合わせページが表示されます。

on-chorome

これでお問い合わせページができました。

しかし、いまここにアクセスできるのはこのコンピューターからだけです。

それでは意味がないので、次のステップではこれをネット上にあげ、誰でもアクセスして問い合わせができるようにしていきましょう。

まずその準備として、いま作ったindex.htmlファイルは剥き出しのファイルなので、これをフォルダの中に入れましょう。

index.htmlの近くで右クリックをし、「新規フォルダ」をクリックします。

new-folder

新規フォルダには「お問い合わせページ」と名前をつけておきます。

new-folder-with-name

そしてindex.htmlファイルを「お問い合わせページ」フォルダの中に移動させます。

move-file

これで次のステップへ進む準備ができました。

ステップ２（インターネット上に公開する）

このステップでは英語が出てきますが、解説を加えていくので言語には必要以上に注目しないで進んでください。

お問い合わせページの公開にはNetlifyというサービスを使います。

Netlifyは近年のホームページ開発やウェブ開発で広く使われているサービスで、当ウェブサイトもNetlifyを使っています。

下のURLをクリックしてください。

• netlify.com

右上の「Sign up」をクリックします。

netlify

まずアカウントを作る必要があるので、「Email」をクリックします。

netlify-sign-up

下の画面が開くので、自分の「Email」と好きな「Password」を入力し、アカウントを作成します。

pic3

「登録したメールアドレスに確認メールを送りました」という下のページが開くので、登録したメールアドレスのフォルダを確認します。

pic3.5

確認メールを開き、「Verify email」を押します。

pic3.8

再び「netlify.com」を開き、右上の「Login」をクリックします。

netlify-login

「Email」をクリックします。

netlify-login

登録したメールアドレスとパスワードを入力し、緑の「Log in」ボタンを押します。

netlify-login

ログインすると、ダッシュボード画面が開くので、上部にある「Sites」をクリックします。

pic4

画面の下にスクロールすると、次のようなスペースが出てきます。

pic5

ここに、先ほど作った「お問い合わせページ」フォルダをドラッグ & ドロップします。

dand-index.jpg

しばらくすると次のような画面が表示されます。赤枠のURLがサイトURLになります（URLは人それぞれ異なります）。

deployed

そうすると、ここまで手元のコンピューターでしか見られなかったお問い合わせページが、このURLを知っている人なら誰でもアクセスして使えるようになったのがわかります。

public

「名前」と「メールアドレス」、そして「ご用件」を入力して「送信」を押すと、お問い合わせが送信できます。

ところで、送信された問い合わせはどこで確認できるのでしょうか。

これを次のステップで設定します。5分ほどで終わります。

ステップ３（お問い合わせページの使い方）

Netlifyのダッシュボード画面の上部にある「Forms」をクリックします。

public

下図、「Active forms」という文字の下にある赤枠の「お問い合わせ」をクリックすると、送信された問い合わせが表示されます。

public

ここを毎回チェックするのでもいいですが、何か問い合わせがあったときにすぐに知りたいので、メールアドレスを登録しておきましょう。

そうすると問い合わせがあったとき、そのメールアドレス宛てに、問い合わせの内容が送信されます。

下図の赤枠「Settings and usage」をクリックします。

public

下の方へスクロールすると、「Form notifications」とあります。

form-notification-section

「Add notification」ボタンをクリックし、「Email notification」を選びます。

form-notification-section

下のように3つ入力欄のある表示が出ますが、使うのは真ん中の「Email to notify」だけで、ここには問い合わせがあった時の通知を受け取りたいメールアドレス（ここではcontact@gmail.com）を入力します。

それ以外の欄はそのまま操作せず、下部の「Save」ボタンを押します。

form-notification-section

これで問い合わせがあった時には、登録したメールアドレス宛てに通知が届くので、問い合わせにすぐに対応することができます。

以上でお問い合わせページが完成です。

お客さんの連絡を受けるページとして、ぜひ活用してみてください。

ステップアップ

これ以降は余力のある人向けに、入力項目を追加したり、URLを変更する方法などについて紹介します。

表示される文章を変更する

現在、お問い合わせページ上部には「お問い合わせ」という太文字と、その下に「お気軽にご連絡ください」の文章が表示されています。

この文章を変更するには、先ほどコピー&ペーストして保存したindex.htmlを開いてください。

そうすると真ん中より少し上のあたりに次のような部分があります。

<h1>お問い合わせ</h1>
<p>お気軽にご連絡ください</p>

ここの部分がお問い合わせページで表示されている文章と対応しているので、例えば次のように書き換えてみます。

<h1>無料相談</h1>
<p>初回15分のみ無料でご質問にお答えします。</p>

この時、<や>といった記号、h1、pなどの英数字は消さず、日本語の部分のみを編集するよう注意してください。

<や>などを消してしまうと、正しく反映されなくなります。

編集したら保存し、ブラウザで開いてみます。

下のように文章が変更されました（赤枠内）。

pic5

これをネット上で公開する方法は、上で説明したステップと同じです。

Netlifyにアクセスをして、画面下部の部分（下図参照）にドラッグ & ドロップしてください。

pic5

入力項目を追加する

ここでは「名前」と「メールアドレス」以外の、例えば「住所」や「電話番号」などの入力項目を増やす方法を紹介します。

index.htmlを開いて、真ん中より少し下を見ると、次のような文字が見えます。

<label for="name">お名前</label>  
<br>
<input type="text" name="name" id="name" required style="outline: none; border: none; width: 100%; border-radius: 10px; padding: 5px; margin-bottom: 20px;"/>
<br>

<label for="email">メールアドレス</label>
<br>
<input type="email" name="email" id="email" required style="outline: none; border: none; width: 100%; border-radius: 10px; padding: 5px; margin-bottom: 20px;"/>
<br>

「お名前」と「メールアドレス」、「name」と「email」など、文字に違いがいくつかみられますが、骨組みに注目すると、次のようなかたまりが2つ並んでいることがわかります。

<label for=""></label>  
<br>
<input type="" name="" id="" required style="outline: none; border: none; width: 100%; border-radius: 10px; padding: 5px; margin-bottom: 20px;"/>
<br>

<label for=""></label>
<br>
<input type="" name="" id="" required style="outline: none; border: none; width: 100%; border-radius: 10px; padding: 5px; margin-bottom: 20px;"/>
<br>

そのため、もし「電話番号」を増やしたい場合は、このかたまりを一つ追加すればよさそうです。

次のようにします。

<label for="name">お名前</label>  
<br>
<input type="text" name="name" id="name" required style="outline: none; border: none; width: 100%; border-radius: 10px; padding: 5px; margin-bottom: 20px;"/>
<br>

<label for="email">メールアドレス</label>
<br>
<input type="email" name="email" id="email" required style="outline: none; border: none; width: 100%; border-radius: 10px; padding: 5px; margin-bottom: 20px;"/>
<br>

<label for=""></label>
<br>
<input type="" name="" id="" required style="outline: none; border: none; width: 100%; border-radius: 10px; padding: 5px; margin-bottom: 20px;"/>
<br>

そして次のように日本語と英語を入力します。

<label for="name">お名前</label>  
<br>
<input type="text" name="name" id="name" required style="outline: none; border: none; width: 100%; border-radius: 10px; padding: 5px; margin-bottom: 20px;"/>
<br>

<label for="email">メールアドレス</label>
<br>
<input type="email" name="email" id="email" required style="outline: none; border: none; width: 100%; border-radius: 10px; padding: 5px; margin-bottom: 20px;"/>
<br>

<label for="number">電話番号</label>
<br>
<input type="number" name="number" id="number" required style="outline: none; border: none; width: 100%; border-radius: 10px; padding: 5px; margin-bottom: 20px;"/>
<br>

「住所」を追加するには次のようにします。

<label for="name">お名前</label>  
<br>
<input type="text" name="name" id="name" required style="outline: none; border: none; width: 100%; border-radius: 10px; padding: 5px; margin-bottom: 20px;"/>
<br>

<label for="email">メールアドレス</label>
<br>
<input type="email" name="email" id="email" required style="outline: none; border: none; width: 100%; border-radius: 10px; padding: 5px; margin-bottom: 20px;"/>
<br>

<label for="number">電話番号</label>
<br>
<input type="number" name="number" id="number" required style="outline: none; border: none; width: 100%; border-radius: 10px; padding: 5px; margin-bottom: 20px;"/>
<br>

<label for="address">住所</label>
<br>
<input type="text" name="address" id="address" required style="outline: none; border: none; width: 100%; border-radius: 10px; padding: 5px; margin-bottom: 20px;"/>
<br>

ここで入力した「label」横のfor、そして「input」横のtype、name、idについて少し解説します。

これは入力された情報の処理に関するもので、詳しく説明すると複雑な仕組みがありますが、単純化すると次のようなルールに従っています。

• 「label」横のforにはinputのidと同じ単語を使う

• 「input」横のtypeには、入力項目がメールアドレスの場合はemail、数字の場合はnumber、それ以外の文字（名前や住所など）はtextを入れる

• 「input」並びのnameには、入力項目の英語名を入れる（「住所」なら「address」、「年齢」なら「age」など）

URLを変更する

現在ネット上のお問い合わせページのURLは、自動で割り振られたものになっているので、これを変更しましょう。

Netlifyにログインします。

下図赤枠の「Domain settings」をクリックします。

pic5

下の画面に移動するので、右側にある「Options」をクリックします。

pic5

表示された「Edit site name」をクリックします。

pic5

下図の赤枠内、「Site name」に使用したいURLを入力します。

pic5

URL変更に関していくつか注意点があります。

ここで使える文字は英数字だけで、日本語の文字は使えません。

また、入力した名前がすでに使われている場合は別の名前にする必要があります。

そしてURL末尾の.netlify.appは無料では変更できず、ここを変えたい場合は自分でURLを購入する必要があります。

これ以外にも、モバイル端末での表示に対応させたり、タブに名前を表示させる、送信確認ページを用意するなどのカスタマイズが可能ですが、初心者には難しいことが入ってくるため本記事はここまでとします。

本記事がお問い合わせページを作る助けとなれば幸いです。

ユーザーからの問い合わせを増やしたい、アイテムの購入率を高めたい等の「ビジネスのゴール」から逆算した効果的なウェブサイトを制作するmonotein。

monoteinについての案内資料の無料ダウンロードはこちら。

「これまでのホームページでは成果が出なかった」、「結果の出るウェブサイトが欲しい」、「JamstackやヘッドレスCMSなどの最新テクノロジーに移行したい」など、ウェブに関してお困りのことがありましたら、お気軽にご相談ください。

無料相談

多摩地域の中小企業のホームページで発生している問題

NetlifyのBuildを消費しない方法

関連記事

svg

多摩地域の中小企業のホームページで発生している問題

【 ビギナー向け 】2022.01.19

svg

【誰でもできる】ReactをHTMLとCSSの知識だけで使う方法

【 ビギナー向け 】2021.12.09

svg

HTMLとCSSの勉強後、何をすればいいのかわからない・・・

【 ビギナー向け 】2021.11.26

svg

サーバー、データベース、バックエンド、フロントエンドの違い

【 ビギナー向け 】2021.10.04

svg

プロに頼まないでホームページを作る方法

【 ビギナー向け 】2020.04.20

svg

「Webサイト」と「Webアプリケーション」は別物です

【 ビギナー向け 】2020.01.25