Input Field Focus and Pagination Style

Hi @thankssforhelp

I hope you’re well today!

1. The “double” border

You’d need to set a “box shadow” rather than trying to change border. This should work

.forminator-is_active .forminator-input {
-webkit-box-shadow: 0px 0px 4px 6px rgba(145, 181, 254, 1)!important;
-moz-box-shadow: 0px 0px 4px 6px rgba(145, 181, 254, 1)!important;
box-shadow: 0px 0px 4px 6px rgba(145, 181, 254, 1)!important;
}

You will want to adjust the values a bit most likely so

– 4px – that’s the “blur” value – the bigger the value, the more “soft” that shadow is
– 6px – that’s the “spread” value – the bigger the value, the “thicker” the shadow

– then the color – the first three values inside “rgba’ part are – accordingly – read, green and blue values (so it’s basically a color in RGB format)

Note: if this code doesn’t work when added to form’s custom css, try adding it instead to site’s CSS (e.g. via your theme’s custom CSS option; at the very end of existing code if there is any already); make sure to clear all cache on site as well.

2. The “placeholder”

I’m not sure if we can move an actual placeholder like this, without significantly changing forms HTML markup but on screenshot it actually looks like a behavior that’s already built-in into Forminator. If you switch “Design Style” in “Appearance” settings to “Material” this will be the exact way the field labels behave – they’d be showing up “inside” the field and move up and get smaller when field gets focus.

3. Pagination

If you switch form to “material” design style (as mentioned in point 2 above) then you could just remove the page labels entirely and it will make it only use number inside the dots:

– on form edit the “Pagination” field at the top
– in its “labels” setting section you’ll see labels like Page 1, Page 2 and so on – just remove all the lables’ values (so labels fields would be empty)
– update the form.

Best regards,
Adam

Hi Adam @wpmudev-support8,

thank you very much for the quick reply – great work as always!

Re 1 (“double” border): works great, thank you! One more question: because I had to adjust the margins because of the “box shadow”, an input field now sticks out too far to the right. I couldn’t fix this with margin-right: 15px !important; – am I doing something wrong here? (same with button next)

See here: https://drive.google.com/file/d/1Tl7JV2OWEOl_jW5eZO44dVYHFZqx2Mpo/view?usp=sharing

Re 2 (“placeholder”): this unfortunately did not work for me, I assume because I use a border for the input field via custom css? As soon as I take away the border, it works. Would there still be a possibility here? If yes, that would be excellent, if not also no drama (:

Re 3 (pagination): Thank you, that works great! Is there a possibility to enlarge the dots and to reduce the distance between the single dots as well as to increase the distance downwards?

Kind regards

• This reply was modified 2 years, 2 months ago by thankssforhelp.
• This reply was modified 2 years, 2 months ago by thankssforhelp.
• This reply was modified 2 years, 2 months ago by thankssforhelp.

Hi @thankssforhelp

As for 1 & 2, at this point I cannot help much based only on screenshot, without checking/testing it “live”.

Would you mind sharing a link to the page of your site with form in question (not back-end, just a page on front-end, publicly accessible)?

We could then take a look and, I believe, suggest solution.

As for 3 (pagination):

/* distance below pagination */
.forminator-pagination-steps {
	margin-bottom:60px!important;
}

/* pagination "dots" */
.forminator-step-dot {
	width:35px!important;
	height:35px!important;
	padding-top:7px;
}

I used “expample” values but note that for pagination dot you would want to make sure that set width equals set height so they’d be circles and also depending on the height you will need to adjust padding value.

But I’m not quite sure what do you mean by distance “between” them – by default they’d be “spread evenly” across all form width so I suppose that’s what you want to change but in what way exactly?

Best regards,
Adam

Hi Adam @wpmudev-support8,

thank you very much for your support – pagination works great now, just as I wanted.

As for 1 & 2, at this point I cannot help much based only on screenshot, without checking/testing it “live”.

Would you mind sharing a link to the page of your site with form in question (not back-end, just a page on front-end, publicly accessible)?

We could then take a look and, I believe, suggest solution.

Yes, of course: https://jurahelden.com/bewerbungscheck-buchung/

I have now set the settings to “material”. Somehow I have now managed that the two adjacent input fields on step 2 of my form no longer protrude to the right. However, I have the feeling that something is wrong with the margin, because exactly with these two fields the shadow box is cut off at the edges. Also, the pagination dots all move very close to each other when I press the next button.

I might be able to fix these points with a little trial and error.

My main goal at the moment is to get the placeholders to work as described and to hide the black focus border and red error border without affecting functionality.

On the form you will also see that the placeholders are way too close to the left border. Is it possible to set a margin here via CSS? Unfortunately I haven’t found the right selector for this.

If you have a solution for these points, I am very grateful. Thanks to you I am already very far with my form and very satisfied.

Many thanks and kind regards

• This reply was modified 2 years, 2 months ago by thankssforhelp.
• This reply was modified 2 years, 2 months ago by thankssforhelp.
• This reply was modified 2 years, 2 months ago by thankssforhelp.

Hi @thankssforhelp

Thanks for response and link to the form.

I checked the form and it seems fields (at least at step 2) are currently nicely aligned. The placeholders don’t look moved to the left too far to me either.

But I’m actually not sure if I’m seeing the correct form now or if you have made some additional changes – I don’t see box-shadow (that thick border) added to the focused input currently and pagination dots are not “moving” for me when I’m switching between form pages.

Or maybe I should check using some specific browser (if yes – which one, including version and on what type of device?)? I’m asking because sometimes issues like this are “browser specific” and just require some additional tweaks.

As for the placeholders. Please note that, as I mentioned earlier, the material design style will give you the effect close to what you wanted but not exactly the same. It moves/scales labels of fields rather than placeholders so field must have labels set. If labels are empty and not displayed, that effect won’t be there. On the form that you shared it looks like labels are either hidden or removed currently.

Best regards,
Adam

Hi Adam @wpmudev-support8,

thank you very much for taking the time to look at my form.

I checked the form and it seems fields (at least at step 2) are currently nicely aligned.

Here I was able to make some adjustments via Elementor to the width of the form, so it looks a little better now. In Step 2, you can still see that the two adjacent fields protrude slightly outwards at the sides. Here I somehow didn’t manage to reduce the distance to the sides.

The placeholders don’t look moved to the left too far to me either.

Fortunately I could solve this via padding.

…and pagination dots are not “moving” for me when I’m switching between form pages.

I could solve this as well via Elementor side.

I don’t see box-shadow (that thick border) added to the focused input currently

Here lies one of my problems. The css code for this fits wonderfully – very big thanks again.
But: As soon as I insert a new css for radio under the css for the “thick border”, the “thick border” suddenly doesn’t work anymore.

This is what my relevant css below “thick border” looks like:

.forminator-input:focus {
    border-color: #2167FF !important;
    outline-color: #00c9ed !important;
    outline-border: 2px solid #00c9ed !important;
    -webkit-box-shadow: 0px 0px 0px 4px rgba(99, 184, 255, 1)!important;
    -moz-box-shadow: 0px 0px 0px 4px rgba(99, 184, 255, 1)!important;
    box-shadow: 0px 0px 0px 4px rgba(99, 184, 255, 1)!important;}
}

.forminator-radio-label {
    color: #2167FF !important;
    border: 2px solid #2167FF !important;
    border-radius: 12px !important;
    height: 80px !important;
    width: 98% !important;
    font-size: 15px !important;
    font-family: Montserrat;
    font-weight: 500 !important;
    padding-left: 10px !important;
    padding-top: 20px !important;
}  
.forminator-radio-bullet{
    display: none !important;
}

As for the placeholders. Please note that, as I mentioned earlier, the material design style will give you the effect close to what you wanted but not exactly the same. It moves/scales labels of fields rather than placeholders so field must have labels set. If labels are empty and not displayed, that effect won’t be there. On the form that you shared it looks like labels are either hidden or removed currently.

Thanks for the information, I mistakenly used placeholder instead of labels. Now it works. However, with padding and margin I unfortunately did not manage to position the label correctly inside the input field. Unfortunately I could not position the scaled down font inside the input field either, it always ends up above the field.

Here you can see this at step 2 – 1st field: https://jurahelden.com/bewerbungscheck-buchung/

I use the following css code:

.forminator-label {
    padding-left: 10px !important;
    -webkit-transition: 10;
    transition: 10;
}

}

.forminator-field.forminator-is_active .forminator-label {
    opacity: 10;
    -webkit-transition: 10px;
    transition: 10px;
    padding-left: 50px;
    padding-bottom: -60px;

}

Thanks again for the great efforts!

Best regards

Hi @thankssforhelp,

In Step 2, you can still see that the two adjacent fields protrude slightly outwards at the sides. Here I somehow didn’t manage to reduce the distance to the sides.

Will there be any change in fields added? If not, you could try the following CSS and see whether that helps:

#forminator-custom-form-8662--page-1 > div > div:nth-child(7) {
	margin-left: 0 !important;
	width: 100%;
}

The above CSS targets the whole field, unfortunately, the file doesn’t have a unique class on which we could target the CSS. So if the field is re-ordered later, the CSS might not work in this instance.

But: As soon as I insert a new css for radio under the css for the “thick border”, the “thick border” suddenly doesn’t work anymore.

I’m afraid I’m not sure whether I fully understand the issue here. I just tried to apply your CSS via the browser console and could notice it’s working.

However, there is a border at the bottom of the fields when I focus, is that what you meant? or is it some other case? Or have you already applied the CSS, and it doesn’t work?

However, with padding and margin I unfortunately did not manage to position the label correctly inside the input field. Unfortunately I could not position the scaled down font inside the input field either, it always ends up above the field.

We would like to check the existing form setting to suggest this better. Possible to share the form export so that we can give it a closer look?

Please check the following doc on how to export a form:
https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#import-export

You can share the export file via Google Drive, Dropbox or any cloud services in the next reply.

Looking forward to your response.

Kind Regards,
Nithin

Hi Nithin @wpmudevsupport11,

first of all thank you very much for your support.

Will there be any change in fields added? If not, you could try the following CSS and see whether that helps:

#forminator-custom-form-8662--page-1 > div > div:nth-child(7) {
	margin-left: 0 !important;
	width: 100%;
}

This works perfect, thanks again!

I’m afraid I’m not sure whether I fully understand the issue here. I just tried to apply your CSS via the browser console and could notice it’s working.

I could solve this problem, the issue was occurring due to wrong order of several CSS, as I could figure out.

However, there is a border at the bottom of the fields when I focus, is that what you meant? or is it some other case?

Exactly, here is one of my problems. Although I was able to remove the border for focus. However, there is still a red border when the error message comes up. I would be grateful if you have a solution here.

We would like to check the existing form setting to suggest this better. Possible to share the form export so that we can give it a closer look?

Of course, you can find the form export here: https://drive.google.com/file/d/1eVphCjPD9vfopyFy4LGOH7_7YYPNESJe/view?usp=sharing

I have been able to make some adjustments so the input field label looks better for now and as expected scales down when I focus. However, at the same time the whole input field moves up, which is not wanted – I could not adjust this somehow.

In addition, the input label suddenly “moves” outside the input field as soon as I have entered something – I could not remove this yet. The label should always stay inside the input field.

On this screenshot you can see what I mean exactly:

https://drive.google.com/file/d/1tCaFeNuAcuBYIbD4vO6xd89Q2tyObOrV/view?usp=sharing

Is it also possible to change the autofill background?

Many many thanks for your fast and excellent support!

Kind regards

• This reply was modified 2 years, 2 months ago by thankssforhelp.
• This reply was modified 2 years, 2 months ago by thankssforhelp.

Hi @thankssforhelp

Thank you for the form,

You can use this CSS:

.forminator-is_filled label{
  transform: translate(30px, 10px) !important;
}

You may need to adjust the code for specific fields for example:

#address-2-zip .forminator-is_filled label{
  transform: translate(20px, 10px) !important;
}

Is it also possible to change the autofill background?

This can be done following this workaround: https://stackoverflow.com/a/14205976

Best Regards
Patrick Freitas

Hi Patrick @wpmudevsupport12,

thank you for the response.

Unfortunately both CSS didn’t work for me, the fields still move up as described in the screenshot.

This can be done following this workaround: https://stackoverflow.com/a/14205976

Perfect, thank you. I’ll try it out.

Kind regards

Hi Patrick @wpmudevsupport12,

I hope you are well.

I have to correct myself, this code works, thank you very much! Now the label doesn’t slip out of the field – but moves back to the right center down as soon as I make focus again after typing.
The fields also still move up and down on an input, can I fix this somehow?

I use the following CSS for the label:

.forminator-label {
    padding-left: 23px !important;
    margin-bottom: -10px !important;
    -webkit-transition: 1;
    transition: 1;
    color: #a5a5;
}

}

.forminator-field.forminator-is_active .forminator-label {
    color: #969696;
    opacity: 10;
    -webkit-transition: 1;
    transition: 1;
    padding-left: 22px;
    margin-bottom: -27px;
    font-weight: 400;

If I set both margin-bottom to the same value, the fields stop moving, but then the label ends up outside the field again.

I would be very grateful if you have anything helpful here.

Kind regards

Hi @thankssforhelp

Could you remove the margin bottom -27px and use:

.forminator-is_active label{
    transform: translate(10px, 15px ) !important;
}

.forminator-is_filled label{
    transform: translate(30px, 15px ) !important;
    font-weight: 400 !important;
}

The result can be found at:
https://monosnap.com/file/C39G8JUed6lMSoa7f1D8EvI8ixeTXp

You can play around with translate values to set as you wish.

Best Regards
Patrick Freitas

Hi Patrick @wpmudevsupport12,

this just works perfect, thank you very much! You guys are great ??

Kind regards