Help us understand the problem. What is going on with this article?

お問い合わせフォームの雛形(駆け出しのWEB担当者用)

あくまでも問い合わせフォームの雛形という考えのもとソースコードを提供します。
※動作環境は7.2以上になります。

詳しい内容はこちらを参照ください。➡クリック

ファイルのダウンロードは下記になります。
【ダウンロードファイルには広告は表示されません】
https://zip358.com/tool/request/request.zip
サンプルページ
https://zip358.com/tool/request/

./view/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>お問い合わせ</title>
    <script  src="https://code.jquery.com/jquery-3.4.1.min.js"  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="  crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="js/common.js"></script>
    <style>
        .jumbotron{
            background-color: #2bd4d0;
            color: #fff;
        }
        .btn-primary {
            color: #fff;
            background-color: #2bd4d0 !important;
            border-color: #2bd4d0 !important;
        }        
        .input-group-text{
            background-color: #2bd4d0;
            border: 1px solid #2bd4d0;
        }
    </style>
</head>
<body>
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
          <h1 class="display-4">お問い合わせ</h1>
          <p class="lead">必須項目を入力し送信ボタンを押してください。</p>
        </div>
        <div class="alert alert-warning" id="error_sendmail" role="alert">
        </div>
    </div> 
    <div class="container">
        <div class="row">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">お名前[必須]</span>
                </div>
                <input type="text" name="name" class="form-control" id="name" placeholder="name" value="{{name}}">
            </div>
            <div class="alert alert-warning" id="error_name" role="alert">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">メールアドレス[必須]</span>
                </div>
                <input type="email" name="email" class="form-control" id="email" placeholder="name@example.com" value="{{email}}">
            </div>
            <div class="alert alert-warning" id="error_email" role="alert">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">@</span>
                </div>
                <input type="text" name="twitter_account" class="form-control" placeholder="twitter account" aria-label="twitter account" aria-describedby="basic-addon1" value="{{twitter_account}}">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">お問い合わせ内容[必須]</span>
                </div>
                <select name="meun" class="form-control" id="exampleFormControlSelect1">
                    {{meun_option|raw}}
                </select>
            </div>
            <div class="alert alert-warning" id="error_meun" role="alert">
            </div>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">コメント[必須]</span>
                </div>
                <textarea name="comment" rows="10" class="form-control" aria-label="コメント">{{comment}}</textarea>
            </div>
        </div>
        <div class="row">
            <footer class="blockquote-footer">
                <small class="text-muted">
                    ご自由に記入ください。
                </small>
            </footer>    
        </div>
        <div class="alert alert-warning" id="error_comment" role="alert">
        </div>
        <button type="button" class="mt-2 btn btn-primary btn-lg btn-block">送信する</button>
    </div>
</body>
</html>
index.php
<?php
require 'vendor/autoload.php';
session_start();
$loader = new \Twig\Loader\FilesystemLoader('./view');
$twig = new \Twig\Environment($loader);

$json = json_decode (@file_get_contents("select.json"));
if(count($_SESSION)>1){
    $data = [];
    foreach($_SESSION as $key=>$val){
       $data  = $data + array($key=>$val);
       if(!is_null(select_option($json,$key,$val))){
            $data  = $data + select_option($json,$key,$val);
       }
    }

    echo $twig->render('index.html',$data);
}else{
    $data = select_option($json);
    echo $twig->render('index.html',$data);
}


function select_option($json="",$key="",$val=""){
    $str = Null;
    if(!$json)return false;
    if($key){
        if($json->$key){
            foreach($json->$key as $op){
                $selected = $op == $val?" selected ":"";
                $str[$key . "_option"].="<option value='$op'$selected>$op</option>";
            }
        }
        return $str;
    }else{

       foreach($json as $name=>$key){
            foreach($key as $i=>$op){
                $str[$name. "_option"].="<option value='$op'>$op</option>";
            }
       }
       return $str;
    }
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした