Ankündigung

Einklappen
Keine Ankündigung bisher.

Formular in der Lightbox

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Formular in der Lightbox

    Hallo zusammen,
    ich habe einen CTA, der auf eine Lightbox verlinkt.
    Für die Lightbox habe ich ein eigenes Template mit nur dem Artikel darin.

    Sieht soweit alles gut aus, aber wenn der Formular-Button gedrückt wird, wird das Formular nicht versendet.
    Die Lightbox geht zu und das war's. Es wird nicht auf die Danke-Seite weitergeleitet (das wäre schön, wenn es innerhalb der Lightbox wäre) und laut Systemlog wird auch nix versendet.

    Habe ich irgend etwas wichtiges vergessen?

  • #2
    Hast du es so aufgebaut:
    - Das Formular auf eine eigene Seite legen, die ein abgespecktes Seitenlayout fährt. Eclipse liefert eines für lightboxes mit.
    - Die Lightbox dann auf diese Seite zeigen lassen.
    http://www.premium-contao-themes.com

    Kommentar


    • #3
      Ja, genau so hab ich es gemacht.


      Kommentar


      • #4
        Ich habe das Formular testweise mal auf eine normale Seite gelegt, da funktioniert es einwandfrei.
        Habt ihr Ideen, was ich da noch überprüfen könnte?

        Kommentar


        • #5
          Um Seitenwechsel innerhalb der Colorbox überhaupt zugänglich zu machen, muss die Colorbox im j_colorbox Template die Option iframe:true bekommen. Nur innerhalb von iframes ist der Seitenwechsel erlaubt und möglich.

          Die Lösung im Contao-Forum finde ich gut:
          https://community.contao.org/de/show...via-j_colorbox
          http://www.premium-contao-themes.com

          Kommentar


          • #6
            Ok, das teste ich aus.
            Würde das dann auch das Problem des nicht versendeten Formulars lösen, oder bezieht sich das nur auf die Weiterleitungsseite?

            Kommentar


            • #7
              Zitat von maren08 Beitrag anzeigen
              Ok, das teste ich aus.
              Würde das dann auch das Problem des nicht versendeten Formulars lösen, oder bezieht sich das nur auf die Weiterleitungsseite?
              Die Weiterleitung erfolgt nach Formular-Aktion. Ich habe es in einer normalen Colorbox getestet. Da leitet das Formular weiter (nur eben nicht innerhalb der Lightbox).

              http://www.premium-contao-themes.com

              Kommentar


              • maren08
                maren08 kommentierte
                Kommentar bearbeiten
                Sorry, ich fürchte, das verstehe ich nicht,
                Wie kann ich denn diese normale Colorbox ansprechen? Wäre das einfacher?

            • #8
              Ich bin leider nur Anwender und um Umsetzen von Änderungen innerhalb von Templates kann ich mich nur mit Trail & Error entlang hangeln.
              Ich habe das Beispiel von oben auf das Tempate j_colorbox angewandt:

              <?php

              // Add the colorbox style sheet
              $GLOBALS['TL_CSS'][] = 'assets/colorbox/css/colorbox.min.css'.(\PCT\SEO::getProtocol() == 'http2' ? '' : '|static');
              $GLOBALS['TL_JAVASCRIPT'][] = TL_ASSETS_URL .'assets/colorbox/js/colorbox.min.js'.(\PCT\SEO::getProtocol() == 'http2' ? '' : '|static');
              ?>
              <script>
              jQuery(document).ready(function() {
              jQuery('a[data-lightbox]').map(function()
              {
              jQuery(this).colorbox(
              {
              // Put custom options here
              loop: false,
              rel: jQuery(this).attr('data-lightbox'),
              maxWidth: '95%',
              maxHeight: '95%'
              });
              });
              jQuery('a[data-lightbox-iframe]').map(function()
              {
              jQuery(this).colorbox(
              {
              // Put custom options here
              loop: false,
              rel: jQuery(this).attr('data-lightbox'),
              width: '80%',
              height: '90%',
              iframe: true
              });
              });

              jQuery(document).bind('cbox_complete', function(e)
              {
              var text = jQuery.colorbox.element().next('.caption').text();
              if( text )
              {
              var caption = jQuery('#cboxBottomLeft').append('<div id="cboxCaption">'+text+'</div>');
              jQuery('#colorbox').height( jQuery('#colorbox').height() + caption.height() );
              }
              });

              });
              </script>

              Das ändert aber nichts am Verhalten. Beim Element Hyperlink (Erweitert) habe ich im Feld Lighbox sowohl 'lightbox-iframe' als auch nur 'iframe' probiert.

              Ich hatte zu Beginn anstatt beide Varianten im Template zu haben, mal nur das iframe:true in des bestehende Template ergänzt.
              Dann hat sich eine Weise Seite mit gänzlich ungestyltem Formular geöffnet.
              Das Formular wurde versendet und auf die Danke-Seite weitergeleitet.

              Kommentar


              • #9
                Ich hatte zu Beginn anstatt beide Varianten im Template zu haben, mal nur das iframe:true in des bestehende Template ergänzt.
                Dann hat sich eine Weise Seite mit gänzlich ungestyltem Formular geöffnet.
                Das ist der richtige Weg und Inhalte in iframes erben nicht das Styling der Hauptseite. Ein iframe ist quasi eine autarke Seite. Du kannst der Seite ein anderes Seitenlayout geben, das die Styles der Hauptseite beinhaltet.
                http://www.premium-contao-themes.com

                Kommentar


                • #10
                  Hallo,

                  gleiches Problem, wenn ich allerdings "iframe: true" einsetze geht das Popu gar nicht mehr.
                  Beim Hyperlink habe ich beim Attribut lediglich "lightbox"

                  j_colorbox.html5

                  ----------------

                  <?php

                  // Add the colorbox style sheet
                  $GLOBALS['TL_CSS'][] = 'assets/colorbox/css/colorbox.min.css'.(\PCT\SEO::getProtocol() == 'http2' ? '' : '|static');
                  $GLOBALS['TL_JAVASCRIPT'][] = TL_ASSETS_URL .'assets/colorbox/js/colorbox.min.js'.(\PCT\SEO::getProtocol() == 'http2' ? '' : '|static');
                  ?>
                  <script>
                  jQuery(document).ready(function() {
                  jQuery('a[data-lightbox]').map(function()
                  {
                  jQuery(this).colorbox(
                  {
                  // Put custom options here
                  loop: false,
                  rel: jQuery(this).attr('data-lightbox'),
                  maxWidth: '95%',
                  maxHeight: '95%',
                  iframe: true
                  });
                  });

                  jQuery(document).bind('cbox_complete', function(e)
                  {
                  var text = jQuery.colorbox.element().next('.caption').text();
                  if( text )
                  {
                  var caption = jQuery('#cboxBottomLeft').append('<div id="cboxCaption">'+text+'</div>');
                  jQuery('#colorbox').height( jQuery('#colorbox').height() + caption.height() );
                  }
                  });

                  });
                  </script>
                  ----------------
                  Vielen Dank im voraus


                  Kommentar


                  • #11
                    Ich würde es trennen.

                    Anbei ein ce_hyperlink_iframe_lightbox Template, basierend auf dem Standard ce_hyperlink Template (Contao Standard Hyperlink Element).
                    Es öffnet den Link in einem iframe.

                    http://www.premium-contao-themes.com

                    Kommentar

                    Lädt...
                    X