Position submit button in-line with responsive theme

Gravity Support Forums » Plugin Support » Gravity Forms

dustin
Member

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 11 years ago on Thursday July 4, 2013 | Permalink
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 11 years ago on Thursday July 4, 2013 | Permalink
dustin
Member

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 11 years ago on Thursday July 4, 2013 | Permalink
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 11 years ago on Thursday July 4, 2013 | Permalink
dustin
Member

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 11 years ago on Tuesday July 9, 2013 | Permalink
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 11 years ago on Tuesday July 9, 2013 | Permalink
dustin
Member

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 11 years ago on Tuesday July 9, 2013 | Permalink
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 11 years ago on Tuesday July 9, 2013 | Permalink
dustin
Member

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 11 years ago on Tuesday July 9, 2013 | Permalink
Richard Vav
Administrator

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

Posted 11 years ago on Tuesday July 9, 2013 | Permalink
dustin
Member

There I've put it back again...

Posted 11 years ago on Tuesday July 9, 2013 | Permalink
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 11 years ago on Tuesday July 9, 2013 | Permalink
dustin
Member

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 11 years ago on Tuesday July 9, 2013 | Permalink
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 11 years ago on Tuesday July 9, 2013 | Permalink
dustin
Member

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 11 years ago on Tuesday July 9, 2013 | Permalink
dustin
Member

Would it help if I gave you access to the site?

Posted 11 years ago on Tuesday July 9, 2013 | Permalink

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 11 years ago on Tuesday July 9, 2013 | Permalink

dustin
Member

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 11 years ago on Tuesday July 9, 2013 | Permalink
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 11 years ago on Tuesday July 9, 2013 | Permalink
dustin
Member

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 11 years ago on Tuesday July 9, 2013 | Permalink
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 11 years ago on Tuesday July 9, 2013 | Permalink
Richard Vav
Administrator

Resolved via email.

Posted 11 years ago on Wednesday July 10, 2013 | Permalink

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