0

My landing page has two steps (one for selecting an option from a dropdown menu and pressing 'send', and one for entering your email and pressing 'send'). These steps appear to be controlled either by javascript or html5, something I am not used to. I need to add a third "step" to the system.

Here is the site link: you will see that after selecting an answer and entering something in the email field you are back to the first selection.

the section of code in index.html appears like this: 

'<!-- Step 1 -->
        <div class="steps step-1">
            <p>STEP 1: Answer this question</p>
            <form action="#" method="post">
                <div class="select-holder">
                    <label>Who is giving this away the awesome thing that you're about to download?</label>
                    <div class="select-wrap">
                        <select name="" >
                            <option selected="selected" value="Select Your Answer">Select Your Answer</option>
                            <option value="LeadBrite, Duh!">LeadBrite, Duh!</option>
                            <option value="Lady Gaga">Lady Gaga</option>
                            <option value="Santa Claus">Santa Claus</option>
                        </select>
                    </div>  
                </div>
                <input type="submit" value="Submit Answer" class="submit-button" />
            </form>
            <div class="contest-ends">
                <p><span>Contest Ends</span></p>
                <p>Month 00, 00:00 AAA</p>
            </div>
        </div>
        <!-- END Step 1 -->
        <!-- Step 2 -->
        <div class="steps step-2">
            <p>STEP 2: Your details</p>
            <form action="#" method="post">
                <input type="text" class="field" value="Enter your email address" title="Enter your email address" />
                <input type="submit" value="Send" class="send" />
            </form>
            <div class="contest-ends">
                <p><span>Contest Ends</span></p>
                <p>Month 00, 00:00 AAA</p>
            </div>
        </div>
        <!-- END Step 2 -->'

As I said, I want to add a step three but I do not know how to move forward. The source files include an HTML5 file and others that I believe I'd have to connect step-3 to in order for it to function properly.

I appreciate any help. Thanks.

user252415
  • 19
  • 4

1 Answers1

0

Hoping to simplify this by creating a sample to work with. If you check out http://jsfiddle.net/fgAUQ/, you can see the form listening for the submit during the email question. 

$(document).on('submit', 'form', function (e) {
    // Check email address
    // if email address ok
        $('.step-2').hide();
        $('.step-3').fadeIn(800);
        e.preventDefault();
    // else 
        // alert
        // e.preventDefault();
    // end if
});

You'll still need to follow this through with storing / processing the email and handling the form upload.

bswatson
  • 447
  • 4
  • 9
  • Thanks a bunch for your help bswatson. I edited this area here: 'else { $('.step-1').hide(); $('.step-2').fadeIn(800); $('.step-3').hide(); return false; }' and added the third step. I am not sure if that's what you meant. I'm a bit confused as to what "listening for the form submit and displaying the third step" meant. Sorry for not getting this. – user252415 Dec 21 '13 at 04:17
  • Created a jsFiddle and added a more specific info to hopefully get you going on the right direction. – bswatson Dec 21 '13 at 05:26
  • Thanks so much! The jsfiddle really showed me what was going on. It's working like a charm. Now just need to style it and make sure everything is connected. I really appreciate it! – user252415 Dec 21 '13 at 06:17
  • So I wouldn't normally do this, but I am really stuck. Your advice was really helpful last time so I hope you don't mind my coming to you again. I've got the page set up but I can't seem to figure out how to save/process the email addresses once they are entered into the field. I wrote a bit of php code to email them to myself but it isn't working. Any suggestions? – user252415 Jan 01 '14 at 00:11
  • Do you have a link to the php source? – bswatson Jan 01 '14 at 02:26
  • Looks like the input submission, which is an link to http://realfamilytrips.com/share-itineraries, isn't part of the form that holds the emailaddy field. If you encapsulate all of the form fields into the
    section, and update signup.php to redirect to the share-itineraries page, it should get you closer.
     – bswatson Jan 01 '14 at 05:11
  • I changed the step 3 form to this: '
    ' now all the forms are wrapped in the 'form' tag. I am not sure I understand about the redirect however. Do it in PHP? When the button is clicked? Won't that just trigger the link though? I am sorry for getting lost here but I assure you I am trying to follow along.     – user252415 Jan 01 '14 at 06:07
  • Is this what I am looking for? 'header("Location: http://realfamilytrips.com/share-itineraries");' exit(); – user252415 Jan 01 '14 at 06:19
  • That looks to be it. Here's a similar situation that used the same concept to redirect - http://stackoverflow.com/questions/17157685/php-redirect-to-another-page-after-form-submit – bswatson Jan 01 '14 at 19:43
  • I added it. Still no luck but I am getting closer. I managed to get a few emails generated earlier but they contained no email address, only the subject and body defined in the php. I'm wondering, is this bit of code jamming me up?: '$(document).on('submit', 'form', function (e) { // Check email address // if email address ok $('.step-2').hide(); $('.step-3').fadeIn(800); e.preventDefault(); // else // alert // e.preventDefault(); // end if });' – user252415 Jan 02 '14 at 01:07
  • It seems to outline what happens after clicking the submit button. Do I need to add anything? Thanks and happy new year. – user252415 Jan 02 '14 at 01:07
  • The error was either within the structure of the "step three" form itself or within that bit of code I gave you. I eliminated the third step and used the php redirect you suggested, and uploaded the original fucntions.js. Now it works like a charm. Thanks for all your help. – user252415 Jan 02 '14 at 03:30