Jump to content


Photo
- - - - -

Gravity forms submit button in modal footer


  • Please log in to reply
15 replies to this topic

#1 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 361 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 12 May 2013 - 06:42 PM

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.

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 12 May 2013 - 06:46 PM

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



#3 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 361 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 12 May 2013 - 06:58 PM

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.

#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 12 May 2013 - 07:02 PM

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.



#5 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 361 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 12 May 2013 - 07:06 PM

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

Please Login or Register to see this Hidden Content



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 12 May 2013 - 07:12 PM

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.



#7 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 361 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 12 May 2013 - 08:41 PM

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)

Please Login or Register to see this Hidden Content

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



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 15702 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 13 May 2013 - 06:57 AM

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.

 

Please Login or Register to see this Hidden Content



#9 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 361 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 13 May 2013 - 09:35 AM

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.

Please Login or Register to see this Hidden Content

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. 

Please Login or Register to see this Hidden Content

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. 



#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 15702 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 13 May 2013 - 11:00 AM

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?



#11 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 361 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 13 May 2013 - 01:13 PM

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.

#12 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 13 May 2013 - 02:09 PM

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

Please Login or Register to see this Hidden Content



#13 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 361 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 13 May 2013 - 02:17 PM

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

Please Login or Register to see this Hidden Content

 

The site that this is functioning on is

Please Login or Register to see this Hidden Content

(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



#14 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 13 May 2013 - 02:51 PM

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

 

I'll leave this thread open for suggestions.



#15 keithmagvacom

keithmagvacom

    Advocate

  • Members



  • 361 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 13 May 2013 - 03:05 PM

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:

Please Login or Register to see this Hidden Content

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

Please Login or Register to see this Hidden Content

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. 



#16 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 13 May 2013 - 03:11 PM

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.