PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Creating a popup Form from a WordPress Menu

  1. I'm looking for some guidance here. I'm trying to create a popup form from a menu. I've seen how to create a popup modal form in this article here: http://www.gravityhelp.com/forums/topic/pop-up-form-how-to, but I'm not sure how to make this work from a menu link in a wordpress 3.0 menu.

    In the topic I referenced above, there's a user that's done it and just the way I'd like to do it. Look here and click the contact menu item: http://adii.me/ < I did contact that user, so we'll see what comes in... But I'm just curious how others here have done it.

    Posted 12 years ago on Saturday September 24, 2011 | Permalink
  2. Alright, I've pretty much got this working the way I want.

    I've got the popup working and you can see it here: http://bit.ly/nifyiA
    Just click on the 'Subscribe' button in the menu. You'll see the popup fade-in. The problem that I'm now having is that the form doesn't give a message if you fill the form out properly, nor does show the error message in the pop up box if you fail to fill out the required fields. It actually, for me, is redirecting to my personal website... Which is weird. It shouldn't do that at all. The actual link for that url is just a '#'.

    To get this to work, I couldn't use the shortcode, so I had to copy the raw html the form generates and then slapped that into the header.php file. I'm going to attempt to share my form's code below. Hopefully it comes through.

    I'm really close and just need some guidance. =)

    <div id="subscribe-link">
    
    <div class="pointer" id="boxtop" style="display: none;"></div>
    <div class="ContactMe" style="display: none;">
    <div id="gform_wrapper_1" class="gform_wrapper"><form action="/" target="gform_ajax_frame_1" id="gform_1" enctype="multipart/form-data" method="post">
                            <div class="gform_heading">
                                <h3 class="gform_title">Join Our Newsletter</h3>
                                <span class="gform_description">We would love to hear from you! Please fill out this form and we will get in touch with you shortly.</span>
                            </div>
                            <div class="gform_body">
                                <ul class="gform_fields top_label" id="gform_fields_1"><li class="gfield               gfield_contains_required" id="field_1_1"><label for="input_1_1" class="gfield_label">Name<span class="gfield_required">*</span></label><div class="ginput_container"><input type="text" tabindex="1" class="medium" value="" id="input_1_1" name="input_1"></div><li class="gfield               gfield_contains_required" id="field_1_2"><label for="input_1_2" class="gfield_label">Email<span class="gfield_required">*</span></label><div class="ginput_container"><input type="text" tabindex="2" class="medium" value="" id="input_1_2" name="input_2"></div>
                                </div>
            <div class="gform_footer top_label"> <input type="submit" tabindex="3" value="Submit" class="button gform_button" id="gform_submit_button_1"><div class="gform_edit_link">Edit this form</div>
                <input type="hidden" value="1" name="is_submit_1" class="gform_hidden">
                <input type="hidden" value="1" name="gform_submit" class="gform_hidden">
                <input type="hidden" value="4e804d5368e5b" name="gform_unique_id" class="gform_hidden">
                <input type="hidden" value="YToyOntpOjA7czo2OiJhOjA6e30iO2k6MTtzOjMyOiIyNDhlYTQyYmQwOTQ3YzA4NjNlZmZlYjBkN2IzZWExOCI7fQ==" name="state_1" class="gform_hidden">
                <input type="hidden" value="0" id="gform_target_page_number_1" name="gform_target_page_number_1" class="gform_hidden">
                <input type="hidden" value="1" id="gform_source_page_number_1" name="gform_source_page_number_1" class="gform_hidden">
                <input type="hidden" value="" name="gform_field_values">
    
            </div>
                    </form>
                    </div>
    </div>
    </div>
    
    Posted 12 years ago on Monday September 26, 2011 | Permalink
  3. Alright, inching closer to the finish line... I was able to figure out how to get shorcode to be used in a template file after reading this article: http://wp-cms.com/template-development/inserting-wordpress-shortcode-outside-the-loop-in-a-template/

    So the form still pops up nicely, but when you either submit the form with proper data/or not, you get redirected to a white page that either tells you you didn't fill out the info properly or that you did and thanks! The form data is saved in gravity forms at least.

    I'd like for the form to simply show either the error or a success message upon submission and stay on the same page, rather than redirect.

    Any insight there?

    Posted 12 years ago on Monday September 26, 2011 | Permalink
  4. Hey Yanni, been wanting to do this myself... can you post back instructions if you get it to work...

    Posted 12 years ago on Monday September 26, 2011 | Permalink
  5. So this form is working now. I'll be working on some how-to documentation for the group. =)
    Thanks.

    Posted 12 years ago on Monday September 26, 2011 | Permalink
  6. Hey Yanni,

    I would also like to know how you did it please :)

    Cheers,

    Simon

    Posted 12 years ago on Friday September 30, 2011 | Permalink