Support » Plugin: Contact Form 7 » Text areas in the same line

Viewing 1 replies (of 1 total)
  • While the use of HTML paragraph <p> elements is shown in the default Contact Form 7 form, this does make aligning form fields very difficult.

    As the text to the left of the text fields is done as paragraphs, the CSS for the form fields is applied from the last bit of text. As the paragraphs end at varying points, so will the fields begin and end at varying points.

    Use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail. The Layout viewer within Firebug should be useful in seeing the layout of the text fields.

    The use of labels as inline-blocks to replace the paragraphs to the left of the field would likely result in more uniform text fields.

    HTML:

    <label for="cf7-name">Name</label> [text cf7-name]
    <label for="cf7-number">Number</label> [text cf7-number]

    Added to Form section of CF7 interface. Labels also give improved accessability.

    CSS:
    `.wpcf7-form label {
    display: inline-block;
    width: 120px;
    }

    Added to Child Theme style.css. Class .wpcf7-form used to limit changes to within CF7 forms.

Viewing 1 replies (of 1 total)
  • The topic ‘Text areas in the same line’ is closed to new replies.