• Resolved gustav7104

    (@gustav7104)


    Hi and thanks for an excellent plugin!

    There’s a slight problem with the formatting for conditional fields.

    All other input fields are wrapped in <p></p> but the conditional field isn’t:

    <form action=”/contact-us-3/#wpcf7-f1202-p1197-o1″ method=”post” class=”wpcf7-form” novalidate=”novalidate”>
    <p>I am on a cruise<br>
    <span class=”wpcf7-form-control-wrap i-am-on-a-cruise”>
    <span class=”wpcf7-form-control wpcf7-checkbox”>
    <span class=”wpcf7-list-item first last”>
    <label>
    <input type=”checkbox” name=”i-am-on-a-cruise[]” value=”Yes”>
    <span class=”wpcf7-list-item-label”>
    Yes
    </span>
    </label>
    </span>
    </span>
    </span>
    </p>
    <div data-id=”group-336″ data-orig_data_id=”group-336″ data-class=”wpcf7cf_group” class=”wpcf7cf-hidden”>
    I am docking at<br>
    <span class=”wpcf7-form-control-wrap docking-at”>
    <span class=”wpcf7-form-control wpcf7-radio”>
    <span class=”wpcf7-list-item first”>
    <input type=”radio” name=”docking-at” value=”Villefranche”>
    <span class=”wpcf7-list-item-label”>Villefranche</span>
    </span>
    <span class=”wpcf7-list-item”>
    <input type=”radio” name=”docking-at” value=”Monaco”>
    <span class=”wpcf7-list-item-label”>Monaco</span>
    </span>
    </span>
    </div>
    <p>Message<br>
    <span class=”wpcf7-form-control-wrap message”>
    <textarea name=”message” cols=”40″ rows=”10″ class=”wpcf7-form-control wpcf7-textarea” aria-invalid=”false”></textarea>
    </span>
    </p>
    <p>
    <input type=”submit” value=”Submit” class=”wpcf7-form-control wpcf7-submit”>
    <span class=”ajax-loader”></span>
    </p>
    <div class=”wpcf7-response-output wpcf7-display-none”></div>
    </form>

    As a result, my page renders with no margin between the radio and the textarea fields.

    I had to add an extra CSS rule to add the margin to the offending div, but it’s not exactly clean…

    Thanks,

    Gustav

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author Jules Colle

    (@jules-colle)

    The group generates a <div> element by default, and you cannot put <div> inside <p> (that’s invalid HTML).

    However, you could create your group with inline option [group my-group inline], then the group will be rendered as a <span> element. But you need to be aware to put no block level elements inside it then.

    You best bet is probably to simply not put the group inside a <p> tag, and adjust your CSS styles instead.

    • This reply was modified 6 years, 1 month ago by Jules Colle.
Viewing 1 replies (of 1 total)

The topic ‘Formatting problem’ is closed to new replies.