Archived

This topic is now archived and is closed to further replies.

  • 0

Gravity forms submit button in modal footer

Question

Posted · Report post

Hi folks

I have a gravity form created and loading in a modal:

[pl_modal title="E-mail contact form" type="btn" colortype="default" label="Sent email"]

[gravityform id="1" name="Contact "]

[/pl_modal]

I wonder is it possible to add (or move) the GF submit button to the footer of the modal. My fear is that users would hit the modal close button and think the form was submitted.

Share this post


Link to post
Share on other sites

15 answers to this question

Posted · Report post

Thanks for posting the progress. Unfortunately, this isn’t my area of expertise so I will leave this one open in case anyone else can figure something out and post a possible solution you can implement.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Keith,

 

May we have a link to this page?

 

You should be able to hide the modal button with CSS, but that might defeat the purpose. Maybe you just need to change "Sent email" to "Close Window"?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi rob

Site is still locked down while I finish off development. Going to try and firebug the GF submit button and see if I can make sense of it.

Share this post


Link to post
Share on other sites

Posted · Report post

Keith,

 

If you hide the GF button, you won't be able to process the form.  If you hide the modal button, the only way to leave the modal would be to hit the Esc key, which your visitors won't know to do. 

 

I think you're caught in a classic Catch-22.   The only thing I can think of, is specific instruction in the modal button text to close the window.  Of course, not seeing this live, it's hard to tell.

Share this post


Link to post
Share on other sites

Posted · Report post

Unfortunately,  this isn't my best area of expertise, so I don't know if GF will work this way in a modal window, using the modal's button to enable the form's action.   That's something you'd really need to ask GF.  Since we're using Twitter Bootstrap, they may know more about this than I do.

 

In my own humble, limited knowledge, if the form is present via shortcode, it contains within it, the entire processing form. Moving or repositioning the button from that would likely result in z-index issues, but again, that's just my opinion.

Share this post


Link to post
Share on other sites

Posted · Report post

Not sure if it can be achieved, however maybe some of the Ninja's might have a solution

 

I think this is the code for the GF submit button (got it from firebug)

<input type="submit" id="gform_submit_button_1" class="button gform_button" value="Submit" tabindex="13">

Is it possible to position it in the footer of the modal?

 

I am assuming that other GF forms will have a different button id. 

 

If is, is it possible to change the name of the close button to discard? I have added hash="contact" which I believe will make the modal a identifable as modal_contact and therefore won't affect other modals on the site. 

 

Thanks in advance

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

Unfortunately, this goes beyond what we can provide support for, if you wish to have this functionality, you will need to contact one of our Pros for assistance.

 

http://www.pagelines.com/pros/

Share this post


Link to post
Share on other sites

Posted · Report post

I maybe making a little progress on this. At the moment I have the modal button in a widget and its popping up with the GF form.

[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 came across this code which does appear to do this in a twitter bootstrap modal. 

<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="1" name="Contact Support" title="false" description="false"]'); ?>
</div>
add_filter("gform_submit_button_1", "form_submit_button", 10, 2); function form_submit_button($button, $form){ return " </div> <div class='modal-footer'> <button class='button' id='gform_submit_button_1'>Submit</button><button class='btn' data-dismiss='modal' aria-hidden='true' style='margin-right: 10px'>Close</button> </div>"; }
<a href="#myModal12" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

The modal I want this behaviour on is identified as .modal_contact or I'd happily us the bootstrap approach it i could get it functioning correctly. 

 

I am some what lost when it comes to the filter. 

 

I am sure there could be away to adapt the pagelines modal to this functionality. 

Share this post


Link to post
Share on other sites

Posted · Report post

To be honest, I don't think this can be achieve without extensive customisation, if you wish to have a modal popup contact form. Then why not use Poppy from the PageLines store?

Share this post


Link to post
Share on other sites

Posted · Report post

I was thinking about poppy but I need more features. I know it can be achieved with fancy box plugin, but I'm trying to keep plugins to a minimum.

Another really simple option might be to hide the modal footer on this one modal. It's already named modal_contact and I tried

#modal_contact.modal-footer { display: none;}

But that didn't work for me. This would be the simplest solution, not as elegant as the other option though.

Share this post


Link to post
Share on other sites

Posted · Report post

Is #modal_contact the ID class for the modal you're trying to work with? If so, you should try this instead:

#page #modal_contact .modal-footer {display: none;}

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks Catrina. That works to remove the footer. 

 

The preferred option would be to be able to add the submit button to the footer. The method I above has been implement by some one on the GF forum, but I have not had any luck in getting the code to function. I suspect there is something missing in the add_filter or function. 

The link to the GF post is http://www.gravityhelp.com/forums/topic/replace-submit-button?replies=7#post-250161

 

The site that this is functioning on is http://hookahi.com (the contact button in the footer)

 

It would be great to figure this one, so maybe we'll leave the thread open for a while and see if anyone else has some suggestions. 

 

Keith

Share this post


Link to post
Share on other sites

Posted · Report post

Okay, that CSS solution could be a temporary workaround then.

 

I'll leave this thread open for suggestions.

Share this post


Link to post
Share on other sites

Posted · Report post

I've got this progressing a little further, not to where I need it yet. Here's what I have to date. 

 

in the Widget I have added this code:

<a href="#myModal2" role="button" class="btn" data-toggle="modal">e-mail</a>
<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: right;">Contact Us</h3></div>

<div class="modal-body">
<?php echo do_shortcode('[gravityform id="1" name="Contact Support" title="false" description="false"]'); ?>
</div>

and in the functions.php file (I know I shouldn't but we can fix later) I have added

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

The result is that the GF submit button has moved into the footer beside the close button and is functioning as required. There is some formatting issues with modal window (CSS will sort them out) but my bigger problem is that the CAPTCHA is now missing (I think this arises from the Twitter bootstrap approach). 

 

Maybe there is enough for someone to figure out how to add the implement this within the inbuilt modal in pagelines. 

Share this post


Link to post
Share on other sites