Using Conditionals For Form Wizard

[RateU]

Requirements:

• XThreads
• Template Conditionals or PHP in Templates / Complex Templates
  

This is an idea for creating a step by step form (Form Wizard).
The basic idea is, we hide some custom thread fields, and display it in some certain conditions.

For this example, we will use this conditions:
   
More info about this conditions:
http://mybbhacks.zingaburga.com/showthread.php?tid=740

Custom Thread Fields Settings:

1. Attending - Ceremony
   • Title: Attending - Ceremony
     Modify it as our needs. We use variable in Display Format. So, if we change the title here, the title in Display Format will be updated automatically.
   • Key: att1
   • Description: If you will be attending ceremony, please choose Yes. Otherwise, please choose No.
     Modify it as our needs.
   • Applicable Forums: select in which forum this form should be applied.
   • Input Field Type: Option Buttons
   • Values List:
     
     Code:

     Yes No

     ---

   • Editable by / Required Field?: Everyone
     Although it is not a required fields, we will try to "force" user to choose the options before continuing to the next question.
   • Display Format:
     
     HTML Code

     <div>{$GLOBALS['threadfields_x']['att1']['title']}: {VALUE}</div>

     ---

     Like said above, we use variable for the fields title. I don't know what is the shortcut for this in Display Format.

   • Settable Value Permissions:
     • Value: leave it blank
     • Editable by Groups: Administrators
       
       Code:

       {|}4

       ---

     New feature in XThreads 1.41. Because this fields is not a required field, so we need to "hide" the (Not Set) value to users.
   • Hide Input Field: Yes
     We will use conditional for displaying this field in newthread template.
     
2. # of Guests - Ceremony
   • Title: # of Guests - Ceremony
   • Key: fw_g1
   • Description: Please select the number of guests from the option list.
   • Applicable Forums: select in which forum this form should be applied.
   • Input Field Type: Option Buttons
   • Values List:
     
     Code:

     1 2

     ---

     Modify it as our needs.

   • Editable by / Required Field?: Everyone
   • Display Format:
     
     HTML Code

     <div>{$GLOBALS['threadfields_x']['fw_g1']['title']}: {VALUE}</div>

     ---

   • Settable Value Permissions:
     • Value: leave it blank
     • Editable by Groups: Administrators
       
       Code:

       {|}4

       ---

   • Hide Input Field: Yes
     
3. Attending - Lunch
   • Title: Attending - Ceremony
   • Key: att2
   • Description: If you will be joining us for lunch, please choose Yes. Otherwise, please choose No.
   • Applicable Forums: select in which forum this form should be applied.
   • Input Field Type: Option Buttons
   • Values List:
     
     Code:

     Yes No

     ---

   • Editable by / Required Field?: Everyone
   • Display Format:
     
     HTML Code

     <div>{$GLOBALS['threadfields_x']['att2']['title']}: {VALUE}</div>

     ---

   • Settable Value Permissions:
     • Value: leave it blank
     • Editable by Groups: Administrators
       
       Code:

       {|}4

       ---

   • Hide Input Field: Yes
     
4. # of Guests - Lunch
   • Title: # of Guests - Lunch
   • Key: fw_g2
   • Description: Please select the number of guests from the option list.
   • Applicable Forums: select in which forum this form should be applied.
   • Input Field Type: Option Buttons
   • Values List:
     
     Code:

     1 2

     ---

     Modify it as our needs.

   • Editable by / Required Field?: Everyone
   • Display Format:
     
     HTML Code

     <div>{$GLOBALS['threadfields_x']['fw_g2']['title']}: {VALUE}</div>

     ---

   • Settable Value Permissions:
     • Value: leave it blank
     • Editable by Groups: Administrators
       
       Code:

       {|}4

       ---

   • Hide Input Field: Yes
     
5. Special Diet
   • Title: Special Diet
   • Key: fw_d1
   • Description: If you have a special dietary requirements, please choose Yes. Otherwise, please choose No.
   • Applicable Forums: select in which forum this form should be applied.
   • Input Field Type: Option Buttons
   • Values List:
     
     Code:

     Yes No

     ---

   • Editable by / Required Field?: Everyone
   • Display Format:
     
     HTML Code

     <div>{$GLOBALS['threadfields_x']['fw_d1']['title']}: {VALUE}</div>

     ---

   • Settable Value Permissions:
     • Value: leave it blank
     • Editable by Groups: Administrators
       
       Code:

       {|}4

       ---

   • Hide Input Field: Yes
     
6. Diet Requirements
   • Title: Diet Requirements
   • Key: fw_d2
   • Description: Please indicate what is your requirements are.
   • Applicable Forums: select in which forum this form should be applied.
   • Input Field Type: Multiline Textbox
   • Editable by / Required Field?: Everyone
   • Display Parsing: Plain text with newlines
   • Display Format:
     
     HTML Code

     <div>{$GLOBALS['threadfields_x']['fw_d2']['title']}:<div><div>{VALUE}</div>

     ---

   • Hide Input Field: Yes
     
7. Attending - Party
   • Title: Attending - Party
   • Key: att3
   • Description: If you will be attending party, please select Yes. Otherwise, please select No.
   • Applicable Forums: select in which forum this form should be applied.
   • Input Field Type: Option Buttons
   • Values List:
     
     Code:

     Yes No

     ---

   • Editable by / Required Field?: Everyone
   • Display Format:
     
     HTML Code

     <div>{$GLOBALS['threadfields_x']['att3']['title']}: {VALUE}</div>

     ---

   • Settable Value Permissions:
     • Value: leave it blank
     • Editable by Groups: Administrators
       
       Code:

       {|}4

       ---

   • Hide Input Field: Yes
     
8. # of Guests - Party
   • Title: # of Guests - Party
   • Key: fw_g3
   • Description: Please select the number of guests from the option list.
   • Applicable Forums: select in which forum this form should be applied.
   • Input Field Type: Option Buttons
   • Values List:
     
     Code:

     1 2

     ---

     Modify it as our needs.

   • Editable by / Required Field?: Everyone
   • Display Format:
     
     HTML Code

     <div>{$GLOBALS['threadfields_x']['fw_g3']['title']}: {VALUE}</div>

     ---

   • Settable Value Permissions:
     • Value: leave it blank
     • Editable by Groups: Administrators
       
       Code:

       {|}4

       ---

   • Hide Input Field: Yes
     
   
   

Custom Template:

1. fw_newthread
   
   HTML Code

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87

   <html> <head> <title>{$lang->newthread_in}</title> {$headerinclude} <script type="text/javascript" src="jscripts/post.js?ver=1400"></script> </head> <body> {$header} <br class="clear" /> <if $mybb->input['message'] then> {$preview} </if> <div style="display: none;">{$thread_errors}</div> {$attacherror} <form action="newthread.php?fid={$fid}&amp;processed=1" method="post" enctype="multipart/form-data" name="input"> <input type="hidden" name="my_post_key" value="{$mybb->post_code}" /> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-bottom: 0px;"> <tr> <td class="thead"><strong>{$lang->post_new_thread}</strong></td> </tr> </table> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if $subject then> display: none;</if>"> <tr> <td class="trow2" width="20%"> <strong>{$lang->thread_subject}</strong> </td> <td class="trow2"> <input type="text" class="textbox" name="subject" size="40" maxlength="85" value="{$subject}" tabindex="1" /><small style="display: block;">Please fill the Subject</small> </td> </tr> </table> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if !$subject || $GLOBALS['threadfields']['att1'] then> display: none;</if>"> {$tfinputrow['att1']} </table> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if $mybb->input['xthreads_att1'] != 'Yes' || $mybb->input['xthreads_fw_g1'] then> display: none;</if>"> {$tfinputrow['fw_g1']} </table> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if ($mybb->input['xthreads_att1'] != 'No' && !$mybb->input['xthreads_fw_g1']) || $mybb->input['xthreads_att2'] then> display: none;</if>"> {$tfinputrow['att2']} </table> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if $mybb->input['xthreads_att2'] != 'Yes' || $mybb->input['xthreads_fw_g2'] then> display: none;</if>"> {$tfinputrow['fw_g2']} </table> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if $mybb->input['xthreads_att2'] == 'No' || !$mybb->input['xthreads_fw_g2'] || $mybb->input['xthreads_fw_d1'] then> display: none;</if>"> {$tfinputrow['fw_d1']} </table> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if $mybb->input['xthreads_fw_d1'] != 'Yes' || $mybb->input['xthreads_fw_d2'] then> display: none;</if>"> {$tfinputrow['fw_d2']} </table> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if ($mybb->input['xthreads_att2'] != 'No' && $mybb->input['xthreads_fw_d1'] != 'No' && !$mybb->input['xthreads_fw_d2']) || $mybb->input['xthreads_att3'] then> display: none;</if>"> {$tfinputrow['att3']} </table> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if $mybb->input['xthreads_att3'] != 'Yes' || $mybb->input['xthreads_fw_g3'] then> display: none;</if>"> {$tfinputrow['fw_g3']} </table> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: 0px;<if $mybb->input['xthreads_att3'] != 'No' && !$mybb->input['xthreads_fw_g3'] then> display: none;</if>"> {$extra_threadfields} <tr> <td class="trow2" valign="top" width="20%"><strong>{$lang->your_message}</strong>{$smilieinserter}</td> <td class="trow2"> <textarea name="message" id="message" rows="20" cols="70" tabindex="2">{$message}</textarea> {$codebuttons} {$multiquote_external} </td> </tr> </table> <br /> <div style="text-align:center"> <if $mybb->input['xthreads_att3'] != 'No' && !$mybb->input['xthreads_fw_g3'] then> <input type="submit" class="button" name="previewpost" value="Next" tabindex="5" /> <else> <input type="submit" class="button" name="submit" value="Submit" tabindex="4" accesskey="s" /> <input type="submit" class="button" name="previewpost" value="Preview" tabindex="5" /> </if> </div> <input type="hidden" name="action" value="do_newthread" /> <input type="hidden" name="posthash" value="{$posthash}" /> <input type="hidden" name="attachmentaid" value="" /> <input type="hidden" name="attachmentact" value="" /> <input type="hidden" name="quoted_ids" value="{$quoted_ids}" /> <input type="hidden" name="tid" value="{$tid}" /> {$editdraftpid} </form> {$forumrules} {$footer} </body> </html>

   ---

   We use the Preview Post button for the Next button.

2. fw_postbit_first
   
   HTML Code

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

   {$ignore_bit} <a name="pid{$post['pid']}" id="pid{$post['pid']}"></a> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="{$post_extra_style} {$post_visibility}" id="post_{$post['pid']}"> <tbody> <tr> <td class="tcat"> <div class="float_left smalltext"> {$post['postdate']}, {$post['posttime']} <span id="edited_by_{$post['pid']}">{$post['editedmsg']}</span> </div> {$post['posturl']} </td> </tr> <tr> <td class="trow1 {$unapproved_shade}" > <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;"> <tr> <td class="post_avatar" width="1" style="{$post['avatar_padding']}"> {$post['useravatar']} </td> <td class="post_author"> <strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br /> <span class="smalltext"> {$post['usertitle']}<br /> {$post['userstars']} {$post['groupimage']} </span> </td> <td class="smalltext post_author_info" width="165"> {$post['user_details']} </td> </tr> </table> </td> </tr> <tr> <td class="trow2 post_content {$unapproved_shade}" > <span class="smalltext"><strong>{$post['icon']}{$post['subject']} {$post['subject_extra']}</strong></span> <div class="post_body" id="pid_{$post['pid']}"> <div><strong>Subject:</strong> {$post['subject']}</div> {$GLOBALS['threadfields']['att1']} {$GLOBALS['threadfields']['fw_g1']} {$GLOBALS['threadfields']['att2']} {$GLOBALS['threadfields']['fw_g2']} {$GLOBALS['threadfields']['fw_d1']} {$GLOBALS['threadfields']['fw_d2']} {$GLOBALS['threadfields']['att3']} {$GLOBALS['threadfields']['fw_g3']} {$post['message']} </div> {$post['attachments']} {$post['signature']} <div class="post_meta" id="post_meta_{$post['pid']}"> {$post['iplogged']} </div> </td> </tr> <tr> <td class="trow1 post_buttons {$unapproved_shade}" style=""> <div class="author_buttons float_left"> {$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']} </div> <div class="post_management_buttons float_right">{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']} </div> </td> </tr> </tbody> </table>

   ---

3. fw_editpost_first
   
   HTML Code

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

   <html> <head> <title>{$mybb->settings['bbname']} - {$lang->edit_post}</title> {$headerinclude} <script type="text/javascript" src="jscripts/post.js?ver=1400"></script> </head> <body> {$header} {$preview} {$post_errors} {$attacherror} <form action="editpost.php" method="post" name="editpost"> <input type="hidden" name="my_post_key" value="{$mybb->post_code}" /> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder"> <tr> <td class="thead" colspan="3"><strong>{$lang->delete_post}</strong></td> </tr> <tr> <td class="trow1" style="white-space: nowrap"><input type="checkbox" class="checkbox" name="delete" value="1" tabindex="9" /> <strong>{$lang->delete_q}</strong></td> <td class="trow1" width="100%">{$lang->delete_1}<br /><span class="smalltext">{$lang->delete_2}</span></td> <td class="trow1"><input type="submit" class="button" name="submit" value="{$lang->delete_now}" tabindex="10" /></td> </tr> </table> <input type="hidden" name="action" value="deletepost" /> <input type="hidden" name="pid" value="{$pid}" /> </form> <br /> <form action="editpost.php?pid={$pid}&amp;processed=1" method="post" enctype="multipart/form-data" name="input"> <input type="hidden" name="my_post_key" value="{$mybb->post_code}" /> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder"> <tr> <td class="thead" colspan="2"><strong>{$lang->edit_post}</strong></td> </tr> {$loginbox} <tr> <td class="trow2"><strong>{$lang->subject}</strong></td> <td class="trow2">{$prefixselect}<input type="text" class="textbox" name="subject" size="40" maxlength="85" value="{$subject}" tabindex="1" /></td> </tr> {$extra_threadfields} {$tfinputrow['att1']} {$tfinputrow['fw_g1']} {$tfinputrow['att2']} {$tfinputrow['fw_g2']} {$tfinputrow['fw_d1']} {$tfinputrow['fw_d2']} {$tfinputrow['att3']} {$tfinputrow['fw_g3']} {$posticons} <tr> <td class="trow2" valign="top"><strong>{$lang->your_message}:</strong><br /><div style="text-align: center;">{$smilieinserter}</div></td> <td class="trow2"> <textarea name="message" id="message" rows="20" cols="70" tabindex="3">{$message}</textarea> {$codebuttons} </td> </tr> <tr> <td class="trow1" valign="top"><strong>{$lang->post_options}</strong></td> <td class="trow1"><span class="smalltext"> <label><input type="checkbox" class="checkbox" name="postoptions[signature]" value="1" tabindex="6"{$postoptionschecked['signature']} /> {$lang->options_sig}</label> {$disablesmilies}</span> </td> </tr> {$subscriptionmethod} {$pollbox} </table> {$attachbox} <br /> <div align="center"><input type="submit" class="button" name="submit" value="{$lang->update_post}" tabindex="3" accesskey="s" /> <input type="submit" class="button" name="previewpost" value="{$lang->preview_post}" tabindex="4" /></div> <input type="hidden" name="action" value="do_editpost" /> <input type="hidden" name="posthash" value="{$posthash}" /> <input type="hidden" name="attachmentaid" value="" /> <input type="hidden" name="attachmentact" value="" /> </form> {$footer} </body> </html>

   ---

Additional Info:

• What conditionals we should use, depends on what conditions should be applied for each custom thread fields.
• This form wizard doesn't use Javascript.
• The step by step form works in newthread only.
• The step by step is "breakable" with direct URL.
  

Well, that is the idea. Not quite sure whether this idea is OK or not

Live Demo:
http://www.14.mynie.co.cc/newthread.php?fid=49
We can't submit the form in the demo forum, because I've removed the Captcha from the template. But we can preview it.

[ZiNgA BuRgA]

Very clever idea

[leefish]

RateU, I love you

[RateU]

(02-28-2011 11:51 AM)ZiNgA BuRgA Wrote:  Very clever idea

I just try for applying your suggestion, Yumi :

(02-27-2011 09:08 AM)ZiNgA BuRgA Wrote:  you'll need to use conditionals to check if it's Yes/No

Unfortunately, because I have a very very limited knowledge (and logic), I can't make it "perfect"

(02-28-2011 03:03 PM)leefish Wrote:  RateU, I love you

Thanks

[ZiNgA BuRgA]

I haven't tried it, but it sounds quite good, and probably the best you could do with the limited ability of XThreads.
The only real issue is that you cannot enforce values not being set.

[RateU]

Could you please explain it more, Yumi?
I'm sorry, but I don't understand

[ZiNgA BuRgA]

The wizard hides certain elements depending on what's been selected before.  Unfortunately, this isn't enforced by any server side script, so if a user were to forge a request, they'd be able to bypass the restriction.

Perhaps not really a big issue though - certainly, your average user isn't going to do this, and you could have conditionals on the output side to try to enforce any restrictions.

If you don't really get it, don't worry about it - it's not that big of an issue IMO

[RateU]

Ah... I think that is what I meant by this, Yumi:

(02-28-2011 08:10 AM)RateU Wrote:  [*]The step by step is "breakable" with direct URL.

If a user put the input value directly in URL, they can "jump" or "break" the step by step form
It is because I have a very limited knowledge so the form not "perfect", Yumi