Responsiveness

I had somewhat the same problem. When I viewed one of my websites containing a CF7 form on my iPad, everything scaled property EXCEPT for the CF7. We had previously created some code to customize the look of the form and placed that code in the theme stylesheet (style.css). What I had to do was comment out (or completely remove) the height and width attribute and now the form scales properly regardless of what device it is viewed on (pc, tablet, iPhone).

I don’t know if what I did would work on your theme of not. From what I’ve read, some themes are more (or less) responsive to customization than others. You don’t want to do any customization to the form code directly, because of there is an update to the CF7 code, that will overwrite the customization code.

Hope this helps.

Hi Dave

Many thanks for the response.

I’m a bit of a newbie to WordPress so a bit confused with what you’ve advised.

I’d really appreciate it if you could give me a step by step guide to doing what you’ve suggested.

Sorry to be a pain!!!

Best regards

Glenn

Glenn,

First things first. Let’s see if your theme will accept and handle a change to a plugin. From what I have seen, some theme are more finicky than others.

From your WordPress dashboard, click Appearance, then Editor. You will see a page entitled Edit Themes. On the right side, you will see a list of theme files. Towards the bottom of the list, you will see ‘Styles’ and below that is ‘Stylesheet’. Click it and the style.css file will appear in the big edit window.

Scroll to the bottom and add this code (directly from one of my forms – can be edited as you please).

.form_name - use whatever fits your need{
    background: #F7F7F7;
 /* width : 380px; */
 /* margin: 10px auto; */
 /* margin-left: 0; */
 /* position: relative; */
 /* height: 300px;  */
 /* border: 2px solid #D4F4FF; */
 /* border-radius:10px; */
 /* -moz-border-radius:10px; */
    box-shadow: 10px 10px 5px #888888;
}

On form_name in the above code, change it to whatever you want, just make sure you include the period and place that name (WITHOUT the period) in a <div></div> pair surrounding the form code (ex: <div class = “form_name”> at the beginning and </div> at the end.

In the code above we want to test and see if your theme will accept these changes to the CF7 plugin. In the above code, the /* and */ comment out the lines they surround. What we have will test both the color of the form and the shadow to the right and bottom of the form. If the form color and shadow display properly, then we know that your theme will handle the other changes.

After pasting the above code into you theme stylesheet file, make sure you click the ‘Update File’ button below the edit window. Assuming that the color changes display correctly, you can uncomment the other changes AND change the background color, shadow color, and any of the other changes to meed your needs. Save the changes and test.

A word of caution – before you make a change, save the original code to a text editor so that if the changes your made cause a problem, you can copy back from the saved code to get back to your starting point.

Dave

Hi Dave

Sadly it doesn’t appear to be working.

I placed the code as it is in your example directly at the bottom under the code for the footer but when I updated and previewed it nothing changed.

So frustrating!!!

You’d think that someone would create a responsive contact form plugin. They would make a small fortune!!!

Thanks for all your help, I really appreciate it.

Kind regards

Glenn

I guess I should have asked what you mean by ‘responsive’?

Hi, I found this post while looking for a way to resize Contact Form 7 so that it looks good on all screen sizes. (I’m using a responsive Genesis theme.)

Here’s a quick and simple fix that I eventually discovered on my own:

1. Open up your theme’s style.css file, and
2. Add the following CSS:

.wpcf7-form-control {
	width: 100%;
}

This code will make all the input fields fill the whole area they’re in – which works perfectly on my site because the content wrapper is only about 700px. Because it’s a %, the form gets smaller as I resize the screen.

This applies to all the fields, even the submit button, so I also added some extra CSS to make the button smaller:

.wpcf7-submit {
	width: 50%;
}

Hope that helps.

You may also want to use a media query so the formatting only applied to smaller devices.

@media screen and (max-width: 599px) {

  .wpcf7-form-control {
    width: 95% !important;
  }

  .wpcf7-form-control.wpcf7-submit {
    font-size: 18px;
    font-size: 1.286rem;
    padding: 14px 0;
    padding:  1rem 0;
  }
}

What about the validation messages, please? Anyway to control their responsiveness??

I’m actually having the opposite problem. In my theme (Responsive Theme) is has this css by default:

select, input[type=”text”], input[type=”password”] {width:100%;}

… which is essentially ignoring the size of the text fields that I specified from within the Contact 7 edit screen in the dashboard. So I’m getting my contact form fields at 100% widths that would take up a full page, which obviously doesn’t work.

found a workaround. I added this into my custom stylesheet ..

select, input[type=”text”], input[type=”password”] {
width: auto;
}

Thank you emilysaurus. Your solution wored perfect for me.

Hi i’m a noob myself ??

Just came across this post and first off thank-you!

Just a quick question though…. i used the code posted above by marionoble and i can see on my old nexus the contact form perfectly, cannot check my iphone as its crashed ??

Is there a way i can adjust now the input text boxes without affecting mobiles/pc tablets? or it won’t affect the code i used?

thank-you muchly ??

I am using the Parabola theme and none of these css codes work when applied to the stylesheet. anyone have some suggestions?

@cdyremix, Use firebug to find out the css applied to your form. You can add the css thru the editor in dashboard. If you are attaching to style.css put the new styles at the bottom and do it also for the respective media queries.

Please help, I am using contact form 7 in the sidebar of my website, i have also added an image relative to the form.This is the HTML code used –

<div style=”position: relative; width:auto;height:250px”>
<div style=”float:left;”><img style=”margin-right:5px;margin-left:-5%;margin-top:20%;” alt=”” src=”https://***.com/wp-content/uploads/2013/08/untd1.png&#8221; width=”73%” height=”200%” /></div>
<div>
<h6 style=”position: absolute; margin-right:10%;margin-left:44%; width:56%; height:100%; float: right;”>[contact-form-7 id=”206″ title=”sidebar Contact form”]</h6>
</div>
</div>

The form looks perfect in window, but in mobile view the form scales a bit higher rate,it increses upto twice the image and the place holders are not visible.Is there a way i can fix this or please suggest any other way i can place the image in such a manner,Someone please help.
Thank you.