Tidying up the alignment of a form and removing the previous button

Get Help
,
1

I am very new to site building, I’ve dabbled in adding some CSS successfully (Radio buttons) but I’m struggling to get the form to align and remove the previous button.

I’d like the text radio buttons and next button to centre align, and I’ve tried to use the code I found online to remove the previous but it just doesn’t seem to work no matter where I put it.

I’m using Elementor the site is https://equityreleaseadviser.co/
code 4237

2

Hi Alex,

To center your field label, input fields, and next button, as well as hide the previous button, please use the following CSS code in the child theme’s style.css file or in Appearance → Customize → Additional CSS.

#gform_1 .ginput_container_radio {
  text-align: center !important;
}

#gform_1 .gform_page_footer {
  justify-content: center !important;
}

#gform_1 .gform_previous_button {
  display: none !important;
}

#gform_1 fieldset.gfield {
  text-align: center !important;
}

Final output:

Center align
Center align1370×622 39.5 KB

Give it a shot, and let me know how it works!

3

Amazing thank you very much for this it worked perfectly!
Although it does not seem to have centred it for mobile on desktop.

The only thing that is left to centre now is the post code, mortgage value and property value bits.

Many thanks for the help

4

Hi Alex,

It was a bit tricky, but I finally figured it out. Please try the following CSS code alongside the existing one.

#gform_1 .gfield--type-number,
#gform_1 .gfield--type-address {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

#gform_1 .gfield--type-number .ginput_container_number,
#gform_1 .gfield--type-address .ginput_container_address {
  width: 100% !important;
  justify-content: center !important;
}

#gform_1 .gfield--type-number .ginput_container_number input,
#gform_1 .gfield--type-address .ginput_container_address input {
  margin: 0 auto !important;
}

Preview: :point_down:

Field alignment

Is there anything else I can help you? :smile:

5

Many thanks Faisal, great advice and great assistance.

6

Thanks you again, I don’t suppose you have any advice on how to make the form look better on mobile, it’s still not aligned correctly, it looks great on desktop though.

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.