Contact form 7 half width - Support | Kriesi.at

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts
January 26, 2016 at 9:40 pm #572381

stefanoran
Participant

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>

January 27, 2016 at 12:01 am #572452
Josue
Inactive Moderator
Hey Stefan!

As you’re using custom code it wouldn’t be possible for us to help you, instead i’d suggest you to use Enfold’s grid code with CF7, here’s all the CSS code you’d need for that:
```
.wpcf7-form, .wpcf7-response-output{
  clear:both;
}

.wpcf7-form-control-wrap {
  display: block !important
}

.wpcf7-form p br{display:none;}
.wpcf7-form label {display:block; visibility: visible; position: relative; }
.wpcf7-form label, .modified_width:before{display:block; visibility: visible; position: relative; margin-bottom: 7px; font-weight: 600;}

.wpcf7-form p{ position: relative; clear:both; float:left; width:100%;}
.wpcf7-form p.hidden{position: absolute; width:0px; left:0; top:0; }
.wpcf7-form .form_element_half{width:49.5%; float:left; margin-left:1%; clear:none;}
.wpcf7-form .form_element_third{width:32.6%; float:left; margin-left:1%; clear:none;}
.wpcf7-form .form_element_two_third{width:66.4%; float:left; margin-left:1%; clear:none;}
.wpcf7-form .form_element_fourth{width:24.2%; float:left; margin-left:1%; clear:none;}
.wpcf7-form .form_element_three_fourth{width:74.8%; float:left; margin-left:1%; clear:none;}

.wpcf7-form .first_form{clear:both;margin-left:0;}

#top .wpcf7-form .wpcf7-text, #top .wpcf7-form .wpcf7-select, #top .wpcf7-form .wpcf7-textarea{
  width:100%;
  margin-bottom:0;
  display:inline;
  min-width:50px;
  padding:13px;
  border-radius: 2px;
}

#top .wpcf7-form .wpcf7-select{
 -webkit-appearance: none;
 border-radius:0px;
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAYAAAC+ct6XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjBBRUQ1QTQ1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjBBRUQ1QTU1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMEFFRDVBMjVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMEFFRDVBMzVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk5mU4QAAACUSURBVHjaYmRgYJD6////MwY6AyaGAQIspCieM2cOjKkIxCFA3A0TSElJoZ3FUCANxAeAWA6IOYG4iR5BjWwpCDQCcSnNgxoIVJCDFwnwA/FHWlp8EIpHSKoGgiggLkITewrEcbQO6mVAbAbE+VD+a3IsJTc7FQAxDxD7AbEzEF+jR1DDywtoCr9DbhwzDlRZDRBgACYqHJO9bkklAAAAAElFTkSuQmCC);
 background-position: center right;
 background-repeat: no-repeat;
 border-radius: 2px;
}

.wpcf7-form .button {
  margin: 0;
  padding: 16px 20px;
  border-radius: 2px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  font-weight: normal;
  font-size: 12px;
  min-width: 142px;
  outline: none;
}

.wpcf7-form p input, .wpcf7-form p textarea, .wpcf7-form p select{
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition:  all 0.3s ease-in-out;
  transition:     all 0.3s ease-in-out;
}

#top .wpcf7-form-control-wrap {
  display: block !important
}

#top .wpcf7-response-output{
  float: left;
  padding: 17px;
  border-width: 1px;
  border-style: dashed;
  margin-left: 0;
}

#top .wpcf7-response-output.wpcf7-validation-errors, #top .wpcf7-response-output.wpcf7-spam-blocked, #top .wpcf7-response-output.wpcf7-mail-sent-ng{
  background-color: #FFF8F4;
  border-color: #CDA18F;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  color: #AF2C20;
}

#top .wpcf7-response-output.wpcf7-mail-sent-ok{
  background-color: #E0F1B5;
  border-color: #8BAF5B;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  color: #4F5F39;
}

#top .wpcf7-not-valid-tip {
  color: #EF5D4F;
  display: block;
}
#top .wpcf7-display-none{
  display: none;
}
```
Once you added that re-adjust the HTML you’re already have, another thing you can do is create an Enfold contact form on a separate page, look at the generated HTML source and simply replicate it on CF7.

Cheers!
Josue
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.