-
Posts
-
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,
Try following css code
#gform_wrapper_1 .gform_body .gform_fields .gfield input#input_1_2 {
margin: 0em 17px -1em -1em;
}you can change the distance between button & text input field by increasing/decreasing the second value (17px).
Hi,
I have setup the form to use an Enfold button instead of the Gravity Forms button & I’ve managed to align the button but I can’t get the button to pass a querie string to the next form.
The people at Gravity Forms have been very helpful and you can follow the instructions they provided me here
The code I’ve currently got to align the button is as follows
<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='198']</div><script>
jQuery(document).ready(function($) {
$(“#field_1_4 div”).click(function() {
$(“#gform_1”).trigger(“submit”,[true]);
});
});
</script>The problem is a strange one because sometime when you click the button it works and other times it just reloads the page.
Please could you help me with this I’m really struggling.
Thanks
I tested the button several times now and it worked for me all the time. However I noticed that it will reload the same page if you don’t enter a postcode value. The “This field is required.” message is partly hidden under the white input field and you might want to change its position. Btw – please add the javascript code to a js file (eg to http://my-boiler.info/wp-content/themes/enfold/js/avia.js ) and don’t add it directly into the html source code because the wpautop filter might mess up the javascript code.
- The topic ‘Position gravity forms submit button in-line – Responsive Enfold Theme’ is closed to new replies.