Jump to content
Sign in to follow this  
Keith Vaugh

Gravity forms submit button in modal footer

Recommended Posts

Keith Vaugh+    14
Keith Vaugh

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
Rob    547
Rob

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"?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Keith Vaugh+    14
Keith Vaugh

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Keith Vaugh+    14
Keith Vaugh

The best solution would be a button that does both. I think the simplest solution might be to move the GF submit button into the modal footer, and change the close button to discard. Thing about trying to adapt this

http://twitter.github.io/bootstrap/javascript.html#modals

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Keith Vaugh+    14
Keith Vaugh

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
Danny    1,327
Danny

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/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Keith Vaugh+    14
Keith Vaugh

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
Danny    1,327
Danny

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?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Keith Vaugh+    14
Keith Vaugh

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
catrina    103
catrina

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;}

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Keith Vaugh+    14
Keith Vaugh

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
catrina    103
catrina

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

 

I'll leave this thread open for suggestions.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Keith Vaugh+    14
Keith Vaugh

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
catrina    103
catrina

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.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×