contact form 7 width

so i then tried :
div.wpcf7{width:100% !important;}
which seemed to have solved the problem, but when i used the same technique again,it didnt have the same effect.

please help.

See Styling Contact Form – there is a link to an article I wrote at the bottom of that page (which is recommended by the CF7 plugin author, though I’m not allowed to link directly to it here), that covers this topic in detail.

Use Chrome Dev Tools to examine the CSS styling applied to your form & determine what changes you need to make.

If you can include a link to you form, others can use Chrome Dev Tools to suggest suitable CSS.

Hi Neil.
I did use my dev tools, but that didnt seem to make a difference, going to try again today.

yeah web dev tools arent changing the width of the form either.

here is my code :

div.wpcf7{
width:100% !important;
}

.wpcf7{
background:#ccc;
width:100%;
}

neither of these css have made the form span the whole page width.

I think I am going to have to create an additional <div> ‘wrapper’, as changing things in web dev and the css on the form arent doing anything.

I read that all forms have the class of wpcf7 and that the whole form container is made of a div with the class wpcf7, but adding changes to the width of a 100% dont have affect and if i make changes in pixels it only applies to the right of the form, I am trying to get the container to spread the entire page width.

many thanks in advance

I have tried to change the appearance via web dev, but the ‘width’ specified in % doesn’t seem to do anything .

here is the Form code:

 <form method="post" action="#">
                        <div class="inquiry-form">
                <h3 class="inquiry-title">Enquire about this property</h3>
                <div role="form" class="wpcf7" id="wpcf7-f12490-p12399-o1" lang="en-GB" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/property/detached-mediterranean-style-villa-in-cabo-roig/#wpcf7-f12490-p12399-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="12490" />
<input type="hidden" name="_wpcf7_version" value="5.0.4" />
<input type="hidden" name="_wpcf7_locale" value="en_GB" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f12490-p12399-o1" />
<input type="hidden" name="_wpcf7_container_post" value="12399" />
</div>
<p><label> Your Name (required)<br />
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> Your Email (required)<br />
    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> Subject<br />
    <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" /></span> </label></p>
<p><label> Your Message<br />
    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
<input type='hidden' class='wpcf7-pum' value='{"closepopup":false,"closedelay":0,"openpopup":false,"openpopup_id":0}' /><div class="wpcf7-response-output wpcf7-display-none"></div></form></div>            </div>
        </form>

I just can’t find how to get it to go full width.
I applied a background colour to see the output and using the div.wpcf7 worked once, but after that the code just didnt repaet itself and now I am at a loss.

please help.
Many thanks in advance

If you can include a link to you form, I can use Chrome Dev Tools to suggest suitable CSS – without that I can’t see what is going on with your form styling.

Issue re-posted with form link at https://www.ads-software.com/support/topic/issues-with-cf7/

Chrome Dev Tools shows the following CSS being applied to your CF7 form:

div.wpcf7 {
    background-color: #ccc;
    width: 100% !important;
    border: 5px solid;
}

div.wpcf7 {
    margin: 0;
    padding: 0;
}

This appears to working as expected but you can’t see the background color because the padding is set to zero.

Your planned changes appear very easy to implement provided you have a basic understanding of how to use Chrome Dev Tools.

[Solved]

Thanks for all your help.