Using bootstrap for contact form 7 in WordPress with fixed width

4 Views

I am using WordPress + Contact Form 7 + Bootstrap for Contact Form 7.

I am wrapping the code in Contact Form 7 editor in something like:

Read More
<div class="container">
   <div class="row">
      <div class = "col-md-6">
         [text* ... ] /* putting text object here, with contract-form-7 editor tool
         ...

Things work fine with bootstrap behavior, but the length of the text column – I cannot control them with fixed width.

i.e – I need to put in one line together area code+phone number. The area code is fixed width, and there is a minimal width (3 characters), but I didn’t find any way doing this – The behavior is that the size is not control and area code is little shorter (in width) than 3 characters, and ‘phone number’ is

I need to be consistent and solving above with the plugins contact-form-7 + bootstrap for contact-form-7.

Is there anyway solving the above?

I am using Hebrew design, so final interpretation of my code is: 

<div class="row">
<div class="col-md-6 col-md-push-6">
<table>
<tr>
<td>
<form action="">
<div class="form-group">
<label for="#id_phone">מספר טלפון</label>
<div class="form-group size:10"><input class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required field_input form-control" id="id_phone" name="size:10" type="text" value="" maxlength="10" aria-invalid="false" aria-required="true" required></div>
</div>
</form>
</td>
<td>
<form action="">
<div class="form-group">
<label for="#id_phone_area">&nbsp;</label>
<div class="form-group n_phone_area"><select class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required field_input form-control" id="id_phone_area" name="n_phone_area" aria-invalid="false" aria-required="true" required><option value="050">050</option><option value="052">052</option><option value="054">054</option><option value="055">055</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="08">08</option><option value="09">09</option></select></div>
</div>
</form>
</td>
</tr>
</table>
</div><!-- col -->
</div><!-- row -->
Post Views: 4

Related posts