Support » Plugin: Contact Form 7 » css help needed

Viewing 6 replies - 1 through 6 (of 6 total)
  • oh, and what is the reason the ‘input fields’ don’t align to the right?

    To change the style of your CF7 forms you would need to edit the CSS style sheets used by your WordPress theme.

    See Styling Contact Form for a general explanation of styling CF7 forms using CSS. If you are not familiar with CSS, this page also includes some links to where you can learn CSS.

    The most common and preferred method is to create a Child Theme and make any necessary additions to the CSS in the child themes style.css only, rather than directly in the themes styles.css. That way you don’t loose your changes when you update the theme.

    Use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail. Once you understand how the HTML and CSS is configured in your CF7 form, you should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.

    Also good idea to target CSS classes & ids used within your CF7 forms only, so that your CSS changes don’t inadvertantly effect other elements on your website.

    If you are uncomfortable editing CSS style sheets you may prefer to use a custom CSS plugin like My Custom CSS.

    Hi Buzztone,

    Thanks for your answer and I really appreciate you’re trying to learn me something 😉

    I found out with Firebug that I need to change:
    – span.wpcf7-list-item
    – span.wpcf7-list-item input (the box)
    – span.wpcf7-list-item-label (the label that says ‘option’)

    I played around a little bit, and I see I can move the items, with code like this:

    span.wpcf7-list-item input {
    margin-left: -240px;
    }
    span.wpcf7-list-item-label {
    margin-left: 200px;
    }

    But my problem is that the checkbox and the option label are on ‘different lines’. I don’t see how I can move the checkbox before the label…

    Can you give me another hint?

    By adding the following CSS code in your plugin I got the text a bit bigger:

    form.wpcf7-form p {
    font-size: 16px;
    }
    input.wpcf7-form-control.wpcf7-submit {
    font-size: 16px;
    }
    .wpcf7 input[type=”text”],
    .wpcf7 input[type=”email”],
    .wpcf7 textarea
    {
    font-size: 16px;
    }

    Thanks for your help sofar.
    Jan

    I use Ordered List elements to display multiple fields on single line.

    HTML:

    <ol class="singleline">
    <li> <label for="your-name">Your Name (required)&nbsp</label> [text* your-name] </li>
    <li> <label for="your-email">Your Email (required)&nbsp</label> [email* your-email] </li>
    </ol>

    Added to Form section of CF7 interface. <label> tags are added for improved accessability.

    CSS:

    .wpcf7-form .singleline ol {
    list-style: none;
    margin: 0;
    }
    
    .wpcf7-form .singleline li{
    display: inline-block;
    float: left;
    margin-right: 10px;
    padding-right: 10px;
    }

    Added to Child Theme style.css

    RE: I don’t see how I can move the checkbox before the label…

    See Custom Layout for Checkboxes and Radio Buttons

    Thanks again, Buzztone.

    I’m going to study on this. Let you know when it works.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘css help needed’ is closed to new replies.