<div class="contact">
                        <form id="contactForm" method="post" action="?">
                        <div class="group">
                            <div>
                                <input type="email" name="email" placeholder="請輸入Email" class="form-control" required>
                            </div>
                            <div>
                                <input type="tel" name="tel" placeholder="請輸入電話" class="form-control">
                            </div>
                            <div>
                                <input type="text" name="name" placeholder="請輸入姓名" class="form-control" required>
                            </div>
                            <div>
                                <input type="text" name="sex" placeholder="請輸入稱謂(先生/小姐)" class="form-control">
                            </div>
                            <div>
                                <input type="text" name="com" placeholder="請輸入公司行號" class="form-control" required>
                            </div>
                            <div>
                                <textarea placeholder="問題描述" name="mesg" rows="6" class="form-control" required></textarea>
                            </div>
                            <div><button type="submit" class="btn btn-default">寄送問題</button></div>
                        </div>
                        </form>
                    </div>
.contact .group>div { padding: 0 15px; margin: 1em 0; position: relative; }
.contact label.placeholder { font-weight: normal; color: #757575; padding: .2em .5em; position: absolute; top: 1px; left: 16px; }
.contact label.required:after { content: '*'; color: #cc0000; }
.hidden { display:none; }
$(document).ready(function(){
                $.each($(".contact :input").not(':input[type=button], :input[type=submit], :input[type=reset]'), function(i, o){
            var lab = $(o).attr('placeholder');
            var req = '';
            if($(o).attr('required')=='required') {
                req = 'required';
            }
            $(o).removeAttr('placeholder').parent().prepend('<label class="placeholder '+req+'">'+lab+'</label>');
        });
        
        $(".contact :input").on("focus, keydown", function(){
            if($(this).val()!='') $(this).prev().addClass('hidden');
        });
        $(".contact :input").on("blur", function(){
            if($(this).val()=='') $(this).prev().removeClass('hidden');
        });
        
        $("label.placeholder").on("click", function(){
            $(this).next().focus();
        });
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js