お問い合わせフォーム

【PHP】コンタクトフォームの作り方

 

Bootstrap, Google Fonts を最新のバージョンに更新しました。(2021年7月2日)

 
ここではPHPを使ったコンタクトフォーム(お問い合わせフォーム)の作り方を紹介します。
 


 

はじめに

まずはデモ動画をご覧ください。このようなお問い合わせフォームを作っていきます。

 
 
 

最近は WordPress でホームページやブログを簡単に作れるようになり、お問い合わせフォームはプラグインで簡単に追加できるようになりました。

ゼロから作ることは少なくなっていますが、お問い合わせフォームには PHP の基礎がたくさん詰まっているので、PHPの学習にはとてもオススメです!
 

今回作るお問い合わせフォームでは

  • POST フォーム
  • 入力チェック
  • メール送信

を実装します。
 
 
 

私も初めて作った PHP アプリケーションがお問い合わせフォームでしたが、当時は CSS を知らなかったので以下のようなとても質素なものでした。


 
 

これだと「お問い合わせフォームを作った!」という感じがしないので、今回は Bootstrap と Google Fonts という無料で使えるサービスを使ってお問い合わせフォームらしくしていきます。
 

Bootstrap はフレームワークといい、難しいコードを書かずにシンプルで綺麗なフォームやボタンを作ることができます。今回は使いませんが JavaScript でモーダルや切り替えタブなども簡単に作成できます。
 

Google Fonts は無料で使える Web フォントです。フォントの種類もたくさん用意されていて、コードを数行追加するだけで綺麗なフォントを使用できます。
 

全ての手順を紹介していますので、PHP 初心者の方もぜひ作ってみてください
 
 
 

開発環境

PHP で書いたコードを動かすにはサーバーが必要になります。

サーバーは

  1. レンタルサーバーを使う(有料)
  2. 自分のパソコンにローカル環境を作る(無料)

という方法があります。
 

レンタルサーバーを使う

1ヶ月数百円から利用することができます。

レンタルサーバーに PHP ファイルをアップロードすることでプログラム実行することができます。
 

 
 

自分のパソコンにローカル環境を作る

自分のパソコン上にサーバーを用意することができます。

Windows の方は XAMPP, Mac の方は MAMP がオススメです。

どちらも無料でインストールできますが、あくまでパソコン上で動くだけです。

実際にネット上に公開するときはレンタルサーバーが必要になります。
 
 

メール送信について

ローカル環境でメール送信を使う場合、別に設定が必要になる場合があります。

初心者の方は、ローカル環境でなくレンタルサーバー上でテストするのが簡単です。

macOS をお使いの方は以下の設定でメール送信ができるようになります。

【2021年版】PostfixからGmail経由でメールを送信する方法 この記事では「Postfix から Gmail 経由でメール送信する方法」を紹介しています。 macOS には Postf...
 
 
 

メニュー(全2回)

第1回「HTMLとCSS」
第2回「PHP」
 
 

 

ABOUT ME
Sara
「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
挫折しないプログラミング講座

 

 
Code for Fun プログラミング講座では「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで学ぶことができます。

  • 何か一つ形にしてみたい!
  • 次に何をして良いか分からない…
  • プログラミングに挫折しそう…

という方にオススメです。

詳しくみる

guest
0 Comments
Inline Feedbacks
View all comments
0
この記事にコメントするx