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.

Please help! What is wrong with this plugin?

  1. firstbasedesign
    Member

    I purchased a plugin that is now driving me insane!!

    http://poie.thinkbigcreative.co.uk/

    Why when you submit the form is there such a massive page jump? I cannot figure this quirk out.

    Most plugins I can find my around, why am I having such problems with this??

    thanks

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  2. This isn't a plugin issue by any means, but a theme styling issue. The absolute positioning on the form container is most likely the cause. If you look at the form, it's not even displaying properly in the theme before it's submitted - the content is below the form and the form is spilling out of the containing div boundaries... again because of the absolute positioning.

    screenshot: http://grab.by/8Qve

    Try floating the form to the right and clearing the float on the containing div.

    http://www.quirksmode.org/css/clearing.html

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  3. firstbasedesign
    Member

    Thanks Kevin, I will try this, but this has been happening on (test) forms on other parts of the site with the same issues?!

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  4. It's because of how you are implementing the forms, it's your theme code/layout that is causing the issues.

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  5. firstbasedesign
    Member

    This is the code I have know..

    [css]
    #bookingForm {
    	clear: both;
    	width: 566px;
    	background: #f7f7f7;
    	border: 1px solid #e3e3e3;
    	height: 280px;
    	margin: 20px 0;
    }
    
    	.formContainer {
    		float: right;
    		width: 300px;
    	}

    if you take a peek at the page again, you can still see the problem?? Not sure then how this is a styling issue?

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  6. firstbasedesign
    Member

    Is there anything you guys could suggest?

    I'm not coming on here for a quick handout, but I have been trying to figure out this quirk for hours, and this site needs to go live in a few hours!! :(

    Your assistance would be massively appreciated.

    thanks

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  7. Do this to start.. in the actual HTML, move the form container div BEFORE the left content. That way the floated form will align properly with the left content.. like this..

    <section id="bookingForm">
    <header>
    <h1>Book your free, no obligation<br><span>15 minute mortgage consultation</span> with Rachel today ...</h1>
    </header>
    <div class="formContainer">{FORM HERE}</div>
    <p>We'll show you exactly how much you can borrow and what your repayments will be.</p>
    <p>We'll search over 1500 lenders to find you the best mortgage rates and cheapest deals available.</p>
    </section>

    See how that works, then we'll take a look from there

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  8. firstbasedesign
    Member

    Hi Kevin,

    Ok have adjusted the HTML. The form is now sat further inside the <section>.

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  9. Okay, so the formatting looks better to start.. and it should work better with the validation errors as well.

    EDIT: Looking again, I see the validation errors still break out of the form container. You can solve that by changing the height to min-height and adding an overflow property.

    #bookingForm {
        background: none repeat scroll 0 0 #F7F7F7;
        border: 1px solid #E3E3E3;
        clear: both;
        margin: 20px 0;
        min-height: 280px;
        overflow: hidden;
        width: 566px;
    }

    So, this is the deal with the form. When using the Ajax submission method, the form automatically adds an anchor so when it's submitted, it returns the viewport to the top of the form. This was added for long forms where you need to return to the top of the form for validation notices, confirmation text, etc.

    Right now, there's no way to turn this OFF other than switching back to the normal post method. You could also try using a redirect/confirmation page rather than the inline confirmation message so you wouldn't have that effect.

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  10. firstbasedesign
    Member

    How does the normal post method work? I really still need to show users that either a; there form has been submitted or b; there are errors. Is this possible without Ajax?

    Is there anyway of removing the anchor code?
    I could do this and then make a backup before I make future updates.

    thanks again

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  11. You can't remove the anchor code from the Ajax submission method. In the normal submission method, you would need to enable the anchor to move the viewport so you can see the confirmation message or errors - and then you're back to square one.

    You can always try using some JQuery/CSS customizations to create pop-up style alerts.

    http://forum.gravityhelp.com/topic/confirmation-via-pop-up-box#post-1887

    http://screenr.com/n32

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  12. firstbasedesign
    Member

    Thanks Kevin, I will try what you've mentioned. Are these popups able to show both types of messages? ie; 'errors have been highlighted' and also 'thanks for your submission' ?

    One quick question also, how, where would I edit the CSS for the messages at present?

    As it is the message 'There was a problem with your submission. Errors have been highlighted below'
    pushes the form down a considerable distance.

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  13. You would have to look at the sample and customize it for both confirmation and error messages.

    You can find info on targeting/changing the validation error styles here.

    http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/#validation

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  14. firstbasedesign
    Member

    Gave that code a whirl, but im getting no popup??

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  15. I tested and see the confirmation popup in the top left corner of the page. You will need to adjust the positioning so it's relative to the form itself.

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  16. firstbasedesign
    Member

    ?? Sorry for being dumb. Would that be a position relative on #gforms_confirmation_message ?

    I also notice that my form fields disappear after submitting??

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  17. firstbasedesign
    Member

    One other thing I've noticed Kevin, is that if you submit the form the flick to another page, if you click to go back to the original form page, you get the popup again?? And it goes through the process of submitting the form once more?

    This is crazy :(

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  18. yeah, the popup script was more for inspiration and wasn't really refined. You may have to polish it some depending on your needs.

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  19. In a multi-page form when you click "Next" or "Previous" the form is submitted again so that validation occurs at each step.

    If validation did not happen after each step, it would mean it would only happen on the final submit action which would be highly annoying if a user made a mistake on the first page. Validation happens at each step of the process so the form can be submitted without complication on the final page.

    You are running into issues because of your implementation. It's not how most people implement the form, it's very much a custom implementation. Most people simply use the shortcode in a post or page. The forms work as intended out of the box and with most themes. However we can't control your theme code and how you implement the function call itself within your theme because the code outside of Gravity Forms itself is completely outside our control.

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  20. firstbasedesign
    Member

    oh!

    So what were my options again?

    And there is no way 100% that you can remove the Ajax anchor?

    Posted 11 years ago on Tuesday February 8, 2011 | Permalink
  21. firstbasedesign
    Member

    Well thanks for all your help still guys, especially Kevin for taking time to try to guide me in the right direction.

    thanks

    Posted 11 years ago on Wednesday February 9, 2011 | Permalink

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