4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

How Can I align Fields In Contact Form 7

by seanpbh
1 replies
  • WEB DESIGN
    • |
I am using the contact form 7, but the input fields are all over the place.
How can I centre the input boxes so that they are all under one another. The text can stay on the left.

See what I mean here

Logo Design Order Form | sean doherty designs
#align #contact #fields #form
  • Profile picture of the author David V
    Originally Posted by seanpbh View Post

    I am using the contact form 7, but the input fields are all over the place.
    How can I centre the input boxes so that they are all under one another. The text can stay on the left.
    Normally you might get away with just adding a couple lines of css, but keeping long wrapping text labels to the left of the form presents additional issues.
    This will work and help separate each "row" into their own div.

    Drop this into your theme style.css file:
    Code:
    span.wpcf7-form-control-wrap {
	position: relative;
	margin-left:30px;
}
div.wpcf7 .formlabel {
	margin-bottom: 10px;
}
div.wpcf7 .form-group {
margin-bottom: 30px;
clear:both;
}
.form-group {
margin-bottom: 10px;
}
div.wpcf7 .formlabel {
float: left;
width: 48%;
padding-top: 8px;
text-align: right;
}
label {
display: block;
margin-bottom: 5px;
}
    You will go to the edit screen for your form.
    On the left is where CF7 shows the form code prior to output.

    You will wrap your text and inputs like so:
    HTML Code:
    <!-- Example field -->
<div class="form-group">
	<label class="formlabel">Exact name you would like to be used in Logo</label>[text* logo-name]</div>

<!-- Example button -->
<div class="form-group">[submit "Submit Form"]</div>
    and continue you do this for each field/question you have in the form.
    DO NOT hit the enter key after the label, or it will auto insert a <br> tag and the inputs will drop down.

    The output in the source code will look like this after:
    HTML Code:
    <div class="form-group">
<label class="formlabel">Exact name you would like to be used in Logo</label>  
<span class="wpcf7-form-control-wrap text-987">
	<input type="text" name="text-987" value="" class="wpcf7-form-control wpcf7-text" size="50"></span>
</div>
    You can fine-tune your form quite a bit, but it would require more time.
    This is a quick and easy way to get the alignment you want and keep the text to the left of the inputs.

    The text labels float left and are aligned right and auto wrap. You don't need to add <br> tags.
    You can change the text alignment left if you want under the div.wpcf7 .formlabel, text-align:right in the code above.

    Keep in mind if you upgrade your theme, the style.css will be overridden. I think elegantthemes can use child themes easily, so you'd be better to do that.
    Personally I use gravity forms, I like it so much better.
    {{ DiscussionBoard.errors[7635417].message }}

Trending Topics