[Forminator Pro] Form fields do not line up as in WYSIWYG edit mode

The form on the page doesn't line up the way it is shown in the WYSIWYG edit mode. Here is the form - http://billblalock.com/contact-us/
Several of the fields should be 2 to a row such as the Name & Company. As well as Email & Phone number. I was hoping the fields would naturally line up according to the display in the edit mode. Do I need to add custom CSS to get this to work the way I want?

  • Nahid

    Hey Tom !
    Hope you are having a great day!

    If the fields are laid out into two columns per row in the Form Builder, they should line up accordingly in the front-end as well. I took a look into your form and it is not the expected behavior.

    It seems like a CSS class selector "forminator-size--small" is being added to the "form" element for some reason which is not appropriate. It is applying a one-column design to the form not letting it to lay-out into two columns.

    Could you grant Support Access from the WPMU DEV Dashboard plugin so that we can take a closer look to determine why this is happening? This handy guide can help you grant Support Access.

    We'll be looking forward to hearing back from you. Thanks!

    Kind regards,
    Nahid

  • Nahid

    Hey Tom !
    Hope you are doing well today!

    Thank you for granting Support Access for us. I went in and took a look into the form settings but nothing seemed to be wrong. I created a test form with the default settings but it still added the CSS class selector "forminator-size--small" to the "form" element.

    I'm assuming it is a Javascript conflict within the site as the CSS class selector is meant to be added to the form under some certain conditions. In this scenario, I'd like to request you to initiate a plugin/theme conflict test in order to make sure it isn't a conflict between Forminator and another (or multiple) plugins or the theme. This handy flowchart can help you run a plugin/theme conflict test.

    Hope this helps. We'll be looking forward to hearing back from you. Thanks!

    Kind regards,
    Nahid

  • Nahid

    Hey Tom !
    Hope you are doing well today!

    I tried to replicate the issue with the Advanced Custom Fields plugin activated (with basic configuration) but Forminator Pro still kept it's two column layout consistent. I'd assume it might be related to a specific configuration in your site. But since this isn't helping much, I'd recommend you to enable debugging in the wp-config.php file so that we can try getting a general idea about the source of the issue.

    You can enable debugging by putting the following constants in the wp-config.php file:

    // Enable WP_DEBUG mode
    define( 'WP_DEBUG', true );
    // Enable Debug logging to the /wp-content/debug.log file
    define( 'WP_DEBUG_LOG', true );
    // Disable display of errors and warnings
    define( 'WP_DEBUG_DISPLAY', false );
    @ini_set( 'display_errors', 0 );

    These constants must be added before the line "/* That's all, stop editing! Happy blogging. */" for them to work. Please make sure identical constants are replaced if they were already there previously. Enabling debugging in WordPress will log any errors that the site encounters in a log file named "debug.log" located in the "wp-content" folder. Please upload the debug.log file in a cloud storage platform like Dropbox and attach the shared link in your next response so that we can take a look into it. You can know more about WordPress debugging in this handy article.

    We'll be looking forward to hearing back from you. Thanks!

    Kind regards,
    Nahid

    • Nahid

      Hey Curtis Cartier !
      Hope you are having a great day!

      It looks like the reporting member is encountering a conflict between Forminator Pro and Advanced Custom Fields plugins. As we are keen to keep each support ticket specific to the reported issue only, I'd request you to contact our Live Chat support or open your own ticket here with the details so that the support team can look into your specific scenario, try replicating the issue and escalate it to the developers if required. Thank you for your consideration.

      Kind regards,
      Nahid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.