Я использовал плагин Contact-form 7 для создания наших форм. И у нас есть одна форма заявки, и мы хотели бы отображать элементы формы рядом, значит два поля должны быть в одной строке.
И для этого у меня есть код ниже,
<div class="container">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<p>*Name[text* leadsquared-FirstName placeholder ""]</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<p>*Qualification[text* leadsquared-mx_Qualification placeholder ""]</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<p>*Name of the Business[text* leadsquared-mx_Name_of_the_Business placeholder ""]</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<p>*Organization Name[text* leadsquared-mx_Organization_Name placeholder ""]</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<p>*Business Industry[text* leadsquared-mx_Business_Industry placeholder ""]</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<p>*Working As[text* leadsquared-mx_Working_As placeholder ""]</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<p>*Phone No[text* leadsquared-Phone placeholder ""]</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<p>*Email ID[email* leadsquared-EmailAddress placeholder ""]</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<p>*Address[textarea* leadsquared-mx_Address 10x6 placeholder ""]</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<p>*Applying for:
[checkbox* leadsquared-mx_Applying_for "Master Franchisee" "Unit Franchise"]</p>
<p>*Preferred Location[select PreferredLocation "Indore" "Aurangabad" "Nagpur" "Any other"]</p>
</div>
<p>Listed below are some of the benefits of being a franchisee. Please rank the items that could be most helpful in achieving individual and organizational objectives:</p>
<table class="table table-bordered">
<tbody>
<tr>
<td width="180">[number* leadsquared-mx_Grow_Profits_Quickly min:1 max:5 placeholder "Number Between 1 to 5"]</td>
<td width="145">: Grow Profits Quickly</td>
</tr>
<tr>
<td>[number* leadsquared-mx_Help_Stakeholders_achieve_their_goals min:1 max:5 placeholder "Number Between 1 to 5"]</td>
<td>: Help Stakeholders achieve their goals</td>
</tr>
<tr>
<td>[number* leadsquared-mx_Focus_on_Business_Expansion min:1 max:5 placeholder "Number Between 1 to 5"]</td>
<td>: Focus on Business Expansion</td>
</tr>
<tr>
<td>[number* into_a_Master_Franchisee min:1 max:5 placeholder "Number Between 1 to 5"]</td>
<td>: Turn into a Master Franchisee if you are a Unit Franchisee Or Grow More Unit Franchisees, if you already a Master Franchisee.</td>
</tr>
<tr>
<td>[number* leadsquared-mx_Individual_Growth min:1 max:5 placeholder "Number Between 1 to 5"]</td>
<td>: Individual Growth</td>
</tr>
</tbody>
</table>
<p>Please check the box below that most closely coincides with immediate objectives:</p>
[checkbox* leadsquared-mx_Please_check_the_box_below_that_closely_Objective "Earn Profits" "Change Current Education System" "Make a Sound Investment" "Make a Synergic Partnership" "Other"]
<p>When do you wish to start Times and Trends Academy (TTA) franchisee? Three reasons why you should be given an opportunity to start our franchise?</p>
[textarea* leadsquared-mx_Why_given_an_opportunity_to_start_our_franchise]<br>
<p style="text-align: -webkit-center;text-align: -moz-center;text-align: center;">[captchac captcha-170] [captchar captcha-170 4/4 placeholder "*Enter a Captcha"]</p>
<p style="text-align: -webkit-center;text-align: -moz-center;text-align: center;">[submit "Submit"]</p>
</div>
<style>
div.wpcf7{
background-color:#E5D6D3;
padding:20px 0px;
}
div.wpcf7-validation-errors {
color: #f7e700;
}
.wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok {
color: #398f14;
}
input.wpcf7-form-control.wpcf7-captchar {
width: 75%;
float: right;
}
@media screen and (max-width: 500px) {
input.wpcf7-form-control.wpcf7-captchar {
width: 60%;
float: right;
}
}
span.wpcf7-not-valid-tip {
margin-top: 10px;
}
</style>
Проблема с этим кодом заключается в том, что когда мы изменяем размеры нашего экрана, эти текстовые поля формы занимают полное разделение экрана, поэтому некоторая часть текстовых полей будет скрыта за нашей боковой панелью.
Почему это произошло, пожалуйста, сообщите нам.
Ссылка для вашей справки: https://timesandtrendsacademy.com/franchisee-application-form/
Спасибо,
Гопал