Half widthe contact form 7

Hello

Can somebody help me out with the contact form 7 .I want the form to be more compact, and put 2 fields next to eachother so that the user doesnt have to scroll a lot. The spaces between the fields have to be smaller as well.

Take a look please :http://autoverkoopplein.nl/kentekenformulier/
This is the code of the form:

<div>
<div class=”row”>
<div class=”col-sm-12″>
<h4>1. Gegevens auto: </h4>
</div>
</div>

<div class=”row”>
<div class=”col-sm-6″>
<div class=”form-group”>
<label class=”control-label”>
Kenteken van de auto<span style=”color:#ff2222;”>*</span>
</label>
[dynamictext* kenteken “CF7_GET key=’kenteken'”]
</div>
</div>
<div class=”col-sm-6″>
<div class=”form-group”>
<label class=”control-label”>
Het merk<span style=”color:#ff2222;”>*</span>
</label>
[dynamictext* merk “CF7_GET key=’Merk'”]
</div>
</div>
</div>
<div class=”row”>
<div class=”col-sm-6″>
<div class=”form-group”>
<label class=”control-label”>
Het model<span style=”color:#ff2222;”>*</span>
</label>
[dynamictext* model “CF7_GET key=’Handelsbenaming'”]
</div>
</div>
<div class=”col-sm-6″>
<div class=”form-group”>
<label class=”control-label”>
Het bouwjaar<span style=”color:#ff2222;”>*</span>
</label>
[dynamictext* merk “CF7_GET key=’DatumeersteafgifteNederland'”]
</div>
</div>
</div>
<div class=”row”>
<div class=”col-sm-6″>
<div class=”form-group”>
<label class=”control-label”>
De kleur<span style=”color:#ff2222;”>*</span>
</label>
[dynamictext* kleur “CF7_GET key=’Eerstekleur'”]
</div>
</div>
<div class=”col-sm-6″>
<div class=”form-group”>
<label class=”control-label”>
Carrosserie<span style=”color:#ff2222;”>*</span>
</label>
[dynamictext* carrosserie “CF7_GET key=’Voertuigsoort'”]
</div>
</div>
</div>
<div class=”row”>
<div class=”col-sm-6″>
<div class=”form-group”>
<label class=”control-label”>
Brandstof<span style=”color:#ff2222;”>*</span>
</label>
[dynamictext* brandstof “CF7_GET key=’Hoofdbrandstof'”]
</div>
</div>
</div>

<div class=”row first_row”>
<div class=”col-sm-12″>
<h4>2. Contact gegevens: </h4>
<p> Hoe kunnen wij u bereiken? </p>
</div>
</div>

<div class=”row”>
<div class=”col-sm-6″>
<div class=”form-group”>
<label class=”control-label”>
Uw naam<span style=”color:#ff2222;”>*</span>
</label>
[text* your-name]
</div>
</div>
<div class=”col-sm-6″>
<div class=”form-group”>
<label class=”control-label”>
Uw e-mailadres<span style=”color:#ff2222;”>*</span>
</label>
[email* your-email]
</div>
</div>
</div>

<div class=”row”>
<div class=”col-sm-6″>
<div class=”form-group”>
<label class=”control-label”>
Uw telefoonnummer<span style=”color:#ff2222;”>*</span>
</label>
[tel* telefoon]
</div>
</div>
</div>

<div class=”row”>
<div class=”col-sm-12″>
<h4>3. Omschrijving van de auto </h4>
<p>Wat is de staat van de auto</p>
</div>
</div>
<div class=”row”>
<div class=”col-sm-3″>
<div class=”form-group”>
<label class=”control-label”>
Kilometerstand<span style=”color:#ff2222;”>*</span>
</label>
[text* kilometerstand]
</div>
</div>
<div class=”col-sm-3″>
<div class=”form-group”>
<label class=”control-label”>
Transmissie
</label>
[select transmissie include_blank “Handgeschakeld” “Automaat” “Half-automaat”]
</div>
</div>
<div class=”col-sm-3″>
<div class=”form-group”>
<label class=”control-label”>
Bekleding
</label>
[select bekleding include_blank “Alcantara” “Stof” “Leder” “Half-leder”]
</div>
</div>
<div class=”col-sm-3″>
<div class=”form-group”>
<label class=”control-label”>
Staat buitenzijde
</label>
[select staatbuitenzijde include_blank “Goed” “Redelijk” “Slecht”]
</div>
</div>
</div>

<div class=”row”>
<div class=”col-sm-3″>
<div class=”form-group”>
<label class=”control-label”>
Staat interieur
</label>
[select staatinterieur include_blank “Goed” “Redelijk” “Slecht” ]
</div>
</div>
<div class=”col-sm-3″>
<div class=”form-group”>
<label class=”control-label”>
Technische staat
</label>
[select technischestaat include_blank “Goed” “Redelijk” “Slecht”]
</div>
</div>
<div class=”col-sm-3″>
<div class=”form-group”>
<label class=”control-label”>
Auto rijdbaar
</label>
[select rijdbaar include_blank “Ja” “Nee”]
</div>
</div>
<div class=”col-sm-3″>
<div class=”form-group”>
<label class=”control-label”>
Staat buitenzijde
</label>
[select staatbuitenzijde include_blank “Goed” “Redelijk” “Slecht”]
</div>
</div>
</div>

<div class=”row”>
<div class=”col-sm-3″>
<div class=”form-group”>
<label class=”control-label”>
Staat bandenprofiel
</label>
[select bandenprofiel include_blank “Goed” “Redelijk” “Slecht”]
</div>
</div>
<div class=”col-sm-3″></div>
<div class=”col-sm-6″>
<div class=”form-group”>
<label class=”control-label”>
Foto’s<br />
Voeg hier foto’s van je auto toe
</label>
[file foto2 filetypes:jpg|gif|png|jpeg|jpg|jpeg.]
[file foto3 filetypes:jpg|gif|png|jpeg|jpg|jpeg.]
[file foto4 filetypes:jpg|gif|png|jpeg|jpg|jpeg.]
[file foto5 filetypes:jpg|gif|png|jpeg|jpg|jpeg.]
[file foto6 filetypes:jpg|gif|png|jpeg|jpg|jpeg.]
<p> Bestandstype: jpg | gif | png | jpeg | jpg | jpeg </p>
</div>
</div>
</div>

<div class=”row”>
<div class=”col-sm-12″>
<label class=”control-label”>
Vermeld hier eventuele schades en/of bijzonderheden
</label>
[textarea bijzonderheden]
</div>
</div>
<div class=”row”>
<div class=”col-sm-12″>
<label class=”control-label”>
Ben je tevreden met wat je hebt ingevuld? Plaats dan nu je auto.</br>Bij plaatsing ga je akkoord met de Algemene voorwaarden.

</label>
</div>
</div>
<div class=”row”>
<div class=”col-sm-12″>
<p>[submit “Auto plaatsen”]</p>
</div>
</div>
</div>

• This topic was modified 9 years, 6 months ago by stefanoran.