1. 
   

   
   

2. {eyou:guestbookform typeid='18'}

       {eyou:static file="/public/static/common/js/jquery.min.js"/}

       {eyou:static file="/public/plugins/layer-v3.1.0/layer.js"/}

       {eyou:static file="users/skin/js/global.js" /}

       <form method="POST" action="{$field.action}" autocomplete="off" {$field.formhidden} onsubmit="{$field.submit}">

       <div class="transition guestbook">

           <h2 class="pz textCenter">我们想听到您的声音</h2>

           <h3 class="textCenter ts">We want to hear your voice</h3>

           <ul>

               <li class="flex">

                   <h2 class="flexAc flexRight title">{$field.itemname_28}：</h2>

                   <input id="attr_28" type="text" value="" name="{$field.attr_28}" placeholder="{$field.itemname_28}" class="wbk">

               </li>

               <li class="flex">

                   <h2 class="flexAc flexRight title">{$field.itemname_29}：</h2>

                   <input id="attr_29" type="text" value="" name="{$field.attr_29}" placeholder="{$field.itemname_29}" class="wbk">

               </li>

               <li class="flex">

                   <h2 class="flexAc flexRight title">{$field.itemname_30}：</h2>

                   <input id="attr_30" type="text" value="" name="{$field.attr_30}" placeholder="{$field.itemname_30}" class="wbk">

               </li>

               <li class="flex">

                   <h2 class="flexAc flexRight title">{$field.itemname_31}：</h2>

                   <input id="attr_31" type="text" value="" name="{$field.attr_31}" placeholder="{$field.itemname_31}" class="wbk">

               </li>

               <li class="flex">

                   <h2 class="flexAc flexRight title">{$field.itemname_32}：</h2>

                   <textarea id="attr_32" cols="40" rows="3" name="{$field.attr_32}" placeholder="{$field.itemname_32}" class="wby"></textarea>

               </li>

               <li><button class="flexCenter" type="submit">提交</button></li>

           </ul>

       </div>

       {$field.hidden}

       </form>

       {/eyou:guestbookform}

/*在线留言*/
.guestbook {
    margin-top: .26rem;
}

.guestbook h2.textCenter {
    line-height: .37rem;
    font-size: .24rem;
    color: #333;
}

.guestbook h2.textCenter:before {
    content: '';
    position: absolute;
    z-index: 999;
    top: .18rem;
    left: 3.52rem;
    display: block;
    width: .25rem;
    height: .02rem;
    background: #ccc
}

.guestbook h2.textCenter:after {
    content: '';
    position: absolute;
    z-index: 999;
    top: .18rem;
    right: 3.52rem;
    display: block;
    width: .25rem;
    height: .02rem;
    background: #ccc
}

.guestbook h3.textCenter {
    line-height: .26rem;
    font-size: .14rem;
    color: #999
}

.guestbook ul {
    margin: .27rem 0 0
}

.guestbook li {
    margin-bottom: .23rem;
}

.guestbook li .title {
    margin-left: 2.35rem;
    width: 1.03rem;
    height: .31rem;
    padding-right: .2rem;
    font-size: .16rem;
    color: #696969;
}

.guestbook .wbk {
    width: 3.74rem;
    height: .31rem;
    background: none;
    border: 1px solid #b5b5b5;
    border-radius: .05rem;
    padding: 0 .1rem;
    font-size: 16px;
    font-size: .16rem;
    color: #696969;
}

.guestbook .wbk2 {
    width: 72px;
    height: 29px;
    background: none;
    border: 1px solid #d0cfd0;
    border-radius: 5px;
    line-height: 29px;
    tedxt-indent: 5px;
    font-size: 16px;
    color: #000b05
}

.guestbook .wby {
    width: 3.74rem;
    height: 2.22rem;
    background: none;
    border: 1px solid #b5b5b5;
    border-radius: .05rem;
    padding: 0 .1rem;
    font-size: 16px;
    font-size: .16rem;
    color: #696969;
}

.guestbook .wbk:focus, .guestbook .wbk2:focus, .guestbook .wby:focus {
    border-color: var(--common-bgcolor);
}

.guestbook button {
    margin: .05rem 0 0 4.8rem;
    width: .82rem;
    height: .28rem;
    background: #f9b307;
    border: 0;
    cursor: pointer;
    border-radius: .02rem;
    font-size: .2rem;
    color: #fff;
}