Please Note: We are no longer using forums to facilitate standard support. 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.

Position submit button in-line with responsive theme

  1. Hi Guys,

    Need some help here please,

    Having trouble positioning the submit button in-line.

    There is a lot of info about this on your support forums which I've read, I've also tried my themes support forum among others.

    I'm very new to web development so forgive me if I've missed something.

    I would like to position the button inline & closer to the text input.

    The theme is responsive so the submit button needs to stay aligned at various page sizes.

    So far I have managed to re-position the submit button inline but can't align the button.

    Live Page: http://my-boiler.info/

    An image of what I'm trying to do - http://my-boiler.info/re-position-submit-button.png

    I've tried floating the footer to the right and using margin to target the button which works when viewing on a normal browser but not when resizing the page.

    The theme I'm using is Enfold responsive.

    The code I'm using -
    * FORM BODY contains the main form content*/
    body #gform_wrapper_1 .gform_body {

    }
    /*Postcode input*/
    #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text] {
    position:relative;
    width:140px;
    height:50px;
    font-size:25px;
    }

    body #gform_wrapper_1 .gform_footer {
    display: inline-block;
    }

    /*Submit button*/
    body #gform_wrapper_1 .gform_footer input[type=submit] {
    margin:0px 0px 0px 0px;
    }

    Some selectors are empty, I've just included above to give an idea of what I've tried.

    Thanks,

    Posted 1 year ago on Thursday July 4, 2013 | Permalink
  2. Richard Vav
    Administrator

    Hi Dustin,

    What you could do is add a new button up in the .gform_body area. Add an HTML field to your form after your postcode field, assign it the class 'gf_right_third', inside the HTML field you would add the following

    <button type="submit" class="button" >Check Me</button>

    then you could use CSS added to your theme stylesheet to hide the old button

    #gform_submit_button_1 {
    display: none;
    }

    or you can use the following to hide the entire form footer

    #gform_wrapper_1 .gform_footer.top_label {
    display: none;
    }

    You will still need to add some extra CSS to close up the spacing between the field and button but at least this will be more responsive than floating the button up out of the footer.

    Posted 1 year ago on Thursday July 4, 2013 | Permalink
  3. Hi Richard,

    Thank you for the swift reply, I have implemented your suggestions.

    Two questions -

    1. How do I target an HTML block with CSS?
    2. I am passing the user input via a query string to the next form, can I just append the link with my custom parameter like so - http://my-boiler.info/grant-wizard/?postcode={Post Code:1} ?

    Many thanks for your help.

    Dustin.

    Posted 1 year ago on Thursday July 4, 2013 | Permalink
  4. Richard Vav
    Administrator

    Hi Dustin,

    There are a couple of ways to target the HTML block with CSS, you can target it by id like so

    #field_1_4 {
    }

    you could add a custom CSS class name (my_custom_class) in the same way as you added the 'gf_right_half' class

    #gform_wrapper_1 .my_custom_class {
    }

    You can find examples of how to target various Gravity Forms elements in the documentation, http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

    Your custom parameter example is correct, you would set that up in the redirect url and redirect query string settings of the form confirmations page.

    Also as you have opted to use one of your theme buttons you may need to add a little jQuery to trigger the form submit, something like this should work.

    <script>
    jQuery(document).ready(function($) {
        $("#field_1_4 div").click(function() {
            $("#gform_1").trigger("submit",[true]);
        });
    });
    </script>

    Regards,
    Richard

    Posted 1 year ago on Thursday July 4, 2013 | Permalink
  5. Hi Richard,

    Thanks for the help, I've managed to reposition the button and it's responsive.

    Now I'm battling with the JQuery...

    I've added the script you provided using a plugin "CSS & Javascript Tool Box" http://css-javascript-toolbox.com/css-javascript-toolbox-free/

    The strangest thing is happening, when I input a string & click submit it works intermittently?

    So sometimes is passes the string to the next form and other times it just reloads the page.

    I've read a few articles but I'm just not at the level yet where I can make sense of the instructions in a reasonable amount of time.

    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    Can you advise me please, I realize this is not really a Gravity Forms problem but you guys are just so sharp & it would really help me out.

    Super thanks :)

    Posted 1 year ago on Tuesday July 9, 2013 | Permalink
  6. Richard Vav
    Administrator

    Dustin,

    I can't see that script on the page, you could even try adding the script directly into the HTML field after the code for the button.

    Posted 1 year ago on Tuesday July 9, 2013 | Permalink
  7. Hi Richard,

    I tried inserting the code directly into the HTML field directly after the button code but it was still doing the same, working sometimes but mostly not.

    Do I need to include any code with the actual button?

    Button code -
    <div id="pcbutton">[av_button label='Apply Here' color='theme-color' custom_bg='#444444' custom_font='#ffffff' size='large' position='center' icon_select='yes' icon='36']
    </div>

    I have now replaced the JQuery below the button.

    Many thanks,

    Posted 1 year ago on Tuesday July 9, 2013 | Permalink
  8. Richard Vav
    Administrator

    Can we test a different button to see if it is something to do with how your theme is creating that button, could you replace your button and script with the following

    <button type="button" class="test_button" >Check Me</button>
    <script>
    jQuery(document).ready(function($) {
        $(".test_button").click(function() {
            $("#gform_1").trigger("submit",[true]);
        });
    });
    </script>
    Posted 1 year ago on Tuesday July 9, 2013 | Permalink
  9. Yes I've done that and it works perfectly, but now I have another problem :)

    How do I get the button to look like my original one, or how do I go about editing the theme?

    Any suggestions would be very welcome...

    Posted 1 year ago on Tuesday July 9, 2013 | Permalink
  10. Richard Vav
    Administrator

    Can you add your other button back in above the button that works so I can compare the styles.

    Posted 1 year ago on Tuesday July 9, 2013 | Permalink
  11. There I've put it back again...

    Posted 1 year ago on Tuesday July 9, 2013 | Permalink
  12. Richard Vav
    Administrator

    Edit: Sorry about that

    OK Dustin, we're getting there now. Replace the entire contents (both buttons and script) of that HTML field with the following http://pastie.org/8124420
    You may need to adjust the the width of your #pcbutton style but other than that I think it should be OK. Because I have changed the buttons type attribute to submit you shouldn't require the jQuery script anymore.

    Posted 1 year ago on Tuesday July 9, 2013 | Permalink
  13. Yes that works perfectly except there's no icon or button text now. ha ha can you imagine if I attempted this alone.

    Thanks for the assistance you guys are the best!

    Posted 1 year ago on Tuesday July 9, 2013 | Permalink
  14. Richard Vav
    Administrator

    Sorry something went wrong with the post and half of it was missing can you try the pastie link in the edited post above.

    Posted 1 year ago on Tuesday July 9, 2013 | Permalink
  15. I tried pasting the code from the pastie link but it re-sets the form and wipes out all the fields...

    No idea why it does that but I've tried it a few times just to clarify I posted the following code -
    <button type="submit" id="pcbutton" class="avia-button avia-icon_select-yes avia-color-theme-color avia-size-large avia-position-center">
    <span class="avia_button_icon avia-font-entypo-fontello">

    Posted 1 year ago on Tuesday July 9, 2013 | Permalink
  16. Would it help if I gave you access to the site?

    Posted 1 year ago on Tuesday July 9, 2013 | Permalink
  17. Richard Vav
    Administrator

    Can you try it without the symbol like so

    <button type="submit" id="pcbutton" class="avia-button avia-icon_select-yes avia-color-theme-color avia-size-large avia-position-center">
    <span class="avia_button_icon avia-font-entypo-fontello"> </span>
    <span class="avia_iconbox_title">Apply Here</span>
    </button>
    Posted 1 year ago on Tuesday July 9, 2013 | Permalink
  18. It works but the button is stretched and button text is aligned to the bottom. I tried changing the size attribute from large to small but it doesn't have any effect.

    Posted 1 year ago on Tuesday July 9, 2013 | Permalink
  19. Richard Vav
    Administrator

    Something in your theme or another plugin is messing with the form code and adding in <br> tags which adds line breaks, to figure out what is messing with the code you would have to test for a plugin/theme conflict.

    Posted 1 year ago on Tuesday July 9, 2013 | Permalink
  20. One thing I've noticed, if I don't put an input into the box and click the button, the validation error appears and the button returns to the correct size.

    Could there be an error with display CSS?

    Posted 1 year ago on Tuesday July 9, 2013 | Permalink
  21. Richard Vav
    Administrator

    Dustin what would you like to do with the main validation error message, the background, border and padding around the field, and the smaller validation message below the field.

    It also looks like you have reverted back to your theme button.

    Posted 1 year ago on Tuesday July 9, 2013 | Permalink
  22. Richard Vav
    Administrator

    Resolved via email.

    Posted 1 year ago on Wednesday July 10, 2013 | Permalink

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

Support Tickets

Open A New Support Ticket
 Open A New Priority Support Ticket *

* Developer license holders only