Switching "Previous" and "Submit" button placements [RESOLVED]

I created my first form, but want to switch the Previous and Submit buttons because their placement feels backward. Can anyone help me with CSS for this? I’m not sure where to start.

Can you share a link to the page on your site where we can see the form? The Previous button should be on the left, and the Next should be on the right. If that is not happening, it’s normally some theme CSS that is affecting it.

If it is already like that, please share the link so we can take a look at the form.

Erm, don’t think you can do that with CSS. I think you would have to add a template file to replace the default plugin setting, but I’m not sure which one.

Otherwise, you could cheat by doing a jQuery replace. I was actually kinda curious and slapped this together. It might take some adjusting.

$( window ).scroll(function(){

	var form_id = 35;
	var page = '4';
	var page_check = $('input#gform_source_page_number_35').attr('value');
	
		if( page == page_check ){
			if ( !$( 'input#gform_submit_button_' + form_id + '' ).hasClass("new-button") ) {
				$( 'input#gform_submit_button_' + form_id + '' ).replaceWith( '<input type="button" id="gform_previous_button_' + form_id + '" class="gform_previous_button button new-button" value="Previous" tabindex="92" onclick="jQuery(&quot;#gform_target_page_number_' + form_id + '&quot;).val(&quot;3&quot;);  jQuery(&quot;#gform_' + form_id + '&quot;).trigger(&quot;submit&quot;,[true]); " onkeypress="if( event.keyCode == 13 ){ jQuery(&quot;#gform_target_page_number_' + form_id + '&quot;).val(&quot;3&quot;);  jQuery(&quot;#gform_' + form_id + '&quot;).trigger(&quot;submit&quot;,[true]); } ">' );
	alert("boom");
			}
		}
	
		if( page == page_check ){
		
			if ( !$( 'input#gform_previous_button_' + form_id + '' ).hasClass("new-button") ) {
				$( 'input#gform_previous_button_' + form_id + '' ).replaceWith( '<input type="submit" id="gform_submit_button_' + form_id + '" class="gform_button button new-button" value="Submit" onclick="if(window[&quot;gf_submitting_' + form_id + '&quot;]){return false;}  if( !jQuery(&quot;#gform_' + form_id + '&quot;)[0].checkValidity || jQuery(&quot;#gform_' + form_id + '&quot;)[0].checkValidity()){window[&quot;gf_submitting_' + form_id + '&quot;]=true;}  " onkeypress="if( event.keyCode == 13 ){ if(window[&quot;gf_submitting_' + form_id + '&quot;]){return false;} if( !jQuery(&quot;#gform_' + form_id + '&quot;)[0].checkValidity || jQuery(&quot;#gform_' + form_id + '&quot;)[0].checkValidity()){window[&quot;gf_submitting_' + form_id + '&quot;]=true;}  jQuery(&quot;#gform_' + form_id + '&quot;).trigger(&quot;submit&quot;,[true]); }">' );

			}
		}
	
	});

While I wouldn’t recommend it (not without changing the ‘previous’ visually because otherwise it could easily be confused with the submit-button), you could change the order by making the footer use CSS grids.

.gform_wrapper .gform_page_footer {
    display: inline-grid;
    grid-template-columns: 200px 120px auto; /* values to play with */
}

.gform_wrapper .gform_page_footer .button.gform_previous_button {
    order: 2;
}

2 Likes

Thank you everyone. I think I will skip this for now, because you may be right that it will be confusing if they are switched.

2 Likes