Kontaktformular mit Checkboxen im Dropdown-Menü

Hallo,

ich meine so etwas:

http://jsfiddle.net/evfnLn0x/

Besser wäre allerdings eine dieser Lösungen:

http://www.jqueryrain.com/?iF5ue7jr

Da hätte der Kunde zusätzlich eine Übersicht über das bereits ausgewählte, dass zusätzlich ausgegraut wird.

Hallo,

leider weiß ich

a) nicht wo ich diesen Code einfügen muss

b) nicht was ich bei Kontaktformulare/Bearbeiten im Reiter „Formular“ einfügen muss damit das Dropdown-Menü mit Checkboxen im Kontaktformular angezeigt wird.

ok, verstehe. Habe jetzt von der Seite: http://jsfiddle.net/evfnLn0x/

diesen Teil:

.dropdown-check-list {
  display: inline-block;
}
.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}
.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}
.dropdown-check-list ul.items li {
  list-style: none;
}

in die style.css meines Child-Themes eingefügt und diesen Teil:

<div id="list1" class="dropdown-check-list" tabindex="100">
<span class="anchor">Select Fruits</span>
<ul id="items" class="items">

<li><input type="checkbox" />Apple </li>
<li><input type="checkbox" />Orange</li>
<li><input type="checkbox" />Grapes </li>
<li><input type="checkbox" />Berry </li>
<li><input type="checkbox" />Mango </li>
<li><input type="checkbox" />Banana</li>
<li><input type="checkbox" />Tomato</li>
</div>

<script type="text/javascript">
    var checkList = document.getElementById('list1');
    var items = document.getElementById('items');
        checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
            if (items.classList.contains('visible')){
                items.classList.remove('visible');
                items.style.display = "none";
            }
            else{
                items.classList.add('visible');
                items.style.display = "block";
            }
        }
        items.onblur = function(evt) {
            items.classList.remove('visible');
        }
</script>

in den „Formular“-Tab von Contact Form 7 eingefügt. Das Dropdown-Menü mitsamt den Checkboxen wird angezeigt und ich kann auch Häckchen setzen aber wie kann ich die angehakten Einträge in der E-Mail anzeigen lassen? Ich habe es mit der id „[list1]“ versucht, was aber nicht funktioniert.

[Code immer auch als Code markieren! Danke. – Torsten]

Hallo,

ich meinte eigentlich nur dass ich nicht weiss was ich im „E-Mail“-Tab von CF7 als Shortcode eintragen muss um die ausgewählten Optionen in der zu empfangenen E-Mail anzeigen zu lassen. Oder worauf hast du JavaScript bezogen?

Hallo,

hm, jetzt steh ich etwas auf dem Schlauch. Muss ich den Teil den ich im mein Formular-Tab eingefügt habe, um den span-Tag von dir erweitern oder kommt das in den E-Mail-Tab?