nilanzva

Hi @afolabi4u2,

You can try the following custom CSS to customize the button on the form.

.everest-forms .everest-forms-part-button, .everest-forms button, .everest-forms button[type=submit], .everest-forms input[type=submit] {
    background: #009688;
    border-color: #009688;
    color: #fff;
}

You can change the styles on the hover by using the following custom CSS.

.everest-forms .everest-forms-part-button:hover, .everest-forms button:hover, .everest-forms button[type=submit]:hover, .everest-forms input[type=submit]:hover {
    background: #006f65;
    border-color: #006f65;
    color: #fff;
}

You can change the color code as your preference.

Regards.

Hi @thomasvaterlaus,

Glad that it helped you out. It seems that you have set padding inside the <h3> tag and some non-breakable spaces inside the <span> tag before the title. If you remove both of them, the title will align with the form.

Kind Regards.

Hi @thomasvaterlaus,

You are facing this issue because Everest Forms is set in a <table> which has set inline CSS width: 0. Please remove Everest Forms out of the <table> tag and your issue will be fixed.

Regards.

Hi @lucradesignstudio,

We have got your email on our premium support ticket too. We went thoroughly through the issue and also checked your website for it. We are glad to inform you that we have fixed the issue on your website. Please have a look at it and let us know if you are still facing it.

Regards.

Hi,

I see there is some unknown HTML class present on your website. Have you used any js or plugin by the name of drop kick? It is disturbing the dropdown in the form.

Best Regards.

Hi,

Have you tried to customize the code on the plugin? If so, please revert back and check again and it should work fine.

Regards.

Hi @christineclem

Seems like you have placed the custom CSS on the Custom CSS class input which was for the custom class name not for the custom CSS. To add the additional CSS, please navigate to the Appearance > Customize > Additional CSS and use your custom CSS here. Also, your CSS selector seems to be slightly wrong here. Please use the following Custom CSS:

.ur-frontend-form.ur-frontend-form--rounded.ur-frontend-form--rounded-edge form button[type=submit], .ur-frontend-form.ur-frontend-form--rounded.ur-frontend-form--rounded-edge form input[type=submit] {
  border-radius: 10px;
  height: auto;
}

Hope this will be helpful to you. Do let us know if you have any further queries.

Best Regard.

Hi,

Please add the following custom CSS to fix the issue with the radio button fields.

.ur-frontend-form label.radio input {
    position: relative;
}

Regards.

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 years, 8 months ago by nilanzva.

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.

Hi,

Thanks for sharing this amazing review. We really appreciate it ??

Regards.

Hi,

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

Best Regards.

Hi,

Thanks for sharing this amazing review. We really appreciate it ??

Regards.

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 5 years, 8 months ago by nilanzva.
• This reply was modified 5 years, 8 months ago by nilanzva.

Hi @connorhsm ,

Thank you so much for taking the time to leave this excellent review. We really appreciate it ??

Thanks.