{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 flexCenter flexAc">我们想听到您的声音</h2>
        <h3 class="textCenter ts">We want to hear your voice</h3>
        <ul>
            <li class="flex">
                <h2 class="flexAc flexRight title">{$field.itemname_25}：</h2>
                <input id="attr_25" type="text" value="" name="{$field.attr_25}" placeholder="{$field.itemname_25}" class="wbk">
            </li>
            <li class="flex">
                <h2 class="flexAc flexRight title">{$field.itemname_26}：</h2>
                <input id="attr_26" type="text" value="" name="{$field.attr_26}" placeholder="{$field.itemname_26}" class="wbk">
            </li>
            <li class="flex">
                <h2 class="flexAc flexRight title">{$field.itemname_27}：</h2>
                <input id="attr_27" type="text" value="" name="{$field.attr_27}" placeholder="{$field.itemname_27}" class="wbk">
            </li>
            <li class="flex">
                <h2 class="flexAc flexRight title">{$field.itemname_28}：</h2>
                <textarea id="attr_28" cols="40" rows="3" name="{$field.attr_28}" placeholder="{$field.itemname_28}" 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.flexCenter {
    line-height: .37rem;
    font-size: .24rem;
    color: #333;
}

.guestbook h2.flexCenter:before {
    content: '';
    display: block;
    width: .25rem;
    height: .02rem;
    background: #ccc;
    margin-right: .12rem;
}

.guestbook h2.flexCenter:after {
    content: '';
    display: block;
    width: .25rem;
    height: .02rem;
    background: #ccc;
    margin-left: .12rem;
}

.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: .36rem;
    width: 1.03rem;
    height: .31rem;
    font-size: .16rem;
    color: #696969;
    margin-right: .2rem;
}

.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;
    text-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 2.94rem;
    width: .82rem;
    height: .28rem;
    background: #e74d6a;
    border: 0;
    cursor: pointer;
    border-radius: .02rem;
    font-size: .2rem;
    color: #fff;
}