自定义表单未在页面上的正确位置显示

我有这样一个页面：

<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>

等等。如您所见，我输出了表单multipage_form. 我已经创建了一个自定义插件Multistep Form 在这里我创建了一个表单。我的multistep_form.php in插件multistep_form 如下所示：

<?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__ ));
}

现在，当我查看显示表单的页面时，表单总是显示在顶部而不是<p class="subHeader contentSubHeader"></p> 应该在哪里。呈现表单后，我的HTML如下所示：

<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>

正如你看到的，我的表格在上面，我无法解释为什么。我做错了什么？

Click here for link to the page.

小码农CODE

相关推荐

Execute php in pages