Question

我为自己的网站创建了一个自定义html表单。如果我将所有代码放在Wordpress页面中，一切正常。问题是，当我尝试用短代码嵌入它时。最终结果不同，因为标签和选择项目是在线呈现的。在附加屏幕截图。有人能帮我吗？嵌入来自：

add_shortcode("searching_form", "searching_form_render");

function searching_form_render() {  
    return'<form class="searching_form" name="input" action="demo_form_action.asp" method="get">
        <div class="field">
          <label>Search Practitioners & Therapists</label> 
          <select name="Select a Therapy">
            <option value="0" classname="invalid">Select a Therapy...</option>
            <option value="1">Deep Tissue Massage</option>
            <option value="2">Remedial Massage</option>
            <option value="3">Relaxation & Pregnancy Massage</option>
            <option value="4">Reflexology</option>
            <option value="5">Lymphatic Drainage Massage</option>
            <option value="6">Shiatsu</option>
          </select>
          <span>e.g. yoga, naturopath</span>
        </div>

        <div class="field">
          <label>Where?</label>
          <select name="Select Location">
            <option value="0">ALL</option>
            <option value="1">NSW</option>
            <option value="2">QLD</option>
            <option value="3">SA</option>
            <option value="4">TAS</option>
            <option value="5">VIC</option>
            <option value="6">WA</option>  
          </select>
          <span>e.g. NSW</span>
        </div>

        <div class="field">
          <input class="search_button" type="submit" value="Search">
        </div>

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

      </form>';
}

这是CSS代码：

.searching_form {
    padding: 22px;
    webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    margin-bottom: 44px;
    background-color: #004062;
}

.searching_form label {
    color: white;
    font-size: 16px;
    font-weight: bold;
    margin-left: 4px;
}

.searching_form span {
    color: cyan;
    margin-left: 4px;
}

.searching_form select {
    font-size: 14px;
    font-weight: normal;
    padding: 10px;
    height: 40px;
    webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    background-color: #fafafa;
    margin-top: 5px;
    margin-bottom: 5px;
}

.searching_form .field {
    float: left;
    margin-right: 12px;
}

.searching_form .search_button {
    border: 1px solid #006;
    background-color: #FAA21B;
    display: block;
    padding: 11px 20px;
    font-weight: bold;
    margin-left: 6px;
    webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    color: white;
    cursor: pointer;
}

.searching_form .search_button:hover {
    background-color: #faae3a;
}

.clear { 
    clear:both; 
    height:0px; 
    width:0px; 
    display:table; 
    content:"";
}

Answer 1

将display: block;属性添加到.searching_form label并添加到.searching_form select

Wordpress Shortcode麻烦在HTML中嵌入表单

1 个答案: