Help with the width of a customized contact 7 form

[morruu]

Hi,

I don’t know if you can help me or it’s not included in the normal support package.

I have created a page “Maleri på bestilling” (it’s not published yet so still a draft). On that page I have created a Contact 7 form at the bottom of the page. I have styled it with some custom CSS, so it’s in two columns with the css code below.

My problem is it’s not aligned with the content above. There is space at the right side of the form. How can I align it with the rest of the content above?

Another problem is, when the form is filled out with errors and I click on “Send” button, then the field “Hvad er dit budget?” pushed down. How can I solve this problem?

Best regards
Morten

I hope you can help me.

CSS custom code

/* Responsive CSS for Contact 7 form */

#responsive-form{
	max-width:1024px /*-- change this to get your desired form width --*/;
        margin:0 auto;
        width:100%;
}
.form-row{
	width: 100%;
}
.column-half, .column-full{
	float: left;
	position: relative;
	padding: 0.65rem;
	width:100%;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

/**---------------- Media query ----------------**/
@media only screen and (min-width: 768px) { 
	.column-half{
		width: 47%;
	}
}

.wpcf7 label {
    width: 100%;
}

Contact 7 form

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

<div class="form-row">
<div class="column-half"><label>Dit fornavn + efternavn (skal udfyldes)<br /> [text* your-name placeholder "Indtast fornavn og efternavn"]</label></div>
<div class="column-half"><label>Din e-mail (skal udfyldes) [email* your-email placeholder "Indtast din e-mail adresse"]</label></div>
</div>

<div class="form-row">
<div class="column-half"><label>Adresse (skal udfyldes) [text* Adresse placeholder "Angiv din adresse til beregning af forsendelsesomkostninger"]</label></div>
<div class="column-half"><label>Deadline [text Deadline placeholder "Har du en deadline for opgaven?"]</label></div>
</div>

<div class="form-row">
<div class="column-half"><label>Vælg medie [select Medie include_blank "Maleri (akryl)" "Illustration (akvarel)" "Ved ikke"]</label></div>
<div class="column-half"><label>Hvad er dit budget? [select* Budget include_blank "500 - 1.000 kr." "kr. 1.000 - 2.000" "kr. 2.000 - 3.000" "kr. 3.000 - 4.000" "kr. 4.000 - 5.000" "kr. 5.000+"]</label></div>
</div>

<div class="form-row">
<div class="column-full"><label>Beskriv opgaven kort (skal udfyldes) [textarea* Beskrivelseafopgave placeholder "Beskriv dine ønsker til kunstværket?"]</label></div>
</div>

<div class="form-row">
<div class="column-full">[submit "Send"]</div>
</div>

</div>

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Try clearing:

.form-row {
    clear: both;
}

[morruu]

Thanks.

I used the column code from your theme together with clearfix on the rows.

It solved the problem.

Best regards
Morten

[Rui Guerreiro – SUPPORT]

Great. Glad it’s sorted.
-Rui