直接使用代码

图片素材

css代码

 <style>
/* 首页--联系我们模块 */
.index-contact-box{background:#efefef;padding:50px 0}
.index-contact-box .c-line{width: 100px;height:10px;border-bottom:1px solid #000;}
.index-contact-box .c-box{background:#fff;padding:30px 50px;}
.index-contact-box .c-box input{background:#000;border-radius:50px;color:#fff;padding-left:10px;display:block;margin-top:30px;line-height: 30px;width: 100%;border:none;outline: none;}
.index-contact-box .c-box button{background:#000;;color:#fff;padding-left:10px;display:block;margin-top:40px;line-height: 30px;width: 100%;border:none;border-radius: 4px;}
.index-contact-box .c-box button:hover{background: #111;}
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #fff;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #fff;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #fff;
}
</style>

HTML+JS代码

 <div class="index-contact-box">
  <div class="container">
      <div class="row bg-fff">
          <div class="col-md-8 pm">
              <img src="http://www.bootfastui.cn/img/2021/0508/index4.jpg" width="100%">
          </div>
          <div class="col-md-4 pad-left0">
              <div class="c-box">
                  <h3 class="c-title">智能生活，更进一步</h3>
                  <div class="c-line"></div>
                  <form enctype="multipart/form-data" method="POST" action="">
                      <input type="text" name="name" required placeholder="姓名" />
                      <input type="text" name="mobile" required placeholder="电话" />
                      <input type="text" name="email" placeholder="邮箱" />
                      <input type="text" name="address" placeholder="地址" />
                      <input type="hidden" name="pubdate" value="2021-05-08 20:53:15"/>
                      <button>获取智能设计方案</button>
                  </form>
              </div>

          </div>
      </div>
      <div class="clear"></div>
  </div>

</div>