如何在表单的下一步中显示用户输入的输入?

时间:2019-03-06 20:06:34

标签: wordpress forms webforms

如何在表单的下一步显示用户输入的输入?我已经尝试过ajax和javascript,但无法正常工作。

下面是代码

[md-form]

<div class="vidbees_field active" id="step1">
    <div class="form_steps" id="form_steps">
        <div class="content">
            <div class="container">
                <ul class="progressbar-title">
                    <li class="step-title active-title" onclick="currentSlide(1)"><span>Enter Text</span></li>
                    <li class="step-title" onclick="currentSlide(5)"><span>Your Logo</span></li>
                    <li class="step-title" onclick="currentSlide(6)"><span>More Info</span></li>
                </ul>
                </div>
                
                <div class="container">
                <ul class="progressbar">
                    <li class="step active" onclick="currentSlide(1)">Question / Statement</li>
                    <li class="step" onclick="currentSlide(2)">More Text</li>
                    <li class="step" onclick="currentSlide(3)">Call to Action</li>
                    <li class="step" onclick="currentSlide(4)">Website Url</li>
                    </ul>
                </div>
        </div>
    </div>
  <!------------------------------------TIRED OF---------------------------------------------> 
    <div class="form_field">
        <img src="https://vidbees.com/wp-content/uploads/2019/02/hutman-1.png">
            [md-text label=""]
            <div class="input_addon">
                [text* slide1-input1 id:step1input1 "TIRED OF"]
                <label for="step1input1" class="clear_btn" onclick="document.getElementById('step1input1').value = ''"> 
                    <i class="fa fa-trash" aria-hidden="true"></i>
                </label>
            </div>
            [/md-text]
<!------------------------------------MISLEADING LISTINGS?--------------------------------------------->
            [md-text label=""]
            <div class="input_addon">
                [text* slide1-input2 id:step1input2 "MISLEADING LISTINGS?"]
                <label for="step1input1" class="clear_btn" onclick="document.getElementById('step1input2').value = ''"> 
                    <i class="fa fa-trash" aria-hidden="true"></i>
                </label>
            </div>
            [/md-text]

        [sc name="Note Field"]

    </div> 
    [sc name="Steps Button"]
</div>

<div class="vidbees_field" id="step2">
    <div class="form_steps" id="form_steps">
            <div class="content">
                <div class="container">
                    <ul class="progressbar-title">
                        <li class="step-title active-title" onclick="currentSlide(1)"><span>Enter Text</span></li>
                        <li class="step-title" onclick="currentSlide(5)"><span>Your Logo</span></li>
                        <li class="step-title" onclick="currentSlide(6)"><span>More Info</span></li>
                    </ul>
                    </div>
                    
                    <div class="container">
                    <ul class="progressbar">
                        <li class="step active" onclick="currentSlide(1)">Question / Statement</li>
                        <li class="step active" onclick="currentSlide(2)">More Text</li>
                        <li class="step" onclick="currentSlide(3)">Call to Action</li>
                        <li class="step" onclick="currentSlide(4)">Website Url</li>
                        </ul>
                    </div>
            </div>
    </div>
     
    <div class="form_field">
        <img src="https://vidbees.com/wp-content/uploads/2019/02/hutman-2.png">
<!------------------------------------CALL US---------------------------------------------> 
        [md-text label=""]
        <div class="input_addon">
            [text* slide2-input1 id:step2input1 "CALL US( Please enter your text here)"]
            <label for="step2input1" class="clear_btn" onclick="document.getElementById('step2input1').value = ''"> 
                <i class="fa fa-trash" aria-hidden="true"></i>
            </label>
        </div>
        [/md-text]
<!------------------------------------WE KEEP IT REAL!---------------------------------------------> 
        [md-text label=""]
        <div class="input_addon">
            [text* slide2-input1 id:step2input2 "WE KEEP IT REAL!"]
            <label for="step2input2" class="clear_btn" onclick="document.getElementById('step2input2').value = ''"> 
                <i class="fa fa-trash" aria-hidden="true"></i>
            </label>
            
        </div>
        [/md-text]
<!-----------link----------------->
<img style= height:200px; width: 42px; src="https://vidbees.com/wp-content/uploads/2019/02/hutman-1.png">
i want to make this static label field into dynamic field, when custome enter his name then his name should be printed here below picture 
[md-text label=""]
            <div class="input_addon">
                
                <label class="clear_btn" > TIRED OF MISLEADING LISTINGS?
                    
                </label>
            </div>
           [/md-text]
         

       
       [sc name="Note Field"]
    </div>
   
    [sc name="Steps Button"]
</div>
  
<div class="vidbees_field" id="step3">
    <div class="form_steps" id="form_steps">
            <div class="content">
                <div class="container">
                    <ul class="progressbar-title">
                        <li class="step-title active-title" onclick="currentSlide(1)"><span>Enter Text</span></li>
                        <li class="step-title" onclick="currentSlide(5)"><span>Your Logo</span></li>
                        <li class="step-title" onclick="currentSlide(6)"><span>More Info</span></li>
                    </ul>
                    </div>
                    
                    <div class="container">
                    <ul class="progressbar">
                        <li class="step active" onclick="currentSlide(1)">Question / Statement</li>
                        <li class="step active" onclick="currentSlide(2)">More Text</li>
                        <li class="step active" onclick="currentSlide(3)">Call to Action</li>
                        <li class="step" onclick="currentSlide(4)">Website Url</li>
                        </ul>
                    </div>
            </div>
        <p class="form_tip logo__tip">
            Now it's time to add your logo. Click the yellow CHOOSE FILE button below the image
        </p>
    </div>
     
    <div class="form_field">
        <img src="https://vidbees.com/wp-content/uploads/2019/02/hutman-CTA.png">
        [md-text label=""]
             <div class="input_addon">
                 [text* call-to-action-1 id:callactioninput1 "LISTINGS YOU"]
                 <label for="callactioninput1" class="clear_btn" onclick="document.getElementById('callactioninput1').value = ''"> 
                     <i class="fa fa-trash" aria-hidden="true"></i>
                 </label>
             </div>
        [/md-text]
 
        [md-text label=""]
             <div class="input_addon">
                 [text* call-to-action-2 id:callactioninput2 "CAN TRUST"]
                 <label for="callactioninput2" class="clear_btn" onclick="document.getElementById('callactioninput2').value = ''"> 
                     <i class="fa fa-trash" aria-hidden="true"></i>
                 </label>
             </div>
        [/md-text]
 
        [md-text label=""]
             <div class="input_addon">
                 [text* call-to-action-3 id:callactioninput3 "FROM PEOPLE YOU CAN DEPEND ON!"]
                 <label for="callactioninput3" class="clear_btn" onclick="document.getElementById('callactioninput3').value = ''"> 
                     <i class="fa fa-trash" aria-hidden="true"></i>
                 </label>
             </div>
        [/md-text]

       [sc name="Note Field"]
    </div>
   
    [sc name="Steps Button"]
</div>
   
<div class="vidbees_field" id="step4">
    <div class="form_steps" id="form_steps">
            <div class="content">
                <div class="container">
                    <ul class="progressbar-title">
                        <li class="step-title active-title" onclick="currentSlide(1)"><span>Enter Text</span></li>
                        <li class="step-title" onclick="currentSlide(5)"><span>Your Logo</span></li>
                        <li class="step-title" onclick="currentSlide(6)"><span>More Info</span></li>
                    </ul>
                    </div>
                    
                    <div class="container">
                    <ul class="progressbar">
                        <li class="step active" onclick="currentSlide(1)">Question / Statement</li>
                        <li class="step active" onclick="currentSlide(2)">More Text</li>
                        <li class="step active" onclick="currentSlide(3)">Call to Action</li>
                        <li class="step active" onclick="currentSlide(4)">Website Url</li>
                        </ul>
                    </div>
            </div>
    </div>

    <div class="form_field">
        <img src="https://vidbees.com/wp-content/uploads/2019/02/hutman-WEBSITE.png">
       [md-text label="Website URL"]
       <div class="input_addon">
           [text website-url id:weburlinput "WWW.YOURWEBSITE.COM"]
           <label for="weburlinput" class="clear_btn" onclick="document.getElementById('weburlinput').value = ''"> 
              <i class="fa fa-trash" aria-hidden="true"></i>
           </label>
       </div>
       [/md-text]
    </div>
    
    [sc name="Steps Button"]
</div>

<div class="vidbees_field" id="step5">
    <div class="form_steps" id="form_steps">
            <div class="content">
                <div class="container">
                    <ul class="progressbar-title">
                        <li class="step-title active-title" onclick="currentSlide(1)"><span>Enter Text</span></li>
                        <li class="step-title active-title" onclick="currentSlide(5)"><span>Your Logo</span></li>
                        <li class="step-title" onclick="currentSlide(6)"><span>More Info</span></li>
                    </ul>
                </div>
            </div>
       <div class="form_tip logo_info"> 
            <i class="fa fa-lightbulb-o" aria-hidden="true"> </i>
            <p> Now it's time to add your logo. Click the yellow CHOOSE FILE button below the image. </p>
       </div>
    </div>
   
    <div class="form_field" id="file_field">
        <img src="https://vidbees.com/wp-content/uploads/2019/02/hutman-LOGO.png">
        [md-file label="" nofile=""]
            [file logo-file]
        [/md-file]
    </div>
     
    [sc name="Steps Button"]
</div>
   
<div class="vidbees_field" id="step6">
    <div class="form_steps" id="form_steps">
            <div class="content">
                <div class="container">
                    <ul class="progressbar-title">
                        <li class="step-title active-title" onclick="currentSlide(1)"><span>Enter Text</span></li>
                        <li class="step-title active-title" onclick="currentSlide(5)"><span>Your Logo</span></li>
                        <li class="step-title active-title" onclick="currentSlide(6)"><span>More Info</span></li>
                    </ul>
                </div>
            </div>
        <div class="form_tip add_info_tip"> 
            <i class="fa fa-lightbulb-o" aria-hidden="true"> </i>
            <p> Almost done...give us your NAME, CONTACT NUMBER, and EMAIL and we'll contact you within 24 hours to deliver your video. </p>
       </div>
    </div>

    <div class="form_field">
        [md-text label="Your Name (required)" class="vid_input"]
            [text* your-name Required]
        [/md-text]
    </div>

    <div class="form_field">
        [md-text label="Contact Number (required)" class="vid_input"]
            [text* contact-number]
        [/md-text]
    </div>

    <div class="form_field">
        [md-text label="Your Email (required)" class="vid_input"]
            [email* your-email] </label>
        [/md-text]
    </div>
   
    <div class="form_note">
        <span class="required">NOTE: </span> &nbsp; Want to customize this video to add your own text? How about changing the music or adding a background at the end of the video? There are so many things you can do to customize this video so click CUSTOMIZE
    </div>
    
   <div class="steps_btn">
        <div class="wrap_prev">
             <input type="button" class="prev_btn" onclick="plusSlides(-1)" value="Previous" />
        </div>
   </div>
   <div class="vidbees_submit">
        [submit "SUBMIT AND PAY"]
    </div>
</div>

[/md-form]

0 个答案:

没有答案