Support » Plugins » Kontaktformular mit Checkboxen im Dropdown-Menü

  • Hallo zusammen,

    ich benutze zur Zeit CF7 als Kontaktformular aber mit diesem ist es leider nicht möglich Checkboxen im Dropdown-Menü anzulegen, bzw. nicht über die Standardeinstellungen. Kennt ihr ein Kontaktformular-Plugin das so etwas kann? Oder kennt ihr eine Lösung wie ich das mit dem CF7 realisieren kann?

    Vielen Dank.

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 18)
  • Edi

    (@psychosopher)

    Checkboxen im Dropdown-Menü

    Was meinst Du damit? Hast Du ein Beispiel dafür?

    Checkboxen sind normalerweise Input-Felder, Dropdown-Menüs andere. Du kannst ja beispielsweise auch nicht einen Radion Button in einem Textfeld verwenden…

    Thread-Starter TaddyWP

    (@taddywp)

    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.

    Edi

    (@psychosopher)

    Dann hast Du das ja bereits. 🙂

    Was spricht dagegen, Contact Form 7 mit dem einen oder anderen Code zu erweitern?

    Hallo zusammen,
    bei der Installation von Woocommerce läuft alles immer nur auf englisch. Meine Webseiten sind Deutsch. Wenn ich Force Translation Upgrade erzwingen möchte erhalte ich Failed to install/update the translation: Sorry but there is no translation available for your language =/
    Kann mir da jemand bitte helfen? Wäre total Klasse, Danke!

    Edi

    (@psychosopher)

    @christian-45 Wie war das doch gleich mit „Eine Frage = Ein Thread“?

    https://de.forums.wordpress.org/topic/faq-bitte-vor-dem-posten-lesen

    oha, Danke liebe Edi Goetschel, das war keine Absicht! Soooorrry!!

    @christian-45: Bitte für deine Frage einen eigenen Thread öffnen. Danke.

    Thread-Starter TaddyWP

    (@taddywp)

    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.

    Edi

    (@psychosopher)

    Die Bauteile hast Du, jetzt müssten sie nur noch richtig zusammengesetzt werden. Was natürlich mit Arbeit und vor allem Testen verbunden ist. Ich weiss nicht nicht, ob hier jemand das einfach so übernehmen möchte.

    Das Mantra dürfte Dir bekannt sein: WordPress ist kostenlos, aber… 😉

    Thread-Starter TaddyWP

    (@taddywp)

    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]

    Edi

    (@psychosopher)

    Du kannst mit Hilfe der Konsole schauen, warum das JavaScript nicht funktioniert. Das kann verschiedene Ursachen haben.

    Thread-Starter TaddyWP

    (@taddywp)

    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?

    Edi

    (@psychosopher)

    Ach so…

    Jedes Feld muss einen Namen haben. Dieser wird bei Contact Form 7 beispielsweise für ein obligatorisches Textfeld „Ort“ so mitgegeben:

    [text* ort]

    Von WordPress wird das dann so ausgegeben:

    <span class=“wpcf7-form-control-wrap ort“><input type=“text“ name=“ort“ value=““ size=“40″ class=“wpcf7-form-control wpcf7-text wpcf7-validates-as-required“ aria-required=“true“ aria-invalid=“false“ /></span>

    Du könntest also auch HTML verwenden.

    Umgekehrt kannst Du in beiden Fällen in der E-Mail den Shortcode [ort] verwenden.

    Thread-Starter TaddyWP

    (@taddywp)

    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?

    Edi

    (@psychosopher)

    In den Mail-Tab kommt nur der Code mit dem Namen des Felds.

    Contact Form 7 generiert aus einer Art Shortcodes Formulare, die mit einem Shortcode in Beiträgen und Seiten verwendet werden können. Statt den Shortcode zu verwenden, könnte auch das vom Shortcode generierte Formular verwendet werden. Beispielsweise eben, wenn JavaScript eingebunden werden soll.

    Genauer erklärt wird das hier:

    http://www.karlakarla.com/add-javascript-to-a-contact-form-7-form/

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 18)
  • Das Thema „Kontaktformular mit Checkboxen im Dropdown-Menü“ ist für neue Antworten geschlossen.