연락처 양식 7 - 같은 줄에 여러 텍스트 필드

연락처 양식 7 - 같은 줄에 여러 텍스트 필드

문의 양식 7을 사용하여 호텔 예약 양식을 디자인하고 있습니다.

http://istanabalian.com/book/

레이아웃을 어떻게 커스터마이즈해야 할지 모르겠어요.일부 텍스트 필드를 같은 줄에 표시하려고 하는데, 이 매우 단순한 목표를 달성하기 위해 사용할 요소 및/또는 CSS 스타일에 대한 올바른 식별을 찾을 수 없습니다.

코드는 다음과 같습니다.

<div id="responsive-form" class="clearfix">

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Arrival date
[date date-79 id:Arrivaldate date-format:mm/dd/yy] </label>

<label> Departure date
[date date-80 id:Departuredate date-format:mm/dd/yy] </label>

<label> How many guests?
    [text your-guests] </label>

<div class="form-row">
       <p>Number of adults [text your-adults]</p>
       <p>Number of children under 6 years old [text your-little-children]</p>
       <p>Number of children under 12 years old [text your-big-children]</p>
</div>

Select your preferred accomodation
    [checkbox your-accomodation use_label_element "Wayan (Two-story villa)" "Kadek (Two-story villa)" "Nyoman (Garden bungalow)" "Kehut (Garden bungalow)" "Pasca (Garden bungalow)"]

Do you need transportation to the hotel ? 
[radio your-pickup default:1 use_label_element exclusive "No transport needed" "Transport from Denpasar airport" "Transsport from Gilimanuk Ferry"]

<label> Do you want us to arrange motorbike rental for you ? 
    [text your-motorbikes] </label>

<label> Tell us more about what brings you to Balian
    [textarea your-message] </label>

[submit "Send"]

</div>

폼 행 요소의 p 요소를 한 줄에 표시하려고 합니다.이 CSS 회선을 사용해 보았습니다.

.form_row p{
display: inline-block
}

하지만 그것은 아무것도 하지 않는다.뭔가 빠진 것 같은데, 누구 좀 도와줄 수 있어요?

미리 감사 드려요,

벤자민

아마도 CSS 규칙을 가지고 있을 것입니다.<p>전체 너비.

왜 사용하지 않는가?<div>테마의 수업을 이용할 수 있을까요?

<div class="form-row">
   <div class="grid-33">Number of adults [text your-adults]</div>
   <div class="grid-33">Number of children under 6 years old [text your-little-children]</div >
   <div class="grid-33">Number of children under 12 years old [text your-big-children]</div>
</div>

HTML 테이블 구조를 간단하게 사용할 수 있습니다!!!

<table>
  <tr>
    <td colspan="2">[text* Name placeholder "Your Name"]</td>
  </tr>
  <tr>
    <td>[text* Class placeholder "Enter Class"]
    </td>
    <td>
      [text* Medium placeholder "Enter Medium"]
    </td>
  </tr>
</table>
[submit "Submit"]

테마 그리드를 사용하여 두 열에 만들 수 있습니다.아래 토막 참조

<div id="responsive-form" class="clearfix">
<div class="vc_row ">
  <div class="vc_col-sm-6">
    <label> Your Name (required)
        [text* your-name] </label>
  </div>
  
  <div class="vc_col-sm-6">
    <label> Your Email (required)
        [email* your-email] </label>
  </div>
</div>
<label> Arrival date
[date date-79 id:Arrivaldate date-format:mm/dd/yy] </label>

<label> Departure date
[date date-80 id:Departuredate date-format:mm/dd/yy] </label>

<label> How many guests?
    [text your-guests] </label>

<div class="form-row">
       <p>Number of adults [text your-adults]</p>
       <p>Number of children under 6 years old [text your-little-children]</p>
       <p>Number of children under 12 years old [text your-big-children]</p>
</div>

Select your preferred accomodation
    [checkbox your-accomodation use_label_element "Wayan (Two-story villa)" "Kadek (Two-story villa)" "Nyoman (Garden bungalow)" "Kehut (Garden bungalow)" "Pasca (Garden bungalow)"]

Do you need transportation to the hotel ? 
[radio your-pickup default:1 use_label_element exclusive "No transport needed" "Transport from Denpasar airport" "Transsport from Gilimanuk Ferry"]

<label> Do you want us to arrange motorbike rental for you ? 
    [text your-motorbikes] </label>

<label> Tell us more about what brings you to Balian
    [textarea your-message] </label>

[submit "Send"]

</div>

HTML 테이블은 다음과 같이 사용할 수 있습니다.

<table>
    <tr>
        <td>Number of adults [text your-adults]</td>
        <td>Number of children under 6 years old [text your-little-children]</td>
        <td>Number of children under 12 years old [text your-big-children]</td>
    </tr>
</table>

저는 Contact Form 7에 대한 설계 솔루션이 부족하여 매우 불만스러웠습니다.1년 전 저는 복잡한 레이아웃 요건을 가진 여러 폼을 cf7에 작성하는 업무를 맡았습니다.이 문제를 해결하기 위해 저는 응답성이 뛰어난 그리드 레이아웃 설계와 모듈러 방식의 구축, 즉 기존 폼을 더 큰 폼 구조로 재사용할 수 있는 기능을 허용하는 플러그인을 만드는 것에 대해 설정했습니다.방금 CF7용 스마트 그리드 레이아웃 디자인을 출시했는데, 대시보드에 그리드 UI 에디터가 있어 3열 레이아웃을 한 줄로 작성할 수 있습니다.css를 가지고 장난칠 필요가 없습니다.배치는 페이지에 표시됩니다.또, 휴대 전화에서는 디폴트로 3 행이 되기 때문에, 응답성도 뛰어납니다.

한번 시도해보고 네 생각을 알려줘.

코드는 정상적으로 동작하고 있습니다.CSS에 구문 오류가 있을 뿐입니다.HTML 내의 요소 이름은 다음과 같습니다.form-row하지만 CSS에서 당신은form_row방금 CSS 셀렉터를 로 변경했습니다.form-row모든 것이 예상대로 작동합니다.

.form-row p {
  display: inline-block;
}

이 비디오 설명이 도움이 되기를 바랍니다.

연락처 폼7의 CSS 코드를 다음에 나타냅니다.

/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 10px;
}
/* Clear floats after the columns */
.row:after {
    display: table;
    clear: both;
}

#knopka
{
    color: #fffff;
    background: #8F8CA0;
    width: 90%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

언급URL : https://stackoverflow.com/questions/42872032/contact-form-7-multiple-text-fields-on-the-same-line