Nedsferatu.com Blog

I recently made a simple tool to help folks buy the right size of of Levi’s 501xx Shrink to Fit Jeans. It includes a form that takes two numbers as inputs then performs some logic and returns the results on the same page. It was surprisingly easy to do but took me a surprisingly long time to figure out so I hope this explanation of how I did it will be helpful for others!

I made a page template for this tool that at the top had my logic for the utility then at the bottom displayed the page content as added through the wp-admin page editor. Admittedly, this is not great php work but for a quick example it gets the point across. Basically it goes a little something like this: (warning, this is not the actual code for the page and will likely not work if you copy and paste it directly)

<?php
/*
Template Name: Sizing
*/
?>

<?php get_header(); ?>
<div id=”content_box”>
<div id=”content” class=”pages”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php endwhile; endif; ?>

<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<h2><?php the_title(); ?></h2>
<div id=”sizing-form” class=”entry”>
<?php
$sizeForm = “<form method=\”post\” action=\”\”>W:<input type=\”text\” size=\”3\” maxlength=\”2\” name=\”Wsize\”>  x L:<input type=\”text\” size=\”3\” maxlength=\”2\” name=\”Lsize\”><input type=\”submit\” value=\”submit\” name=\”submit\”></form>”;
$Wsize = $_POST["Wsize"];
$Lsize = $_POST["Lsize"];
if (!isset($_POST['submit'])) { // if page is not submitted to itself echo the form
echo $sizeForm.”<br /><br />”;
}

else { // display form again with results
echo $sizeForm.”<br /><br />”;
echo “<p>Your measured pant size is, “.$Wsize.”x”.$Lsize.”.</p>”;

//special logic here on the input variables from the form, creating new variables referenced below

echo “<ul><li>The Official Levi’s Recommendation is: “.$Leviw.”x”.$Levil.”.</li>”;
echo “<li>My Recommendation is: <strong>”.$Nedw.”x”.$Nedl.”</strong>.</li>”;
echo “<li>My Recommendation if you want a cuff is: “.$Cuffw.”x”.$Cuffl.”.</li></ul>”;
}
?>
</div>
<div class=”entry”>
<?php the_content(‘<p>Read the rest of this page &rarr;</p>’); ?>
<?php link_pages(‘<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>
</div>
<?php if (‘open’ == $post-> comment_status) { ?>
<p class=”tagged”><a href=”<?php the_permalink() ?>#comments”><?php comments_number(‘No Comments’, ‘1 Comment’, ‘% Comments’); ?></a></p>
<div class=”clear”></div>
<?php } else { ?>
<div class=”clear rule”></div>
<?php } ?>
<?php if (‘open’ == $post-> comment_status) { comments_template(); } ?>
</div>

</div>
<?php include (TEMPLATEPATH . ‘/sidebar.php’); ?>
<?php include (TEMPLATEPATH . ‘/r_sidebar.php’); ?>
</div>
<?php get_footer(); ?>

So here is the basic structure:

Declare the template name (used in the page editor to assign the template to the page)

Include Header

Start Page and include title

Insert custom code for the form you want to use

Continue to display the page content from the editor (div class “entry”)

Include sidebars and footer

The key learning for me was to return the values on the same page, you need to declare a blank action:

<form method=”post” action=”">

I have read that people have luck with a GET method as well so that is also worth trying if you are having difficulty.

I hope this is helpful for people looking to do something similar. For me, it was a simple enough form that I didn’t need a huge plugin with ajax and database storage to achieve it, but I did want something more interactive than a chart or static table. Let me know if this has been helpful!

Related Posts:

• No related posts