Temat: Formularz z paginizacją

Hej,

Chciałbym zrobić 5-krokowy formularz w którym kolejne pola bądą wyświetlane po kliknięciu dalej/następny krok na osobnych stronach.

Wpadłem na dwa pomysły:
1. stworzyć 5 formularzy i po wypełnieniu jednego przechodzić do drugiego
2. stworzyć formularz ręcznie z ciasteczkami itd.

ale pomyślałem też, że może znajdzie się jakaś dobra dusza, która zna plugin, który pozwala na coś takiego :)

Temat: Formularz z paginizacją

A może dałoby radę to zrobić z js? Robiłam kiedyś coś podobnego.

Formularz należy podzielić na kroki, każdy ująć w div, powiedzmy <div class="slide1"></div>

Pod każdym divem slide dać przycisk
<span class="step2"><?php _e('Krok 2','sp'); ?></span><div class="clear"></div>

Mozesz też dać przyciski wstecz nad krokami
<span class="step1"><?php _e('Wróć do kroku 1','sp'); ?></span><div class="clear"></div>

Do tego jakaś java, w moim przypadku było to (musiałbyś to troszkę przrobić)

function hidediv(d) { document.getElementById(d).style.display = "none"; } function showdiv(d) { document.getElementById(d).style.display = "block"; }

jQuery(".slide1 span.step2").click(function(){
jQuery(".slide1").fadeOut('600',function() {
jQuery(".slide2").fadeIn('300', function() {
if (navigator.appName === "Microsoft Internet Explorer") {
jQuery(".progress_wrapper .lines").css("background-position","0px 0");
jQuery(".progress_wrapper .info").addClass('act');
} else {
jQuery(".progress_wrapper .lines").animate({ backgroundPosition: "0px"},600, function() {
jQuery(".progress_wrapper .info").addClass('act'); }); }
//jQuery(".progress_wrapper .cart").removeClass("act");
});
});
});

jQuery(".slide2 span.step1").click(function(){
jQuery(".slide2").fadeOut('600',function() {
jQuery(".slide1").fadeIn('300', function() {
if (navigator.appName === "Microsoft Internet Explorer") {
jQuery(".progress_wrapper .lines").css("background-position","0px 0");
jQuery(".progress_wrapper .cart").addClass('act');
} else {
jQuery(".progress_wrapper .lines").animate({ backgroundPosition: "0px"},600, function() {
jQuery(".progress_wrapper .cart").addClass('act'); }); }
jQuery(".progress_wrapper li.info").removeClass('act');
});
});
});

jQuery(".slide2 span.step3").click(function(){
jQuery(".slide2").fadeOut('600',function() {
jQuery(".slide3").fadeIn('300', function() {
if (navigator.appName === "Microsoft Internet Explorer") {
jQuery(".progress_wrapper .lines").css("background-position","0px 0");
jQuery(".progress_wrapper .cart").addClass('act');
} else {
jQuery(".progress_wrapper .lines").animate({ backgroundPosition: "0px"},600, function() {
jQuery(".progress_wrapper .cart").addClass('act'); }); }
jQuery(".progress_wrapper li.info").removeClass('act');
});
});
});

jQuery(".slide3 span.step2").click(function(){
jQuery(".slide3").fadeOut('600',function() {
jQuery(".slide2").fadeIn('300', function() {
if (navigator.appName === "Microsoft Internet Explorer") {
jQuery(".progress_wrapper .lines").css("background-position","0px 0");
jQuery(".progress_wrapper .cart").addClass('act');
} else {
jQuery(".progress_wrapper .lines").animate({ backgroundPosition: "0px"},600, function() {
jQuery(".progress_wrapper .cart").addClass('act'); }); }
jQuery(".progress_wrapper li.info").removeClass('act');
});
});
});

Temat: Formularz z paginizacją

zapomnialam o stylach u mnie było to:
.slide1, .slide2 {
position:relative;
display:none;
width:100%;
}
.slide1 span.step2, .slide2 span.step1 {
padding:5px 15px;
color:#fff;
font-size:14px;
background:#f37045;
cursor:pointer;
}
.slide1 span.step2 {
float:right;
}
.slide2 span.step1{
float:left;
}

Temat: Formularz z paginizacją

Mozesz wykorzystac skrypt lub program do tworzenia formularzy i zintegrowac ze strona WP:

http://www.appnitro.com/

http://www.coffeecup.com/web-form-builder/

Temat: Formularz z paginizacją

Chyba zdecyduję się na pomysł Anity - proste jquery, które dorzucę do kodu w contact form 7 i wszystko będzie śliczne ... a dodatkowo fade'y dodadzą fajną dynamikę :)

dzięki :)

Temat: Formularz z paginizacją

Koniec końców załatwiłem tą sprawę jeszcze inaczej:

Ankieta zaprojektowana w limesurvey, załadowana w iframie do wordpressa.

Dzięki temu mam wszystkie bajery wizualne o których mi się marzyło, a jednocześnie mozliwość eksportu wyników prosto do excela i spssa :)

Temat: Formularz z paginizacją

Witam, czy jest jakaś możliwość użycia tego formularza tak by był powiązany z rejestracja wordpress?

Temat: Formularz z paginizacją

Potencjalnie można stworzyć skrypt, który prześle dane z LS do Wordpressa, ale nie słyszałem o wtyczce, która by to synchronizowała