WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Create multi page forms - Advice needed (5 posts)

  1. pixelitus
    Member
    Posted 1 year ago #

    Hi,

    I'm trying to create a multi page form using twentyeleven theme. I've created some function codes to test this out and have used $SESSIONS to pass input data from one page to the next. Basically, there are 3 step forms, form1 captures Name & Email, form2 captures Name on card & Credit card number, and form 3 captures Purchase price & Location. Each form will call a corresponding php script to display the next form and so on.

    The issue is, form1 displays properly with the page headers and page template, but form2 and 3 just shows a white blank page with the form to capture data. Upon checking with firebug, the <head> section is empty. Did I miss something along the way? I need some advice here.

    The codes are as follows:
    In functions.php file, the short code was place inside a page to test.

    function start_compare() {
    	echo '<form method="post" action="http://www.domain.com/wp-content/themes/twentyeleven-child/compare_step2.php">';
    		echo '<input type="hidden" value="1" name="compare_step">';
    		echo '<p>Name: <input type="text" name="name"></p>';
    		echo '<p>Email: <input type="text" name="email_address"></p>';
    		echo '<input type="submit" value="Next">';
    	echo '</form>';
    }
    add_shortcode('compare_form', 'start_compare');

    In the same folder as functions.php, I created the remaining php script files.

    compare_step2.php

    <?php
    	session_start();
    
    	// Store the collected values in the session variables
    	$_SESSION['name'] = $_POST['name'];
    	$_SESSION['email_address'] = $_POST['email_address'];
    
    	echo '<form method="post" action="http://www.domain.com/wp-content/themes/twentyeleven-child/compare_step3.php">';
    		echo '<input type="hidden" value="2" name="compare_step">';
    		echo '<p>Name on card: <input type="text" name="name_on_card"></p>';
    		echo '<p>Credit Card No.:<input type="text" name="credit_card_number"></p>';
    
    		echo '<input type="submit" value="Back">';
    		echo '<input type="submit" value="Next">';
    	echo '</form>';
    ?>

    compare_step3.php

    <?php
    	session_start();
    
    	$name = $_SESSION['name'];
    	$email_address = $_SESSION['email_address'];
    	$name_on_card = $_POST['name_on_card'];
    	$credit_card_number =  $_POST['credit_card_number'];
    
    	// Display info collected so far - For debugging
    	echo "<pre>"; print_r($name);echo "</pre>";
    	echo "<pre>"; print_r($email_address);echo "</pre>";
    	echo "<pre>"; print_r($name_on_card);echo "</pre>";
    	echo "<pre>"; print_r($credit_card_number);echo "</pre>";
    
    	// Display final form and collect final info here
    	echo '<form method="post" action="http://www.domain.com/wp-content/themes/twentyeleven-child/process_form.php">';
    		echo '<input type="hidden" value="2" name="compare_step">';
    		echo '<p>Purchase Price: <input type="text" name="purchase_price"></p>';
    		echo '<p>Purchase Location:<input type="text" name="purchase_location"></p>';
    
    		echo '<input type="submit" value="Back">';
    		echo '<input type="submit" value="Submit">';
    	echo '</form>';
    
    ?>

    process_form.php

    <?php
    	// Write collected info details to database here
    	// Not coded yet
    
    	// Finally, destroy session
    	session_destroy();
    ?>
  2. Chris
    Member
    Posted 1 year ago #

    compare_step2.php, compare_step3.php and process_form.php are stand-alone PHP script files that have no connection to WordPress whatsoever at this point.

    I would put all forms into the shortcode function and use the page parameter for moving back and forth through the steps.

    function start_compare( $args, $content = '' ) {
    
      global $post;
    
      $currentURL   = get_permalink( $post->ID );
    
      // Use the page parameter for tracking the current step
      $currentStep  = ( get_query_var( 'page' ) ) ? get_query_var( 'page' ) : 1;
    
      if( $currentStep < 1 || $currentStep > 4 ) {
    
        $currentStep  = 1;
    
      }
    
      $nextStep     = ( $currentStep < 4 ) ? ( $currentStep +1 ) : 4;
    
      $prevStep     = ( $currentStep > 1 ) ? ( $currentStep -1 ) : 1;
    
      // This woud require a URL structure like /my-post/
      $nextURL      = $currentURL . $nextStep . '/';
    
      $prevURL      = $currentURL . $prevStep . '/';
    
      // If you're using the GET paramter form like /?p=123
      // $nextURL   = add_query_arg( array( 'page' => $nextStep ), $currentURL );
      // $prevURL   = add_query_arg( array( 'page' => $prevStep ), $currentURL );
    
      $html         = '';
    
      if( $currentStep == 1 ) {
    
        $html .= '<form method="post" action="' . $nextURL . '">';
        $html .= ' <p>Name: <input type="text" name="mpf_name"></p>';
        $html .= ' <p>Email: <input type="text" name="mpf_email_address"></p>';
        $html .= ' <input type="submit" value="Next">';
    		$html .= '</form>';
    
      }
      if( $currentStep == 2 ) {
    
        // Store the collected values in the session variables
        $_SESSION['multipageform']['name']              = $_POST['mpf_name'];
        $_SESSION['multipageform']['email_address']     = $_POST['mpf_email_address'];
    
        $html .= '<form method="post" action="' . $nextURL . '">';
    		$html .= ' <p>Name on card: <input type="text" name="mpf_name_on_card"></p>';
    		$html .= ' <p>Credit Card No.:<input type="text" name="mpf_credit_card_number"></p>';
    		$html .= ' <input type="submit" value="Next">';
    		$html .= '</form>';
        $html .= '<p><a href="' . $prevURL . '">Back</a></p>';
    
      }
    
      if( $currentStep == 3 ) {
    
        $_SESSION['multipageform']['card_name']         = $_POST['mpf_name_on_card'];
        $_SESSION['multipageform']['card_number']       = $_POST['mpf_credit_card_number'];
    
        $name               = $_SESSION['multipageform']['name'];
        $email_address      = $_SESSION['multipageform']['email_address'];
        $name_on_card       = $_POST['mpf_name_on_card'];
        $credit_card_number = $_POST['mpf_credit_card_number'];
    
        // Display info collected so far - For debugging
        $html .= "<pre>" . $name . "</pre>";
        $html .= "<pre>" . $email_address . "</pre>";
        $html .= "<pre>" . $name_on_card . "</pre>";
        $html .= "<pre>" . $credit_card_number . "</pre>";
    
        // Display final form and collect final info here
        $html .= '<form method="post" action="' . $nextURL . '">';
    		$html .= '<p>Purchase Price: <input type="text" name="mpf_purchase_price"></p>';
    		$html .= '<p>Purchase Location:<input type="text" name="mpf_purchase_location"></p>';
    		$html .= '<input type="submit" value="Submit">';
        $html .= '</form>';
        $html .= '<p><a href="' . $prevURL . '">Back</a></p>';
    
      }
    
      if( $currentStep == 4 ) {
    
        $_SESSION['multipageform']['purchase_price']    = $_POST['mpf_purchase_price'];
        $_SESSION['multipageform']['purchase_location'] = $_POST['mpf_purchase_location'];
    
        // Write collected info details to database here
        // Not coded yet
    
        // var_dump( $_SESSION );
    
      }
    
      return $html;
    
    }
    add_shortcode( 'compare_form', 'start_compare' );
  3. pixelitus
    Member
    Posted 1 year ago #

    Hi Chris,

    Thanks a lot for your feedback and guidance. Much appreciated. It makes sense now that you mentioned the other PHP scripts are stand alone and not part of WP.

    While testing the code, there was one behaviour I noted. When I entered data on form1 and move to form2, then clicking on the code "Back", i.e. $prevURL, to return to form1. The form1 data input earlier has been cleared. This behaviour differs from the browser back button, which still maintains the data in form1.

    What if the user wants to go back to form1 to change information and find the data he input earlier is gone?

    Could you please help clarify or point me in the right direction, so I could research further. Thanks.

  4. Chris
    Member
    Posted 1 year ago #

    I guess you could add value attributes to the input fields as well. For example for Step 1:

    $valueName  = isset( $_SESSION['multipageform']['name'] )           ? strip_tags( $_SESSION['multipageform']['name'] )          : '';
    $valueEmail = isset( $_SESSION['multipageform']['email_address'] )  ? strip_tags( $_SESSION['multipageform']['email_address'] ) : '';
    
    $html .= '<form method="post" action="' . $nextURL . '">';
    $html .= ' <p>Name: <input type="text" name="mpf_name" value="' . $valueName . '"></p>';
    $html .= ' <p>Email: <input type="text" name="mpf_email_address" value="' . $valueEmail . '"></p>';
    $html .= ' <input type="submit" value="Next">';
    $html .= '</form>';
  5. pixelitus
    Member
    Posted 1 year ago #

    Hi Chris,

    thanks again for your feedback. It seems to work fine now. I'll continue to test and work towards completing my form.

Topic Closed

This topic has been closed to new replies.

About this Topic