Support » Plugin: User Registration - Custom Registration Form, Login And User Profile For WordPress » Error message to the right of field and on same row

Viewing 8 replies - 1 through 8 (of 8 total)
  • nilanzva

    (@nilanzva)

    Hi @yunis777,

    Please try the Custom CSS to make the error message right to the registration field and maintain the spacing too.

    .ur-frontend-form .ur-form-row .ur-form-grid label.user-registration-error {
        display: flex;
        padding: 10px;
        line-height: 1.25 !important;
        margin-left: 0 !important;
    }

    Regards.

    • This reply was modified 6 months ago by nilanzva.
    • This reply was modified 6 months ago by nilanzva.

    Hi,

    After entering your Custom CSS code in the “Customising Additional CSS” section of the theme, the error messages still positioned under the fields. What is the working CSS code to put the ‘This field is required’ error messages appear to the LEFT of fields (on the same row)?

    I got this incorrect outcome after entering your latest CSS code,
    https://i.postimg.cc/sX0xB0GR/no-imrovement.png
    The red arrow is pointing the position where I want the error message to be.

    Regards,

    Yunis

    • This reply was modified 5 months, 4 weeks ago by Yunis777.

    In the above post i mistakenly wrote “LEFT” but meant “RIGHT”.

    Hi,

    Can you please provide us the site URL so that we could provide you the proper solution regarding the issue?

    Best Regards.

    Hi,

    The site URL is https://druzal.com/new-registration-registration/.

    Regards,

    Yunis

    Hi there,

    HI there,

    Thank you for sharing the site URL. To achieve the design style for the validation error on the User Registration form, you will have to build the form in a single column first. Currently, you are using two columns on your form. After that, you will have to add the following custom CSS to Additional CSS.

    @media (min-width: 768px) {
      .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item, .ur-frontend-form .ur-form-row .ur-form-grid .form-row {
          position: relative;
      }
      
      .ur-frontend-form .ur-form-row .ur-form-grid label, .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item input {
          width: 48.5%;
      }
      
      .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item.field-checkbox .form-row {
          width: 50%;
      }
      
      .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item.field-checkbox .form-row input[type='checkbox'], .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item.field-radio .form-row input[type='radio'] {
          width: initial;
      }
      
      .ur-frontend-form .ur-form-row .ur-form-grid label.user-registration-error {
          position: absolute;
          right: 0;
          bottom: 0;
          margin-bottom: 0;
      }
    }

    You might bring down the validation message below the input fields on small devices, so I have set the minimum screen size to 768px. So that validation message will display right below the input fields on iPad and mobile devices. You can adjust it as your prefered screen size.

    I hope this will be helpful to you.

    Kind Regards.

    Thanks for the code. Why is so much of it required just to put the validation error messages to the right of the fields?

    Regards,

    Yunis

    Hi,

    The validation error message is designed for better user experience with a simple design style to fit in all available column styles on the User Registration form.

    You will have to overwrite the previous design style with the desired design style and then you should make sure that the design shouldn’t break on the responsive devices. That’s why you will have to add some extra custom CSS.

    Regards.

    • This reply was modified 5 months, 3 weeks ago by nilanzva.
Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.