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.

Replace submit button

  1. Is there someway to move/displace the submit button?

    I have some forms that are inside the twitter bootstrap modal, and am trying to move the submit button to the footer of the modal. Example at hookahi.com ,if you go to the bottom of the page and click "Contact Us" it pops up.

    I tried the approach here: http://www.gravityhelp.com/forums/topic/submit-button-placement-below-a-specific-field , but realized since it is not within the <form></form> tags it does really work haha. Here is the code for the modal too: http://pastie.org/5500454. I also tried a pretty crude hack with the gform_submit_button filter, and wrapping the footer divs around the button, but that didn't work. Any ideas?

    Posted 11 years ago on Sunday December 9, 2012 | Permalink
  2. I don't know of any way to put the Gravity Forms submit button outside of Gravity Forms.

    Posted 11 years ago on Tuesday December 11, 2012 | Permalink
  3. Thanks for the reply,

    In that case I suppose I could try to do it the other way around, and insert the html from the footer around the submit button.

    Posted 11 years ago on Tuesday December 11, 2012 | Permalink
  4. Let us know if you work something out.

    Posted 11 years ago on Thursday December 13, 2012 | Permalink
  5. I was able to achieve the end result of having the gform submit in the modal footer. For anyone who uses Twitter Bootstrap, this may be helpful. I spliced the html from the modal into a submit button filter.

    A normal modal would look like this:

    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel"  style="text-align: center;">Learn More</h3>
      </div>
      <div class="modal-body">
       Stuff
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
      </div>
    </div>

    but by making it this when using gforms, you can insert the gform submit into the modal footer:

    <div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel"  style="text-align: center;">Contact Us</h3>
      </div>
      <div class="modal-body">
    <?php echo do_shortcode('[gravityform id="9" name="Contact Support" title="false" description="false"]'); ?>
    </div>

    and adding a filter to the submit button:

    add_filter("gform_submit_button_9", "form_submit_button", 10, 2);
    function form_submit_button($button, $form){
        return "
    </div>
    <div class='modal-footer'>
    <button class='button' id='gform_submit_button_9'>Submit</button><button class='btn' data-dismiss='modal' aria-hidden='true' style='margin-right: 10px'>Close</button>
      </div>";
    }

    This way the modal functions as it was design to. A demo can be seen on hookahi.com, there is a 'Message Us' link in the footer.

    Posted 11 years ago on Thursday December 13, 2012 | Permalink
  6. Thank you for posting your solution. I'm sure it will be helpful to someone.

    Posted 11 years ago on Thursday December 13, 2012 | Permalink
  7. I'd like to implement this myself. I am using a modal in pagelines theme and activating it with:

    [pl_modal title="E-mail contact form" type="btn" hash="contact" colortype="default" label="Sent email"]
    [gravityform id="1" name="Contact "]
    [/pl_modal]

    Ideally what I would like is to move the submit button for the GF form into the modal footer beside the Close button. I tried with the come above, but have not had any luck (changed the gform_submit_button to match my button number. I guess I am unsure of the what the filter does or where it should be added. Tried adding in the custom CSS area of the theme.
    All help would be appreciated.

    Posted 10 years ago on Monday May 13, 2013 | Permalink
  8. Hi I just saw your post, were you able to get a result?

    Posted 10 years ago on Wednesday June 19, 2013 | Permalink
  9. David Peralty

    ktrusak's solution is probably still going to be the best you get regarding this issue.

    Posted 10 years ago on Thursday June 20, 2013 | Permalink

This topic has been resolved and has been closed to new replies.