直接使用代码

图片素材

css代码

 <style>
.newbtn{background:#06c;display:inline-block;padding:10px 30px;text-align:center;color:#fff;border:none;margin-right:20px;}
.newbtn:hover{background:#09c}
.timetable{border:1px solid #eee;padding:5px 23px;}
.timetable hr{color:#ccc;padding-top:25px;margin-bottom:5px !important;}
.timetable dl{color:#333;margin:8px 0}
.timetable dt{color:#333;}
.timetable dd{color:#555;line-height:30px;}

</style>

HTML+JS代码

 <section class="container">
  <div class="row">

    <img src="http://www.bootfastui.cn/img/2021/0427-2/contact_bg.png" class="center-block visible-lg visible-md " />
    <h3 class="center visible-xs">联系我们</h3>
    <div class="col-md-6">
      <div class="timetable">
        <h3><img src="http://www.bootfastui.cn/img/2021/0427-2/naozhong.jpg" />联系方式</h3>
        <hr>


        <dl>
          <dt>办公时间:</dt>
          <dd>周一,周二,周三,周四,周五:9:00-18:00</dd>
        </dl>

        <dl>
          <dt>联系电话:</dt>
          <dd> 0371--86112880 0371--86112886</dd>
        </dl>

        <dl>
          <dt>联系邮箱:</dt>
          <dd> zzfhbio@126.com</dd>
        </dl>

        <dl>
          <dt>办公地址:</dt>
          <dd>郑州市金水区中州大道656号</dd>
        </dl>

      </div>
    </div>

    <div class="col-md-6">
      <h5 class="red visible-xs"><br /><strong>请在此书写您的意见或者建议</strong></h5>
      <div class="contact-form">
        <form role="form" action="/index.php/Home/Index/addMessage" enctype="multipart/form-data" method="post">

          <div class="form-group col-md-6  ">
            <label for="name">
              姓名&nbsp;<span class="red">*</span>
            </label>
            <input type="text" placeholder="" required id="name" class="form-control" name="username">
          </div>


          <div class="form-group col-md-6 ">
            <label for="phone">
              电话&nbsp;<span class="red">*</span>
            </label>
            <input type="tel" id="phone" required class="form-control" name="tel">
          </div>


          <div class="form-group col-md-6  ">
            <label for="name">
              联系QQ
            </label>
            <input type="text" placeholder="" class="form-control" name="qq">
          </div>


          <div class="form-group col-md-6 ">
            <label for="phone">
              Email
            </label>
            <input type="email" class="form-control" name="email">
          </div>

          <div class="form-group pad-x15">
            <label>
              信息&nbsp;<span class="red">*</span>
            </label>
            <textarea placeholder="message" rows="5" class="form-control" name="content"></textarea>
            <br>

            <button type="submit" class="newbtn" onClick="return checkMessage()">提交</button>
            <label>验证码：</label>


            <input type="text" size="10" style="line-height:30px;" name="verify">
            <img src="/admin/index/Verify" alt="验证码" style="cursor:pointer; display:right;width:150px"
              onClick="javascritp:this.src='/admin/index/Verify?'+Math.random();" />


          </div>
          <span class="red error_xinxi"></span>
        </form>
      </div>
    </div>
  </div>
  <!--row end-->

</section>