0

I have a page like this:

<h2 class="subHeader contentSubHeader">Are you already a member? Don´t miss your next career opportunity!</h2>
<p class="subHeader contentSubHeader">[one_half padding="0px 40px 0 20px"][multipage_form][/one_half]</p>

<div class="text contentText">
<p style="text-align: left;">[one_half_last padding="0px 20px 0 20px"]</p>
✔ We'll keep you informed about new opportunities in the digital sector that fit your profile.

✔ We have new opportunities every week in UX, e-commerce, mobile, SEO/SEA, social media, online marketing, big data, ...

✔ PPC, UX, SEO, RTB, ... . We know what you're talking about.
<p style="text-align: left;">[/one_half_last]</p>
&nbsp;
<h2 class="subHeader contentSubHeader">Get on board and join the Crew!</h2>

and so on ... . As you can see I output the form multipage_form. I've created a custom plugin Multistep Form where I create a form. My multistep_form.php in plugin multistep_form looks like this:

<?php
// Add shortcode to include form in page
// KEY, VALUE
add_shortcode('multipage_form','multipage_form');

// Register site styles and scripts is_page( 'about-me' )
/**
 * @todo: check which page, only check on /subscribe
 */
add_action('wp_enqueue_scripts','multistep_form_init');

// Create form
function multipage_form()
{
    global $wpdb;
    $this_page      =   $_SERVER['REQUEST_URI'];
    $page           =   $_POST['page'];
    if ( $page == NULL ) {

        /**
         * first name
         * last name
         * email address
         * current job title
         * // autofill with linkedin //
         */

        // output form
        echo
        '<form method="post" action="' . $this_page .'">

            <label for="FNAME" id="FNAME">First Name:</label>
            <input type="text" name="FNAME" id="FNAME" required="required" />

            <label for="LNAME" id="LNAME">Last Name:</label>
            <input type="text" name="LNAME" id="LNAME" required="required" />

            <label for="EMAIL" id="EMAIL">Email address: </label>
            <input type="text" name="EMAIL" id="EMAIL" required="required" />

            <label for="CURRENTJOBTITLE" id="CURRENTJOBTITLE">Current Job Title:</label>
            <input type="text" name="CURRENTJOBTITLE" id="CURRENTJOBTITLE" />

            <!-- Hidden value for page -->
            <input type="hidden" value="1" name="page" />

            <input type="submit" value="Next" />

        </form>';
    }   // END PAGE 1 FORM

    elseif ( $page == 1 ) {

        // store POST variables
        $first_name         = $_POST['FNAME'];
        $last_name          = $_POST['LNAME'];
        $email              = $_POST['EMAIL'];
        $current_jobtitle   = $_POST['CURRENTJOBTITLE'];

        // get taxonomy terms
        $years_experiences = get_taxonomy_terms('job_listing_category');
        $job_types = get_taxonomy_terms('job_listing_type');
        $job_regions = get_taxonomy_terms('job_listing_region');
        $job_tags = get_taxonomy_terms('job_listing_tag');

        /**
         * are you (freelancer, ...)
         * you live in (brussel, ...)
         * years of experience
         * expertise in digital (choose max 2: data science, e-commerce, ...)
         */

        // output form
        echo '
        <form action="' . $this_page .'" method="post">

            <label for="JOBTYPE" id="JOBTYPE">Are you...</label>
            <select name="JOBTYPE" id="JOBTYPE">
            ';
            foreach($job_types as $job_type)
            {
                echo '<option value="' . $job_type->term_id . '">' . $job_type->name . '</option>';
            }

            echo '</select>

            <label for="JOBREGION" id="JOBREGION">You live in...</label>
            <select name="JOBREGION" id="JOBREGION">
            ';
            foreach($job_regions as $job_region)
            {
                echo '<option value="' . $job_region->term_id . '">' . $job_region->name . '</option>';
            }

            echo '</select>

            <label for="YEARSEXPERIENCE" id="YEARSEXPERIENCE">Years of experience in digital:</label>
            <select name="YEARSEXPERIENCE" id="YEARSEXPERIENCE">
            ';
            foreach($years_experiences as $years_experience)
            {
                echo '<option value="' . $years_experience->term_id . '">' . $years_experience->name . '</option>';
            }

            echo '</select>

            <p>Expertise(s) in digital (choose maximum 2):</p>';

            foreach($job_tags as $job_tag)
            {
                echo '<input class="single-checkbox" type="checkbox" name="tags" value="' . $job_tag->term_id . '">' . $job_tag->name . '<br>';
            }

            // Hidden value for page
            echo '<input type="hidden" name="page" value="2" />
            <input type="hidden" name="form_id" value="' . /*$form_id*/ "hello" . '" />

            <input type="submit" value="Submit" />

            ';
    }   // END PAGE 2 FORM
}

/**
 * @param $taxonomy_category
 * @return array
 *
 */
function get_taxonomy_terms($taxonomy_category)
{
    $args = array(
        'orderby'    => 'count',
        'hide_empty' => 0,
    );

    $terms = get_terms($taxonomy_category, $args);

    return $terms;
}

function multistep_form_init() {
    wp_enqueue_script( 'multistep-form-js', plugins_url( '/js/custom.js', __FILE__ ));
}

Now when I check the page where my form is shown, the form is always show on top and not in <p class="subHeader contentSubHeader"></p> where it should be ... . My HTML looks like this after rendering the form:

<div class="entry-content">
    <form method="post" action="/subscribe/"><label for="FNAME" id="FNAME">First Name:</label> <input type="text" name="FNAME" id="FNAME" required="required" style="cursor: auto; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;"><label for="LNAME" id="LNAME">Last Name:</label> <input type="text" name="LNAME" id="LNAME" required="required"><label for="EMAIL" id="EMAIL">Email address: </label> <input type="text" name="EMAIL" id="EMAIL" required="required"><label for="CURRENTJOBTITLE" id="CURRENTJOBTITLE">Current Job Title:</label> <input type="text" name="CURRENTJOBTITLE" id="CURRENTJOBTITLE"> <input type="hidden" value="1" name="page"><input type="submit" value="Next"></form>

    <h2 class="subHeader contentSubHeader">Are you already a member? Don´t miss your next career opportunity!</h2>

    <p class="subHeader contentSubHeader"></p>

    <div class="content-column one_half">
        <div style="padding-top:0px;padding-right:40px;padding-left:20px;"></div>
    </div>
    <p></p>
    ....
</div>

As you see my form is on top and I can't explain why ... . What am I doing wrong?

Click here for link to the page.

3
  • share the link to the page
    – booota
    Feb 23, 2015 at 15:00
  • Added link to the page
    – nielsv
    Feb 23, 2015 at 15:03
  • 1
    Shortcode should return, not echo, and that's why it's not working correctly.
    – David Gard
    Feb 23, 2015 at 15:09

1 Answer 1

1

When working with shortcode you must return a value rather than output directly. The below amendmetn should fix your positioning issue.

For more informaiont, see the Shortcode API Codex, speciffically the Output section.

function multipage_form()
{
    global $wpdb;
    $this_page      =   $_SERVER['REQUEST_URI'];
    $page           =   $_POST['page'];
    if ( $page == NULL ) {

        /**
         * first name
         * last name
         * email address
         * current job title
         * // autofill with linkedin //
         */

        // output form
        $my_form = '<form method="post" action="' . $this_page .'">

            <label for="FNAME" id="FNAME">First Name:</label>
            <input type="text" name="FNAME" id="FNAME" required="required" />

            <label for="LNAME" id="LNAME">Last Name:</label>
            <input type="text" name="LNAME" id="LNAME" required="required" />

            <label for="EMAIL" id="EMAIL">Email address: </label>
            <input type="text" name="EMAIL" id="EMAIL" required="required" />

            <label for="CURRENTJOBTITLE" id="CURRENTJOBTITLE">Current Job Title:</label>
            <input type="text" name="CURRENTJOBTITLE" id="CURRENTJOBTITLE" />

            <!-- Hidden value for page -->
            <input type="hidden" value="1" name="page" />

            <input type="submit" value="Next" />

        </form>';
    }   // END PAGE 1 FORM

    elseif ( $page == 1 ) {

        // store POST variables
        $first_name         = $_POST['FNAME'];
        $last_name          = $_POST['LNAME'];
        $email              = $_POST['EMAIL'];
        $current_jobtitle   = $_POST['CURRENTJOBTITLE'];

        // get taxonomy terms
        $years_experiences = get_taxonomy_terms('job_listing_category');
        $job_types = get_taxonomy_terms('job_listing_type');
        $job_regions = get_taxonomy_terms('job_listing_region');
        $job_tags = get_taxonomy_terms('job_listing_tag');

        /**
         * are you (freelancer, ...)
         * you live in (brussel, ...)
         * years of experience
         * expertise in digital (choose max 2: data science, e-commerce, ...)
         */

        // output form
        $my_form.= '<form action="' . $this_page .'" method="post">

            <label for="JOBTYPE" id="JOBTYPE">Are you...</label>
            <select name="JOBTYPE" id="JOBTYPE">
            ';
            foreach($job_types as $job_type)
            {
                $my_form.= '<option value="' . $job_type->term_id . '">' . $job_type->name . '</option>';
            }

            $my_form.= '</select>

            <label for="JOBREGION" id="JOBREGION">You live in...</label>
            <select name="JOBREGION" id="JOBREGION">
            ';
            foreach($job_regions as $job_region)
            {
                $my_form.= '<option value="' . $job_region->term_id . '">' . $job_region->name . '</option>';
            }

            $my_form.= '</select>

            <label for="YEARSEXPERIENCE" id="YEARSEXPERIENCE">Years of experience in digital:</label>
            <select name="YEARSEXPERIENCE" id="YEARSEXPERIENCE">
            ';
            foreach($years_experiences as $years_experience)
            {
                $my_form.= '<option value="' . $years_experience->term_id . '">' . $years_experience->name . '</option>';
            }

            $my_form.= '</select>

            <p>Expertise(s) in digital (choose maximum 2):</p>';

            foreach($job_tags as $job_tag)
            {
                $my_form.= '<input class="single-checkbox" type="checkbox" name="tags" value="' . $job_tag->term_id . '">' . $job_tag->name . '<br>';
            }

            // Hidden value for page
            $my_form.= '<input type="hidden" name="page" value="2" />
            <input type="hidden" name="form_id" value="' . /*$form_id*/ "hello" . '" />

            <input type="submit" value="Submit" />

            ';
    }   // END PAGE 2 FORM

    return $my_form;

}
1
  • Thanks! Never worked with wordpress so was just trying something out :-) You're my hero of the day!
    – nielsv
    Feb 23, 2015 at 15:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.