Formularze
Formularze
Formularz to sekcja dokumentu, która umożliwia użytkownikowi wprowadzenie informacji do późniejszego przetworzenia przez system. Na platformie HotList.biz możesz tworzyć pełnoprawne formularze, z wiązaniem nazw, id i class'ov dla pól.
Dane formularzy mogą być przesyłane nie tylko do Twojej witryny, ale także na dowolny serwer strony trzeciej. Dostępny jest autoresponder. W formularzu można określić rodzaj danych, które mają być zatruwane, rodzaj kodowania, etykiety przycisków, tekst wiadomości w przypadku błędu lub pomyślnego przetwarzania, obrazek bezpieczeństwa i wiele więcej.
Pola formularza można elastycznie konfigurować, sprawdzać zgodność z typem danych, obowiązkowym wypełnieniem i nie tylko.
W formularzu możesz zatruć dowolne dane, a także pliki. Podczas przesyłania plików możliwe jest użycie tablicy danych przy użyciu jednej nazwy obiektu. Taka funkcja może być potrzebna przy tworzeniu jednego pola do załączania wielu plików za pomocą JavaScript.
Jak stworzyć formularz?
Aby szybko utworzyć formularz z autouzupełnianiem głównych pól, a także stworzyć styl formularza, użyj przycisku „Utwórz formularz standardowy „Oddzwoń», „Zadaj pytanie» itp. Metoda ta umożliwi tworzenie pól o predefiniowanych nazwach dla pól, które służą do przesyłania danych do statystyk sprzedaży. Możesz wybrać języki tworzonych formularzy po kliknięciu przycisku szybkiego tworzenia formularza. Style do formularza zostaną dodane automatycznie. Style możesz zmieniać w „Edytorze projektu» na karcie „Style CSS».Jak konfiguracja formularz?
W sekcji „Moje formularze» możesz zobaczyć listę wszystkich wcześniej utworzonych formularzy. Kliknij „Edytuj», aby zmienić formularze.Na przykład dodajmy kod konwersji do formularza. Otwórz formularz do edycji. W sekcji „Komunikat wyniku» – „Sukces» dodaj kod konwersji, a także tekst, który będzie wyświetlany kupującemu. Na przykład „Dane wysłane pomyślnie».
Jak wstawić formularz na stronę?< /h2>
Formularz jest wstawiany przy użyciu skróconego kodu „[FORM:XXX]», gdzie XXX to identyfikator formularza.
Jak utworzyć wyskakujące okienko z formularzem?
Pełna lista dodatkowych atrybutów podczas tworzenia wyskakujących okienek z formularzami:
Tworzenie wyskakujących formularzy i instrukcji z atrybutami
Jak utworzyć przycisk „Szybkie zamówienie»?
Utwórz blok/menu, w którym umieścisz kod:
Code: Javascript$(document).ready(function(){
$(".hotengine-shop-product-desc-block .hotengine-shop-product-cart_icon").after('<div class="button_quickorder hotengine-form-constructor" data-dialog-form_id="XXX" data-dialog-width="370" data-dialog-height="300" data-mobile-width="300" data-dialog-min-height="300" data-dialog-min-width="300" data-dialog-form_title="Szybkie zamówienie" data-dialog-title="Szybkie zamówienie" data-dialog-whatform="Szybkie zamówienie: '+$("#hotengine-content-shop .headh h1").text()+'" data-dialog-modify-text="" data-dialog-buttontext="Заказать" data-dialog-productid="'+$("#page_content .hotengine-marking").attr("data-hotengine-marking-shop_catalog_page_id")+'" data-dialog-formprice="'+$("#page_content .hotengine-marking[data-hotengine-marking-type=\"shop_catalog_page\"]").attr("data-hotengine-marking-shop_catalog_page_price")+'" data-dialog-form-hide-fields=".my_form_form_text, .my_form_form_name, .my_form_form_email">Szybkie zamówienie</div>');
});
XXX – identyfikator wcześniej utworzonego formularza.
Zaznacz checkbox "JavaScript", dzięki czemu kod z powyższego przykładu zostanie automatycznie zapisany do pliku i zbuforowany przez przeglądarkę w celu przyspieszenia ładowania. Jeśli pole wyboru nie jest zaznaczone, dodaj tag
<script>KOD</script>
W tym przykładzie podana jest nazwa wyskakującego okienka, a także transfer danych o produkcie, w którym następuje kliknięcie. Kod doda przycisk po elemencie ".hotengine-shop-product-desc-block .hotengine-shop-product-cart_icon" - przycisk "Dodaj do koszyka". Klasa, która wywołuje przycisk wyskakujący, to „hotengine-form-constructor». Dodatkowo do późniejszego tworzenia stylu przycisku dodawana jest klasa "button_quickorder".
Możesz zmienić styl przycisku w Edytorze projektu na karcie Style CSS.
Na przykład:
Code: CSS.button_quickorder{display:inline-block;
text-decoration:none;
background:#FFFFFF;
padding:0px;
line-height:44px;
white-space:nowrap;
text-align:center;
height:auto;
margin:5px;
width:160px;
border:1px solid #dedede;
cursor:pointer;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
Możesz ukryć wymagane pola po wywołaniu wyskakującego formularza (parametr „data-dialog-form-hide-fields»), włączyć wymagane pola (parametr „data-dialog-form-required-class»), a nawet włączyć formularz automatyczny przesłanie (parametr "data-dialog-form-autosubmit").
Jak utworzyć pole i przycisk do automatycznego przesyłania danych do formularza?
Możesz dodać element <input>, aby wypełnić go bez uprzedniego wywołania wyskakującego okienka i automatycznie przesłać formularz, używając danych z tego elementu za pomocą dodatkowych parametry:"data-dialog-form-autosubmit","data-dialog-form-required-class","data-dialog-form-autosubmit-replace-class","data-dialog-form-required-class-alert".
Пример.
Code: Javascript$(document).ready(function(){
$(".hotengine-shop-product-desc-block .hotengine-shop-product-cart_icon").after('<div class="button_callback_input"><input type="text" name="input_callback" class="input_callback" placeholder="Wpisz numer telefonu"><div class="button_callback required_data_hotengine-form-constructor hotengine-form-constructor" data-dialog-form_id="XXX" data-dialog-width="370" data-dialog-height="250" data-mobile-width="300" data-dialog-min-width="300" data-dialog-form_title="Zamówienie jednym kliknięciem! '+$(".hotengine-shop-product-title").text()+'" data-dialog-title="Zamówienie jednym kliknięciem!" data-dialog-whatform="Szybkie zamówienie '+$(".hotengine-shop-product-title").text()+'" data-dialog-modify-text="" data-dialog-buttontext="Wysłać" data-dialog-varietyid="'+$("#page_content .hotengine-shop-product-cart_icon").attr("data-variety")+'" data-dialog-productid="'+$("#page_content .hotengine-marking [data-hotengine-marking-type=\"shop_catalog_page\"]").attr("data-hotengine-marking-shop_catalog_page_id")+'" data-dialog-formprice="'+$("#page_content .hotengine-marking [data-hotengine-marking-type=\"shop_catalog_page\"]").attr("data-hotengine-marking-shop_catalog_page_price")+' " data-dialog-form-autosubmit="1" data-dialog-form-required-class=".input_callback" data-dialog-form-autosubmit-replace-class=".form_phone" data-dialog-form-required-class-alert="Wprowadź swój numer telefonu" data-dialog-form-hide-fields=".my_form_form_text, .my_form_form_name, .my_form_form_email"></div></div>');
});
XXX – identyfikator wcześniej utworzonego formularza.
Możesz zmienić styl przycisku w Edytorze projektu na karcie Style CSS.
Na przykład:
Code: CSS.hotengine-shop-product-desc-block .button_callback_input { display: inline-block;
text-align:left;
line-height: 22px;
width:97%;
max-width:300px;
position:relative;
margin:5px 10px 20px 0px;
-webkit-border-radius: 24px;
-webkit-border-top-left-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius: 24px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
border-radius: 24px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.hotengine-shop-product-desc-block .button_callback_input input { line-height: 27px;
padding: 5px 0px;
-webkit-border-radius: 24px;
-webkit-border-top-left-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius: 24px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
border-radius: 24px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
text-indent:10px;
width:100%;
border: 2px solid #b7b7b7;
}
.hotengine-shop-product-desc-block .button_callback { position:absolute;
right:0px;
bottom: 0px;
}
.hotengine-shop-product-desc-block .button_callback { position:absolute;
width:41px;
height:41px;
background:url(/templates/styles/shop_callback_icon/button_callback.png) no-repeat;
cursor:pointer;
}
.hotengine-shop-product-desc-block.button_callback_input:active { top:1px;
}
Code: Javascript
$(document).ready(function(){
$(".hotengine-shop-product-desc-block .hotengine-shop-product-cart_icon").after('<div class="button_quickorder hotengine-form-constructor" data-dialog-form_id="XXX" data-dialog-width="370" data-dialog-height="300" data-mobile-width="300" data-dialog-min-height="300" data-dialog-min-width="300" data-dialog-form_title="Szybkie zamówienie" data-dialog-title="Szybkie zamówienie" data-dialog-whatform="Szybkie zamówienie: '+$("#hotengine-content-shop .headh h1").text()+'" data-dialog-modify-text="" data-dialog-buttontext="Заказать" data-dialog-productid="'+$("#page_content .hotengine-marking").attr("data-hotengine-marking-shop_catalog_page_id")+'" data-dialog-formprice="'+$("#page_content .hotengine-marking[data-hotengine-marking-type=\"shop_catalog_page\"]").attr("data-hotengine-marking-shop_catalog_page_price")+'" data-dialog-form-hide-fields=".my_form_form_text, .my_form_form_name, .my_form_form_email">Szybkie zamówienie</div>');
}); Code: CSS
.button_quickorder{display:inline-block;
text-decoration:none;
background:#FFFFFF;
padding:0px;
line-height:44px;
white-space:nowrap;
text-align:center;
height:auto;
margin:5px;
width:160px;
border:1px solid #dedede;
cursor:pointer;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
} Code: Javascript
$(document).ready(function(){
$(".hotengine-shop-product-desc-block .hotengine-shop-product-cart_icon").after('<div class="button_callback_input"><input type="text" name="input_callback" class="input_callback" placeholder="Wpisz numer telefonu"><div class="button_callback required_data_hotengine-form-constructor hotengine-form-constructor" data-dialog-form_id="XXX" data-dialog-width="370" data-dialog-height="250" data-mobile-width="300" data-dialog-min-width="300" data-dialog-form_title="Zamówienie jednym kliknięciem! '+$(".hotengine-shop-product-title").text()+'" data-dialog-title="Zamówienie jednym kliknięciem!" data-dialog-whatform="Szybkie zamówienie '+$(".hotengine-shop-product-title").text()+'" data-dialog-modify-text="" data-dialog-buttontext="Wysłać" data-dialog-varietyid="'+$("#page_content .hotengine-shop-product-cart_icon").attr("data-variety")+'" data-dialog-productid="'+$("#page_content .hotengine-marking [data-hotengine-marking-type=\"shop_catalog_page\"]").attr("data-hotengine-marking-shop_catalog_page_id")+'" data-dialog-formprice="'+$("#page_content .hotengine-marking [data-hotengine-marking-type=\"shop_catalog_page\"]").attr("data-hotengine-marking-shop_catalog_page_price")+' " data-dialog-form-autosubmit="1" data-dialog-form-required-class=".input_callback" data-dialog-form-autosubmit-replace-class=".form_phone" data-dialog-form-required-class-alert="Wprowadź swój numer telefonu" data-dialog-form-hide-fields=".my_form_form_text, .my_form_form_name, .my_form_form_email"></div></div>');
}); Code: CSS
.hotengine-shop-product-desc-block .button_callback_input { display: inline-block;
text-align:left;
line-height: 22px;
width:97%;
max-width:300px;
position:relative;
margin:5px 10px 20px 0px;
-webkit-border-radius: 24px;
-webkit-border-top-left-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius: 24px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
border-radius: 24px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.hotengine-shop-product-desc-block .button_callback_input input { line-height: 27px;
padding: 5px 0px;
-webkit-border-radius: 24px;
-webkit-border-top-left-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius: 24px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
border-radius: 24px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
text-indent:10px;
width:100%;
border: 2px solid #b7b7b7;
}
.hotengine-shop-product-desc-block .button_callback { position:absolute;
right:0px;
bottom: 0px;
}
.hotengine-shop-product-desc-block .button_callback { position:absolute;
width:41px;
height:41px;
background:url(/templates/styles/shop_callback_icon/button_callback.png) no-repeat;
cursor:pointer;
}
.hotengine-shop-product-desc-block.button_callback_input:active { top:1px;
} Instrukcje wideo dotyczące importu towarów do Hotlist.biz.
Kategorie Sklepu
Cechy produktu, filtr wyszukiwania i porównanie
Kategorie Sklepu
Cechy produktu, filtr wyszukiwania i porównanie