WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Width feature not working? (4 posts)

  1. Crossy
    Member
    Posted 5 months ago #

    Hi,

    I've tried using the width feature, but it does not seem to apply. So I figured i'd CSS it in myself, using max-width: 500;. However, when I do that, the text underneath seems to come up next to it.

    Figured it was some floating comment that was making it appear on the side, but it appears to be a height thing of the whole contactform. Hence a clear: both; didn't work either.

    Uploaded a screen for clarity: http://imgur.com/iLWCc0g

    I'd like the text on the right, to be under the form.

    Anyone has a suggestion for me?

    Best regards,
    Dave

    http://wordpress.org/plugins/contact-form-7/

  2. buzztone
    Member
    Posted 5 months ago #

    The overall size of the form elements is generally controlled by the CSS in your current WordPress theme rather than the "size" you use in the Form section of the CF7. This refers to the size of the standard HTML size attribute which may or may not control overall element size.

    If you want to control the width of fields, you can do it by editing the CSS stylesheet in your theme.

    For details, see Styling Contact Form. There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.

    If you include a link to your Contact Form 7 form, others here may be able and willing to offer a possible solution.

    Link will allow people to use Firebug or Chrome Dev Tools to understand the CSS used for your CF7 form elements.

  3. Crossy
    Member
    Posted 5 months ago #

    Hi Buzztone,

    Thanks for your time.

    I don't think the styling system is ideal for this plugin, but it works I guess. I wanted the width to be about 50% and float in the middle, but

    margin-left: auto; margin-right: auto;

    doesn't seem to function for it.

    I've used this now, which seems to the the job up to a sertain point of acceptance on my part ;)

    div.wpcf7 {
    	margin: 0;
    	padding: 0;
            margin-left: 20px;
            margin-right: 20px;
    }
    
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 textarea,
    .wpcf7 input[type="submit"]
    {
        max-width: 500px !important;
    }
  4. buzztone
    Member
    Posted 5 months ago #

    If you include a link to your Contact Form 7 form, others here can use Firebug or Chrome Dev Tools to understand the CSS used for your CF7 form elements.

    Without a link it's just not practical to offer further advice.

Reply

You must log in to post.

About this Plugin

About this Topic