Update Default Form Styling

[shervElmi]

This PR updates and redesigns the default form fields styling.

QA URLs:

Frontend URL: https://qa.formidableforms.com/sherv/wp-admin/admin-ajax.php?action=frm_forms_preview&form=new-style-fields

Admin URL: https://qa.formidableforms.com/sherv/wp-admin/admin.php?page=formidable&frm_action=edit&id=71

Pro Version PR:

https:/Strategy11/formidable-pro/pull/5012

Testing Instructions:

1. Go to WP Admin > Formidable > Forms.
2. Create a new Form and add fields in the Output sections mentioned below.
3. Verify that the updated design is applied correctly without any bugs.

Note: Make sure to tap the "Reset to Defaults" button to apply the new styles as shown below:

Output:

Input, Textarea Elements:

Select Element:

International Phone Element:

Checkbox Elements:

Radio Button Elements:

Button Elements:

File Upload Elements:

Calendar Element:

Slider (Range Input) Elements:

Stepper Elements:

Star Rating Element:

Section Elements:

Error State:

[coderabbitai]

Actionable comments posted: 0

Outside diff range, codebase verification and nitpick comments (1)

css/custom_theme.css.php (1)

317-323: Inconsistent application of the important flag for CSS variables.

Ensure that the important flag is applied consistently to all instances of var(--text-color) and var(--field-font-size) in css/custom_theme.css.php.

• Instances missing the important flag:
  • font-size: var(--field-font-size);
  • font-size: calc(0.85 * var(--field-font-size));
  • font-size: var(--field-font-size);

Analysis chain

Verify the usage of CSS variables for file input styles.

Ensure that the CSS variables are used correctly and the important flag is applied consistently.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the usage of CSS variables for file input styles.

# Test: Search for file input styles. Expect: Correct usage of CSS variables and important flag.
rg --type css 'var\(--text-color\)|var\(--field-font-size\)'

Length of output: 120

---

Script:

#!/bin/bash
# Description: Verify the usage of CSS variables for file input styles in css/custom_theme.css.php.

# Test: Search for file input styles in css/custom_theme.css.php. Expect: Correct usage of CSS variables and important flag.
rg 'var\(--text-color\)|var\(--field-font-size\)' css/custom_theme.css.php

Length of output: 818

[Crabcyborg]

I believe the Lite changes all look good.

I have a few concerns though about some pro features. I left comments in https:/Strategy11/formidable-pro/pull/5012.

I plan to merge this for next release. But I'm going to wait until the Pro PR is ready to merge as well, just in case the pro updates take longer than expected.

Thanks @shervElmi @garretlaxton and @tuguirazvan!

🚀