nilanzva

Hi @dinnerattommys
I have checked the site URL and it’s fine in the mobile device. Please check the attached link. https://imgur.com/a/WrwcXcu

Hi @yunis777,

The proper way to build a form is by using a single column. If there is used multiple columns in the form, it’s better to fill the columns. Yes, you can manage the width of the form with custom CSS.

To make the submit button left-aligned with the form please add the following custom CSS to the additional CSS.

.ur-frontend-form .ur-button-container .ur-submit-button {
    margin-left: inherit;
}

Regards.

Hi @yunis777,

It seems that you are using a two-column layout for the form. But the fields are only on the left column. Please switch the layout to the single-column layout and the submit button will be aligned automatically.

Regards,

Hi @yunis777,

Can you provide us the site URL where the registration form have been used?

Regards.

Hi @iainkc,

You can fix the checkbox issue with the help of the following custom CSS code. Please add copy the code and paste it to the additional CSS box.

#top input[type=checkbox].input-text {
    appearance: checkbox;
    -webkit-appearance: checkbox; 
}

Regards.

Hi @pavefe,

Please add the following custom CSS code to the Additional CSS box to customize the design style for form wrapper and labels.

.ur-frontend-form {
    background: #f1f1f1 !important;
}

.ur-frontend-form .ur-form-row .ur-form-grid label {
    color: #42494e !important;
}

Regards.

Hi @hdemirocak,

First of all to make red required abbr invisible for privacy policy please add the following custom CSS code to the Additional CSS.

.ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item.field-privacy_policy .required {
    display: none;
}

To insert a link on a privacy policy checkbox, you will have to use the description of the field and some more custom CSS to maintain the design. Type the description and insert the anchor tag for the text where a link has to be inserted. To maintain the design on the form, please add the following custom CSS to the additional CSS box.

.ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item.field-privacy_policy .form-row {
    display: flex;
}

Hope this helps you out. If there is anything else do write to us.

Regards.

Hi @filanora,

Thank you for the awesome review. We really appreciate it.

Regards.

Hi @ponzo,

Thank you so much for shedding light on this topic. We are trying to make our plugin better day by day. We will surely be considering all of the points that you have mentioned. We will make sure to introduce these fixes in our upcoming update.

Your feedback motivates us to work harder and improve our plugin. We really appreciate it.

Thank you ??

Hi @yunis777,

It seems that you have tried some custom CSS by yourself. You have set the width: 300px for the button. Please remove that CSS code on the selector .ur-frontend-form form .ur-submit-button.

This should resolve the issue.

Regards.

Hi @alphagoldafrica,

The above CSS code was for the default layout option. It seems that you have selected the Rounded Edge template. To adjust the button style please copy the following CSS code and paste it to the Additional CSS box.

.ur-frontend-form.ur-frontend-form--rounded form button[type=submit], .ur-frontend-form.ur-frontend-form--rounded form input[type=submit] {
    background: #f00202;
    color: #fff;
}

.ur-frontend-form.ur-frontend-form--rounded form button[type=submit]:hover, .ur-frontend-form.ur-frontend-form--rounded form input[type=submit]:hover {
    background: #d60000;
    color: #fff;
}

Hope this helps.

Regards.

Hi @alphagoldafrica,

To change the button styles, please try the custom CSS below.

.ur-frontend-form button[type=submit], .ur-frontend-form input[type=submit] {
    background: #0070ff;
    color: #fff;
}

And for hover effect use the following custom CSS.

.ur-frontend-form button[type=submit]:hover, .ur-frontend-form input[type=submit]:hover {
    background: #004aa9;
    color: #fff;
}

You can change the color code as your preference.

Regards.

Hi @ahefter,

Glad to know that it helped. I hope you are having a great time with our plugin. If you have a moment to spare then we would really appreciate your review for our plugin. Your feedback and suggestions really mean a lot and motivate us.

Kind Regards ??

Hi,

There is no issue in Chrome. I just checked the issue in Safari and iPhone and found it but after I added the above CSS, it fixed in both the platforms. Also, I checked your site for the CSS code and I didn’t find the CSS code that I provided to you. If you could please add the above CSS to the Additional CSS box, then it will fix the issue.

Let me know if the issue still exists. I will be glad to follow up with you.

Kind Regards.

Hi @ahefter,

You can fix this issue with the help of the following custom CSS.

.ur-frontend-form .ur-form-row .ur-form-grid input[type=date], .ur-frontend-form .ur-form-row .ur-form-grid input[type=email], .ur-frontend-form .ur-form-row .ur-form-grid input[type=number], .ur-frontend-form .ur-form-row .ur-form-grid input[type=password], .ur-frontend-form .ur-form-row .ur-form-grid input[type=phone], .ur-frontend-form .ur-form-row .ur-form-grid input[type=text], .ur-frontend-form .ur-form-row .ur-form-grid input[type=timepicker], .ur-frontend-form .ur-form-row .ur-form-grid input[type=url], .ur-frontend-form .ur-form-row .ur-form-grid select, .ur-frontend-form .ur-form-row .ur-form-grid textarea {
    line-height: 1.5;
}

Thank you.