Do you sometimes find elementor form even with all those great features has limited designing options?
If yes, then in this video I’ll show you how to style a simple elementor form more like a material design form with just css.
In this tutorial, you will mainly learn how to style elementor form checkbox and radio buttons with css. You will also learn the basic styling of an input field.
Although I’m using a normal checkbox in this form you can use the Acceptance type checkbox it will work as a required field to acceptance consent from your users.
Here is the css
/* For Fields */
selector .elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper):focus, selector .elementor-field-group .elementor-select-wrapper select:focus {
box-shadow: none;
border-bottom-color: #4632da;
}
selector .elementor-field-textual {
padding-left: 0;
padding-right: 0;
}
/* Making checkbox and radio button invisible */
selector input[type="checkbox"], selector input[type="radio"] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/* For Radio button */
.elementor-field-group-mt_radio > div label:before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
margin-right: 0.5em;
border-radius: 100%;
vertical-align: -3px;
border: 2px solid rgba(0,0,0,0.25);
padding: 0.13em;
background-color: transparent;
background-clip: content-box;
transition: all 0.2s ease;
}
.elementor-field-group-mt_radio > div label {
margin-right: 1em;
}
.elementor-field-group-mt_radio > div input:hover + label:before {
border-color: #4632da;
}
.elementor-field-group-mt_radio > div input:checked + label:before {
background-color: #4632da;
border-color: #4632da;
}
/* For Checkbox */
.elementor-field-group-mt_checkbox > div label:before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
margin-right: 0.5em;
vertical-align: -3px;
border: 2px solid rgba(0,0,0,0.25);
padding: 0.12em;
background-color: transparent;
background-clip: content-box;
transition: all 0.2s ease;
}
.elementor-field-group-mt_checkbox > div label {
margin-right: 1em;
position: relative;
}
.elementor-field-group-mt_checkbox > div label:after {
border-right: 2px solid #fff;
border-top: 2px solid #fff;
content: "";
height: 11px;
left: 2px;
position: absolute;
top: 11px;
transform: scaleX(-1) rotate(135deg);
transform-origin: left top;
width: 6px;
display: none;
}
.elementor-field-group-mt_checkbox > div input:hover + label:before {
border-color: #4632da;
}
.elementor-field-group-mt_checkbox > div input:checked + label:before {
border-color: #4632da;
background: #4632da;
}
.elementor-field-group-mt_checkbox > div input:checked + label:after {
-moz-animation: check 0.8s ease 0s running;
-webkit-animation: check 0.8s ease 0s running;
animation: check 0.8s ease 0s running;
display: block;
width: 6px;
height: 11px;
border-color: #fff;
}
@keyframes check {
0% {
height: 0;
width: 0;
}
25% {
height: 0;
width: 6px;
}
50% {
height: 11px;
width: 6px;
}
}
Disclosure: Some of the links here are referral/affiliate links that means if you decide to buy through those links I’ll earn a commission at no extra cost to you. This is how I keep Designtheway.com up and running.
Plugins used:
Here are some of my favorite website building tools
Thank you for reading the article hope you have found this helpful. Here are some of my favorite tools that I always use and hope you will find them helpful too. Please note these are affiliate links, if you do purchase anything using my links I’ll earn a small commission at no extra cost to you. I recommend these tools to my clients and friends as well.
Web Hosting: For starting a new website, I like to use GreenGeeks. They are reliable and affordable for a beginner. They have a very simple setup process that anyone can use. I’m personally using their service for over a year now.
Page Builder: For building beautiful websites in a short period of time I like to use Elementor. It is one of the most powerful page builders in the market. You don’t need any technical knowledge to make websites.
Content Writing: When you make a website you have to add content to it. I use Grammarly to write better content. It improves the writing by checking spelling and grammar mistakes automatically. It has a premium version but for starters, the free version is a good starting point.
Advertising Network: When you have built the website and have traffic on it, ads are the easiest way to monetize the website. Adsense is the most popular choice but I recommend Ezoic which will give you a much higher earning than Adsense and the best part is it is free to use.
82 thoughts on “How to style elementor form with just css”
That’s a great article for me. Thanks, dude
Thanks, Muhammad!
dude how do we change the scrolldown on contact form
Karim can you please elaborate your question a bit more, it’s not clear to me.
How the heck do you change the placeholder font size! I cant get the css working, it changes the input font instead 🙁
Devon, I have done nothing specifically for the place holder, I have just set the input size to medium and the font size is set from there only. There is no setting for placeholder font size in the elementor. If you want to change the font size of the placeholder you have to change the input-text font size.
Hope this helps!
Great article, but what if I want every button to have its own styling. Do you have a solution for that?
Hi Tim which button are you referring to? We have only one submit button in the form.
Sorry, I mean the radio buttons. For example, if I want each of them to be in different colors.
In that case Tim you have to target individual id of the radio buttons and style them.
Hello Ananda, thank you very much for your post, it was exactly what I was looking for and it works fine. I would also like to put the radio buttons center and not left and also give them a bigger font size. Could you tell me where in the CSS I have to put in? Thx in advance.
Glad to know that it helped you Marcin, to make the radio buttons center-aligned and bigger font size you can add this following css
selector .elementor-field-type-radio{
justify-content: center;
font-size: 18px;
}
A side note if you make the fon-size too big you have to adjust the radio button position accordingly.
Hope this helps!
Thank you very much for your help Ananda! Works fine,
You are most welcome Marcin.
Hey Ananda, the same thing didn’t work for me. I’m trying to center in-line radio buttons, horizontally.
Hi Tom, the CSS in the previous comment should work just make sure there is no additional CSS overriding it. If it doesn’t work please share the link will check and let you know the solution.
Hope this helps!
Hi
I have a question about Acceptance message . When a customer checks the Acceptance box, the email and email2 show the box was checked with the message :”on”
I would like to change “on” to something in Japanese. Where can I edit the reply”on”.
Thank You
Steve
Hi Steven,
Thanks for checking in but sorry your request is not very clear to me can you please share any image or something to explain.
Hi Thank You for responding, here are 2 images, 1 is the form, 2 is the reply email generated by the form and the response to the acceptance check box =”on”. I would like to change “on”
https://redroof.jp/wp-content/uploads/1.png
https://redroof.jp/wp-content/uploads/2.png
Hi Steven,
Got your point but I don’t think you can change that from the form editor, for that you might have to edit the widget files and in my view, that is not the best option.
The main purpose of that acceptance filed is to connect the marketing permission settings with your email service provider not so much to just send emails to the recipient/admin that is why there no such settings to modify anything.
Hope this helps!
ok thanks
Great Article Ananda, thanks for sharing it. I have a question to see if you can help me. I want to learn how to rearrange columns according to the screen. For example: I have 4 columns (desktop) and I want to change the order for mobiles, that is, I want the fourth column in the first position, the first in the second position and so on. I do not know the instruction in CSS to do so. Thanks in advance
Glad you like it Oswald, now to your question if you are referring to elementor columns then you can re-arrange using “order” in CSS. Check this article for more details https://css-tricks.com/almanac/properties/o/order/.
You have to add a media query to target mobile screens. So the CSS could be something like this as per your example
@media (max-width: 767px){
.reorder-col .elementor-column:nth-of-type(1) { order: 2; }
.reorder-col .elementor-column:nth-of-type(2) { order: 4; }
.reorder-col .elementor-column:nth-of-type(3) { order: 3; }
.reorder-col .elementor-column:nth-of-type(4) { order: 1; }
}
Hope this helps!
Thanks for your help Ananda…
I want to learn, how to rearrange the elementor form field according to the screen?
Adnan, the process for re-arranging form fields would be similar to my previous answer you just have to target the field container class properly.
Hope this helps!
Great Article Ananda, but i want to remove the radio buttons and turn the words into buttons, is it possible?
Glad you liked the article Marshall, yes you can turn the labels into a button style with CSS and when the radio button is checked change the button style accordingly to make it look active. You need to alter the CSS a bit.
Hope this helps!
Hi Ananda. What an amazing CSS tricks you are sharing with us. Thanks a lot for your efforts you are showing towards us.
Just have one question that how can we replace default radio button to an image radio button in elementor form through CSS.
Eagerly waiting for your reply. Please reply ASAP.
Thanks☺️
Hi Hardik,
Thanks for your kind words, yes you can use an image for radio buttons, just tweak the css a bit in place of
background-color
usebackground:url()
same goes for the activate state as well.Hope this helps!
Hey Ananda,
A really helpful article here, bookmarking this website for sure!
Is there a way to make the elementor form go to the next step right after a a radio button is selected? Thanks in advance!
Glad that it helped you Abhi!
Regarding your question I haven’t tried something like this may be possible but I wouldn’t advise you to do this because elemetor has its own process for the form steps, manipulating that might cause some issue in storing the form data.
Hope this helps!
Great Info Sir.
We really appreciate your effort and happy to see that you are providing CSS code also.
Great work. Keep it up.
Thanks
Thanks for your kind words Rami!
Hello, i was trying to contact you through contact form. But there are some error in sending message.
So please make fix that.
And tell me back so that i can contact you.
Clientinfosar20@gmail.com
thanks
Hi Rami I checked the contact form it is working perfectly in fact I’ve got your message through the form and have replied too.
Hi, thank you for the amazing post. I hope you can help me with this really annoying issue though. Basically I have a some radio buttons and some text inside a label. This is in a small container and when the line of text breaks and goes to the other line, I want it to be below the text and not the radio button, so in short to increase the indentation.
So basically I want the line brake to start under the TEXT and not the BUTTON so that the text is alligned 🙂
Hi Maxime,
I would love to help you but for this, I need to see the issue, without looking at it it’s hard to suggest anything. Can you please show me the page?
Thanks!
Hi, here is an example 🙂
https://www.simplybiohacking.com/test/
This what you can do
span.elementor-field-option {
display: flex;
align-items: baseline;
}
span.elementor-field-option label {
padding-left: 10px;
}
Please note for understanding I’m using global selectors you can be more specific.
Hope this helps!
Hi Ananda thank you so much ! Unfortunately it’s not what I am trying to accomplish. Here is another example of what I am trying to do: https://www.bravo-kernel.com/2017/01/how-to-create-responsive-vertically-aligned-mulitline-radio-button-labels/
I basically want the text to be aligned.
Thank you so much!
This is exactly what the given CSS dose, did you implemented on your site?
Hi Ananda,
after some testing I realized that the code your provided doesn’t work because I made the main radio buttons invisible and designed new ones with your code you provided in this article. But if I leave the “original” radio button then the code works perfectly! 🙂 Is there a way around it tho? So I can leave my newly designed radio button AND had the alligned texts.
Best,
Maxime
Hi, I’m trying to get the section title and description font and color stylized, but it is not translating. It is just showing up black and my default font and won’t allow me to change it. Is there a ccs code I can put to change the font type, size, kerning and color for the Section Title & Description?
Hi Beth,
I think there is a CSS conflict on your site that is why styles are not working, you can disable some plugin to test or you can also regenerate the elementor CSS to check if it works or not.
Otherwise, you can go to this site https://frontendresource.com/font-css-style-generator/ and generate the CSS code make sure to change the selector on your site.
Hope this helps!
how can I add “Yo It’s” with a little opacity inside this text box? I’m using Contact Form 7 in elementor. Thanks
Your Name
[text* your-name]
Hi Dave,
Unfortunately, you can’t add any text in a text box because we can’t use pseudo-elements in any form fields. You can do some CSS hack (using pseudo-elements) if you have a label for that particular text-box.
Hope this helps!
how can i remove the three lines in the message field please? I want the message field to be of a fixed height and when they type the text that the scroll bar in the message field shows. thank you very much for your inputs
Hi Hrvoje,
For this, you have to use this CSS property
resize: none;
on the message field.Hope this helps!
Thank you for your amazing tutorials Ananda. I’ve been using this for styling every form we have and the checkboxes.
I’m not sure it’s okay to ask questions, I guess you’re getting a lot of them. But in case you have time: I’ve been trying to style the checkbox for Remember me on the Elementor Login widget in a similar way, but I’m unable to do it. I get the checkbox itself to show, but I can’t check it. Thank you in advance.
Hi Elle, glad that my videos are helping you, now for your question I’ve not checked this with the login widget but if you can share your site link I can check and suggest you.
Hope this helps!
Thank you! I’ll send you the link through the contact page. Hope that’s okay.
Hey Ananda,
thanks for this tutorial.
I have one question: I implemented this into my elementor form and unfortunately the error message is invisible now.
How can I let the message appear again?
Best regards, Leon
Hi Leon,
I checked the form again but I can see the inline error, the success message everything I couldn’t re-create the form error message as there has to be some technical error to show it. But since it is showing the success message it should show the error too and my styling has nothing to do with that section.
Please remove the style once and check if you can see the error message or not and also let me know how to create that error message so I can check myself too.
Hope this helps!
Thanks
Ananda
Hi
I want all the information on the forms to be RightAlign. How can I do this?
Hi Saeed,
There is no easy option to set the right alignment in elementor form, you have to use custom CSS to achieve the desired result.
Hope this helps!
Country & Phone Field Contact Elementor can add?
Yes! SIARHEI you can do that with Elementor forms, even though you have to add the country list manually in the Select field type.
Hope this helps!
Hi Ananda,
Thanks for your article. I have a question, is it possible to put the labels left of the fields in a contactform in Elementor? If yes, how do I do that with CSS? This is the form (see bottom of page): https://groweveryday.life/incompany/9-weekse-cursus-growthmindset/
And where do I put in the CSS, can I add that to an existing form?
Best wishes,
Marc
Hi Marc,
To align the labels to left you have to add some CSS to them like this
selector .elementor-field-group{
flex-flow: row;
}
selector .elementor-field-label {
width: 25%;
}
Make sure to add this CSS in a media query for large screens only otherwise the labels will align to the left in mobiles as well.
Regarding adding the CSS you can add them in Advanced > Custom CSS section as shown in the video.
Hope this helps!
Hi Ananda,
Thank you very much, does this align them only to the left, or ‘left of the field’ with the field next to the text?
Best wishes,
Marc
Hi Marc,
It will align ‘left of the field’ with the field next to the text.
Hi Ananda,
Nice post, thank you for your expertise and sharing this. I was wondering. Is it possible to put the label in an Elementor contact for next to the field? And how do I do that? See: https://groweveryday.life/incompany/9-weekse-cursus-growthmindset/ (bottom of page)
I would like it to be like: https://groweveryday.life/coaching/online-leidinggevenden/ (bottom of page)
Best wishes,
Marc
I am looking on whole internet for finding classes for elementor form fields like radion and all others. Thankyou so mucjh for sharing. If you cna provide all fields classes in pdf then it will be great .
Thankyou
How do you get this to work for the Elementor Login widget? The :before pseudo element is working, but the :after isn’t.
Any help would be highly appreciated!
Thanks.
How can I default check the first radio button value?
Bro, legend! The checkbox animation on the elementor form, mint!
Glad it helped you Viktor!
How can I default check the 2nd radio button value?
Please reply me.
Hi Ms,
To make any radio button checked go to the advanced tab of that item and write the default value in the “Default Value” field. For example, in my demo form, I have Marketing as the second option to make it checked I need to write “Marketing” in the “Default Value” field.
Hope this helps!
Hi You seem to be helping people a lot here I hope you can help me
In elementor forms (using wpforms at moment crazy expensive) I’ve been told to add various css code to make the date format UK DD/MM/YYYY instead of American none of it seems to work
Can you possible try to assist, thanks in advance
Hi Keith,
Can you please share the form link so I check and suggest you something.
Hi Ananda Projapati,
Thanks for sharing this CSS. Very helpful.
I have one more requirement that I can’t find on internet.
I want to add Padding and colors to the Elementor form Select field options.
I tried these CSS:
option{padding: 10px 16px !important;}
But not working. You can check the demo: https://imgur.com/a/HSDm0Iu
Hope you have an Idea. Pls make a video or reply here.
Looking forward your reply.
Regards,
Dhinesh
Hi Dhinesh,
Glad you liked the post, regarding your query unfortunately the Select element is one of those elements in CSS that can’t be styled much. To style, you need custom HTML elements which we can’t add in Elementor form.
Hope this helps!
Its posible to make a big square checkbox. ??? Thanks
Hi Jose,
Yes! You can make the checkbox bigger but you have to adjust the CSS accordingly.
Hope this helps!
Hi. This is a great tutorial. I’m trying to make an Acceptance checkbox on my elementor form bigger (3-4X current size) and keep the acceptance copy centered vertically with the checkbox but can’t seem to figure out what class or CSS code would apply.
The form can be viewed on https://vexas.inregdev.com/stay-connected
Any help would be greatly appreciated.
Hi Joe,
Glad you liked the post, regarding your query you have to adjust width and height of the checkbox CSS as per your requirements.
For vertically aligning the text you have to play around with the CSS.
Since I don’t have the demo setup now can’t give the exact CSS.
Hope this helps!
Hello Ananda,
Thank you for making such a lovely post detailing Elementor Form changes. I applied what you suggested for the checkbox fields. It works well on Desktop views, however, when i switch to tablet portrait and below, the styling is there but the checkbox cannot be selected. I have tried making some changes, but was unable to get it to work.
Just so you know, i have two forms, one form is displayed on large screens and the other form is displayed on tablet devices and smaller. I hide container the form is in depending on the device used.
Your help would be greatly appreciated.
Hi Shady,
Glad you liked the post.
If you can share the link it would be easy to look into the issue. Without checking it is hard for me to suggest anything.
Hope you understand.
Thanks!
Hi Ananda,
Fantastic tutorial, thank you so much. It did exactly what I wanted.
It has however, caused another problem… I have my form in a pop up and when your code is added the checkboxes in the pop up are no longer clickable/selectable. They work fine in the same form that is not in a pop up though. I’ve tried changing the pop up settings to see if they help but no combination seems to work.
Is this something yo have come across before? If so, do you know how to fix it?
Many thanks
nthn
Glad it helped you nthn.
Regarding the issue can you please share link where you are having the issue, so I can help you better.