CF7 Skins Field Rules – Tools

Last Updated on July 25, 2020 by Neil Murray

These rules are intended to control the building of Contact Form 7 forms via the CF7 Skins Visual Editor. They seek to make it easier for users by limiting the drag & drop operations available to those that produce semantic HTML forms.

Flow content: a abbr address area (if it is a descendant of a map element) article aside audio b bdi bdo blockquote br button canvas cite code command datalist del details dfn dialog div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong style (if the scoped attribute is present) sub sup svg table textarea time u ul var video wbr text
.

Rules

Form

  • Flow content, but not containing <form> elements.
  • Automatically add surrounding <ol> when <li> inserted.

Fieldset

  • Optionally a legend element, followed by flow content.
  • Automatically add surrounding <ol> when <li> inserted.

List-Ol

  • Zero or more <li> elements, which in turn often contain nested <ol> or <ul> elements.
  • Automatically add surrounding <li> when <ol> inserted.

List-Li

  • Flow content.
  • Automatically add surrounding <li> when <ol> inserted (nested).
  • Only one CF7 tag child.

Paragraph

CF7 Tag

  • Can’t have child.
  • Only one tag inside <li>.
  • Automatically add surrounding <li> when dragged into <ol>.
  • Only one reCAPTCHA tag per form.
  • Only one submit tag per form.

CURRENT/PLANNED

FORM
[x] children can be:
    [x] Fieldset
        [x] automatically add enclosed LIST-OL & LIST-LI - refer #224
    [x] List OL
        [x] automatically add enclosed LIST-LI
    [x] LIST-LI
        [x] automatically add surrounding LIST-OL
    [x] CF7 Tags
        [x] automatically add surrounding LIST-OL & LIST-LI (if not reCAPTCHA or Submit) - refer #222
    [x] Paragraph
FIELDSET
[x] children can be:
    [x] Fieldset
        [x] automatically add enclosed LIST-OL & LIST-LI - refer #224
    [x] List OL
        [x] automatically add enclosed LIST-LI
    [x] LIST-LI
        [x] automatically add surrounding LIST-OL
    [x] CF7 Tags
        [x] automatically add surrounding LIST-OL & LIST-LI (if not reCAPTCHA or Submit) - refer #222
    [x] Paragraph
[x] can be parent of another fieldset
[x] can be child of another fieldset
LIST-OL
[x] children can be:
    [x] LIST-LI
    [x] LIST-OL, automatically add surrounding LI
    [x] CF7 Tags, automatically add surrounding LI
    [x] Fieldset, automatically add surrounding LI
    [x] Paragraph, automatically add surrounding LI
[x] automatically add surrounding LI when CF7 Tags dragged into OL
[x] don't add surrounding LI when drag LI into OL
[x] automatically include LI when OL dragged into any valid field
LIST-LI
[x] children can be:
    [x] LIST-OL
    [x] LIST-LI, but automatically add surrounding OL
    [x] CF7 Tags, only 1 CF7 Tag child
    [x] Fieldset
    [x] Paragraph
[x] can have multiple LIST-OL children
CF7 TAG
[x] can't have child
[x] can have only 1 CF7 Tag inside LI
    [ ] add surrounding LIST-LI to additional CF7 Tag - refer #206
    (WAS display message showing why this action is not permitted)
[x] automatically add surrounding LI when CF7 Tag dragged into OL
RECAPTCHA
can add as child of:
    [x] FORM
    [x] FIELDSET
    [x] LIST-OL
    [x] LIST-LI
[x] can't have more than 1 in form
    [x] prevent from adding
    [ ] display message showing why this action is not permitted
SUBMIT
can add as child of:
    [x] FORM
    [x] FIELDSET
    [x] LIST-OL
    [x] LIST-LI
* [x] can't have more than 1 Submit button in form
    [x] prevent from adding
    [ ] display message showing why this action is not permitted
PARAGRAPH
[x] can't have child
    [ ] display message showing why this action is not permitted

Further Reading