Form Design

Hello @klingbeil

Your question depends on other styles on your website.

An possible alternative would be to enter the style definition below through the “Appearance > Customize > Additional CSS” menu option:

@media screen and (min-width:1200px){
.cp_cff_custom{max-width:60% !important;}
.cp_cff_custom-card{max-width:40% !important; float:right !important;}
}

Best regards.

Since the code you gave was not in my stil.css file, I added it to the section in my form settings.
The image below was obtained. It does not move to the right edge.
Thanks.

Hello @klingbeil

Please provide the link to the page you are editing. There are other CSS rules that participate in the process like “display” and “clear”, and I cannot be sure what of them are affecting your design.

@media screen and (min-width:1200px){
.cp_cff_custom{max-width:60% !important; display: inline-block !important; clear: none !important;}
.cp_cff_custom-card{max-width:40% !important; float: right !important; display: inline-block !important; clear: none !important; }
}

Best regards.

Information is at the bottom.

• This reply was modified 7 months ago by klingbeil.

Hello @klingbeil

The issue is not caused by the styles but by the form structure. The element with the cp_cff_custom-card class name is part of the form. Please, follow the steps below:

1. Insert a DIV field as the first field in the form, and move inside it every field except fieldname7.
2. Assign a custom class name to the DIV field. The class names are assigned to the fields through their “Add CSS Layout Keywords” attributes. Ex. cff-left-column
3. Assign a custom class name to the fieldname7. Ex cff-right-column
4. Finally, enter the class name definitions through the “Customize Form Design” attribute in the “Form Settings” tab:

@media screen and (min-width:1200px){
.cff-left-column{max-width:60% !important; display: inline-block !important; clear: none !important;}
.cff-right-column{max-width:40% !important; float: right !important; display: inline-block !important; clear: none !important; }
}

Best regards.

With your permission, I would like to ask one last question. Now, when the user enters from mobile and clicks on the input field, the form grows and slides left and right. How can we prevent this situation?
Thanks.

• This reply was modified 7 months ago by klingbeil.

Hello @klingbeil

I tested your website and the issue described is not happening on my side. Please watch the video by visiting the following link:

https://resources.developers4web.com/cff/tmp/2024/25/video_o.mp4

Best regards.

CTRL +F5 PLeASE

Hello @klingbeil

I tried again and even opened the page with the browser in incognito mode, and there was no issue.

Best regards.

It can’t be possible. I check it from 5 different places, and the form I designed appears. strange.. I think the problem is related to select focus, how do you think we can solve it?

Hello @klingbeil

What devices are you using for testing? I need to replicate the issue to know what is happening exactly. Our plugin does not modify the fields’ sizes on focus, so, it should be inherited from the theme active on your website.

You can try to pass the iframe attribute to the form shortcode as follows:

[CP_CALCULATED_FIELDS id="1" iframe="1"]

Best regards.