side by side button

Hello @stephenboluwatife1

To display fields side by side, you have some alternatives. The easiest would be to insert them into a DIV field and select the two-columns option through its settings. Please, watch the video tutorial by visiting the following link:

https://youtu.be/5wguFUR4pD8

Best regards.

it the button not the field check the image i sent to u

Hello @stephenboluwatife1

The modifications depend on your form structure and page styles. You can try inserting the following style definition through the “Customize Form Design” attribute in the “Form Settings” tab (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png):

#fbuilder{position:relative;}
#fbuilder .pbPrevious{
	position:absolute;
	left:200px;
	bottom:15px
}

Best regards.

okay thanks it work but how can i increse the size of the button

Hello @stephenboluwatife1

I’m sorry, I cannot recommend visual modifications without checking the styles applied to the form. Note that in a website, the CSS styles defined in the active theme affect every tag on the page.

Best regards.

but when i add the templete 2 which is the one i like but the button become smaller how can i incese it to be big pls

• This reply was modified 2 years, 5 months ago by stephenboluwatife1.

Hello @stephenboluwatife1

If you are referring to the buttons fields and previous page and next page buttons, you can enter the style definition below through the “Customize Form Design” attribute in the “Form Settings” tab:

#fbuilder input[type="button"],
#fbuilder input[type="reset"],
#fbuilder .pbPrevious,
#fbuilder .pbNext{width:150px;text-align:center;}

Best regards.

it work but too long what of the hight (width 50% Highth 50%) all to be equal

Hello @stephenboluwatife1

You only should modify the values of width and height CSS rules in the CSS block I sent you in the previous entry.

Best regards.

But it width that us showing it long but I want the height be the also big

#fbuilder input[type=”button”],
#fbuilder input[type=”reset”],
#fbuilder .pbPrevious,
#fbuilder .pbNext{width:150px;text-align:center

Thus is what you sent to me but no height there

Hello @stephenboluwatife1

Please, includes a height rules with the height you prefer.

Best regards.

#fbuilder input[type=”button”],
#fbuilder input[type=”reset”],
#fbuilder .pbPrevious,
#fbuilder .pbNext{width:150px; height:150px ;text-align:center

Please check if it correct if no please do it and resend it to me

• This reply was modified 2 years, 5 months ago by stephenboluwatife1.

Hello @stephenboluwatife1

Please remember to include the } symbol at the end of the CSS block. Please, check the entry where I send you the CSS code.

If you want to assign 150px to the button, yes, it is correct.

Best regards.

#fbuilder input[type=”button”],
#fbuilder input[type=”reset”],
#fbuilder .pbPrevious,
#fbuilder .pbNext{width:150px; height:150px ;text-align:center}

Hello @stephenboluwatife1

Excellent !!!

I recommend including an additional CSS rule, the line-height, to ensure the texts are aligned vertically in the Previous Page and Next Page buttons:

#fbuilder input[type="button"],
#fbuilder input[type="reset"],
#fbuilder .pbPrevious,
#fbuilder .pbNext{width:150px; height:150px; text-align:center; line-height:150px;}

Best regards.