Tylko administratorzy mogą wejść do centrum administracyjnego. Zaloguj się

Formy - Wyskakujące okienka

Moje formularzeDodaj formularzFormy - Wyskakujące okienka?
Uwaga! Aby wyskakujące okienka działały z formularzami, musisz umieścić kod skryptu 1 raz. Utwórz «Blok/Menu» (poprzez zaznaczenie w Nagłówku/Hedaerze, tagach serwisowych lub Stopce strony). :
 Code: html 
<script type="text/javascript" defer src="/templates/scripts/code_form_scripts.js" async></script>

Ten skrypt nie jest instalowany domyślnie w celu zwiększenia wydajności i uelastycznienia witryn.
Po zainstalowaniu skryptu możesz wygeneruj link do wyskakującego okienka.
Zalecamy wstawienie tego kodu w "Blok / Menu"; z innymi twoimi skryptami.

Uwaga! Podczas tworzenia formularza standardowego w sposób uproszczony kod ten zostanie ustawiony automatycznie w zakładce «Blok / Menu» o nazwie «CODE_FORM_SCRIPT_FILE».


Wynik (link):



Wynik (span element):



Określ parametry okna wyskakującego:

ID formularza Musisz utworzyć formularz
 Klasa do dekoracji guzików Tytuł okna Tekst przycisku zamknięcia okna
(wyświetlane tylko jeśli wartość jest określona) Tekst przycisku `Prześlij`; Tekst odnośnika/przycisku otwierającego okno Szerokość okna Wysokość okna Automatyczna szerokość i wysokość Automatyczna szerokość i wysokość mają pierwszeństwo przed początkową szerokością i wysokością Automatyczna szerokość okna (wartość wskazuje minimalną możliwą szerokość) Automatyczna wysokość okna (wartość wskazuje minimalną możliwą wysokość) Minimalna szerokość i wysokość Możesz ograniczyć maksymalne wyskakujące okno, nawet jeśli używasz automatycznej szerokości i wysokości. Minimalna szerokość okna Minimalna wysokość okna Szerokość okna mobilnego
(jeśli okno jest mniejsze niż określony rozmiar, to jest ustawione na określoną szerokość) Opcje opcjonalne Notatka kształtu
nota ofertowa dodana do statystyk sprzedaży.
Nazwy funkcji zawierają predefiniowany zestaw ukrytych pól. Kilka nazw funkcjonalnych:
  • `Callback`- Oddzwoń. Dodatkowe pola są ukryte. Pozostają tylko «Nazwa» i «Numer telefonu». Dodatkowo możesz dodać parametr `data-dialog-productid` z identyfikatorem przeglądanego produktu.
  • `Consultation` - Zadać pytanie. Pole komentarza jest ukryte. Nad formularzem dodano tekst «Podaj swoje dane kontaktowe, skontaktujemy się z Tobą i odpowiemy na wszystkie Twoje pytania». Dodatkowo zaleca się dodanie parametru `data-dialog-productid` wraz z identyfikatorem przeglądanego produktu.
  • `Ask price` - Poznaj cenę. Pole komentarza jest ukryte. Dodatkowo zaleca się dodanie parametru `data-dialog-productid` wraz z identyfikatorem przeglądanego produktu.
  • `Quick order` - Szybkie zamówienie. Pole z komentarzem, e-mailem i telefonem jest ukryte. Dodatkowo zaleca się dodanie parametru `data-dialog-productid` z identyfikatorem przeglądanego produktu.

Możesz określić własne notatki, a ukryte pola określić za pomocą `okno dialogowe danych-formularz-ukryj-pola`. Ukryj pola
Ukryj elementy formularza (lista, separator `|`).   Gotowe   Brak dodatkowych pól określonych w konstruktorze: data-dialog-productid, data-dialog-product_num, data-dialog-varietyid, data-dialog-formprice, data-dialog-modify-text, data-dialog-form-autosubmit, data-dialog-form-required-class, data-dialog-form-autosubmit-replace-class, data-dialog-form-required-class-alert; Te pola mogą być używane do automatycznego uzupełniania formularza, przekazywania ceny lub identyfikatora przedmiotu, określania wymaganych pól i wyskakujących notatek, jeśli żadne nie są dostępne. Instrukcja znajduje się poniżej.



Instrukcja:

Uwaga! Aby wyskakujące okienka działały z formularzami, musisz umieścić kod skryptu 1 raz. Utwórz «Blok/Menu» (poprzez zaznaczenie w Nagłówku/Hedaerze, tagach serwisowych lub Stopce strony).
 Code: html 
<script type="text/javascript" defer src="/templates/scripts/code_form_scripts.js" async></script>

Kiedy formularz jest automatycznie tworzony, zostanie również dodany kod (blok/menu o nazwie CODE_FORM_SCRIPTS_FILE) z kodem dla wyskakujących okienek, z innym polem opcje wysyłania danych do utworzonego formularza. Ścieżka do pliku kodu - <script type="text/javascript" src="/templates/scripts/code_form_scripts.js" async></script>. Jeśli potrzebujesz zmienić plik, otwórz go i skopiuj kod do utworzonego wcześniej Bloku/Menu do tagów <script>CODE</script>. Aby wbudowane funkcje działały, np. pop-up handicapy w wersji Mobile, konieczne jest zainstalowanie powyższego kodu.

Przykładowy kod przycisku dla formularzy wyskakujących:

<div class="form_constructor" data-dialog-form_id="XXX" data-dialog-width="370" data-dialog-height="280" data-dialog-form_title="Callback" data-dialog-title="Poproś o oddzwonienie" data-dialog-whatform="Formularz zamówienia wywołania zwrotnego z przycisku w witrynie ..." data-dialog-buttontext="Prześlij">Oddzwonienie</div>

<div class="form_constructor" data-dialog-form_id="XXX" data-dialog-width="370" data-dialog-height="490" data-dialog-form_title="Zadaj pytanie" data-dialog-title="Zadaj pytanie" data-dialog-whatform="Zadaj formularz pytania za pomocą przycisku na stronie ..." data-dialog-buttontext="Prześlij">Zadaj pytanie</div>


Zmieniając lub dodając następujące wartości, odpowiednie dane zostaną określone podczas przesyłania formularza.
Dane muszą być określone dla przycisków, które powodują wyskakujące okienka.
  • "data-dialog-form_id" - ID formularza
  • "data-dialog-width" - szerokość wyskakującego okienka
  • "data-dialog-height" - wysokość wyskakującego okienka
  • "data-dialog-title" - tytuł okna dialogowego
  • "data-dialog-form_title" - nota ofertowa dodana do statystyk sprzedaży
  • "data-dialog-whatform" - z jakiego formularza pochodzi aplikacja (pozycja czy dane własne)
  • "data-dialog-productid" - ID produktu, jeśli aplikacja dotyczy konkretnego produktu.
  • "data-dialog-product_num" - ilość dodanej pozycji, jeśli zamówienie dotyczy konkretnego produktu.
  • "data-dialog-varietyid" - rodzaj produktu, jeśli wniosek dotyczy konkretnego produktu.
  • "data-dialog-formprice" - oferta lub cena przedmiotu
  • "data-dialog-buttontext" - tekst przycisku wewnątrz okna
  • "data-dialog-modify-text" - Autokorekta tekstu zamówienia (komentarz). Służy do wysyłania dodatkowych informacji, które można wykonać za pomocą Javascript.
  • "data-close-button" - Tekst przycisku zamykania okna (wyświetlany tylko, jeśli określono wartość)
  • "data-dialog-form-hide-fields" - Ukryj elementy formularza (lista, separator `|`)
  • Dodatkowe opcje (autouzupełnianie formularza):
    • «data-dialog-form-autosubmit» – 1-włącz
    • "data-dialog-form-required-class" - wymagane pola do wypełnienia (lista, separator `|`) (**)
    • "data-dialog-form-autosubmit-replace-class" - (lista, separator `|`) (***)
    • "data-dialog-form-required-class-alert" - komunikaty o błędach, jeśli pole data-dialog-form-required-class (**) nie jest wypełnione (lista, separator `|`)

    • *** - Np. wartości pola data-dialog-form-required-class (**) zostaną nadpisane wartościami znalezionymi na stronie, pozycjami z okna data-dialog- form-autosubmit-replace-class (*) lista **).
      Jeśli pola data-dialog-form-required-class (**) nie są wypełnione, zostanie wyświetlony komunikat określony w polu data-dialog-form-required-class-alert.
      Ta funkcja jest przydatna, gdy chcesz utworzyć pole do wypełnienia, po kliknięciu na niego wyskoczy formularz i zostanie wysłany natychmiast z podmianą danych z wcześniej utworzonego pola.

Przykład kodu - code_form_scripts.js

Moje formularzeTemu