How to Easily Create Modern, CSS-First Forms in WordPress

Do you want to know how to easily create customizable, stylable, performant forms in WordPress? That's precisely what you learn in this video. You will utilize the IvyForms plugin — it’s completely free — to create custom forms. Along the way, you will learn a number of CSS tips, such as tweaking colors using the OKLCH color format, using the Changes drawer in Chrome Developer Tools, and how to apply additional CSS to your WordPress theme. Let's dive in. IvyForms is a fantastic, minimal, simple, and customizable form builder for WordPress. It's completely free, and it comes with a ton of fantastic features, but only features that you need and actually will use. Building forms in IvyForms is intuitive and simple. You use drag-and-drop to drag the fields onto your form, you customize them, and you can, of course, style them using CSS — and this is exactly what you're going to see in this video. IvyForms is an active development. Some of the features that are coming up are conditional logic and multi-page forms. Those are going to be really great, and you're certainly going to want to utilize those once they're available. But for now, we will just explore how to create a simple form and then style that form using CSS. I'm happy to say that this video is sponsored by IvyForms. So, hit the link in the description and download your IvyForms plugin, upload it into your WordPress installation, and as it's completely free, you can use all of their features without any restrictions. So, let's jump into my WordPress admin, where I already have IvyForms installed. Before we create our first form, let's briefly jump into settings because I want to show you that you can create accessibility accessibility-compliant backend layout here. You're going to want to enable that. And you can also enable RaCaptcha on your forms. Again, I strongly suggest you do that because spam is rampant these days. And if you don't have any security features enabled for your forms, you're going to get a ton of unwanted messages. You don't want that. So, configure your ReCaptcha for IvyForms. All you need is an API key, and it's fairly simple to create one. Another thing that I want to mention is that you have an integrations tab here as well, and currently, you have wpDataTables integration. So you can easily export data from submissions into the wpDataTables plugin if you're using that. Of course, there are more integrations coming, so keep an eye on this tab. Right now, you can use IvyForms data directly with your wpDataTables plugin. All right, let's create our first form. I'm going to hit “New Form” here. I can start from scratch, or I can generate a form with AI; or actually, I will be able to generate it with AI soon. So keep an eye on that as well. As I mentioned, IvyForms is an active development, new features will be popping up all the time, so keep an eye on those. In the meantime, we can either start from scratch or we can select one of the predefined templates that will help us get started faster. And I will use this “Contact Form” template for this demo. Right now, my contact form is already good to go. I can immediately edit this form on my WordPress page, and it will be ready to use. You can copy the Shortcode for this form here. And once you do, you can just add it onto a WordPress page. So, let's do that. I will create a new page. The title is going to be “IvyForms Contact”. I'm going to add a Shortcode block here, and I'm going to paste in IvyForms shortcode that I've copied from my IvyForms settings page. Let's publish this page and let's preview it. There it is. Our contact form is already ready to use. So, let's try it out. I'm going to enter my info here. I will hit submit. And the form has been submitted. Let's jump back into the admin. And now I can see entries for this form in my entries menu. On this screen, you can see submissions across all your forms. You can view the submission here, exactly what we've entered. And we also have additional data or specifically when it was submitted, from which browser, which source URL, and so on. Actually, as most developers, I prefer dark mode, so let's switch IvyForms to dark mode because it does come with a really nice dark mode. This looks a bit better, I think. So, when you create a form and add it to your WordPress site, you're going to find all submissions to those forms in the Entries submenu. If you have multiple forms, you can filter those forms here in this dropdown menu. Let's jump back into our form and let's customize it. I'm going to open the Contact Form. Working with this form is simple and intuitive. You can drag and drop fields to add them. I will add a Website URL field here. If I click on it, I can see a number of options that I can adjust for this field. I can make it required, for example, and write a required message here. I will not do this for our website URL field, but I will add a placeholder here because other form fields have one, and it's not going to look consistent if I don't add it here: “Enter your website. ” In the advanced step, you can adjust advanced settings such as limiting the maximum length of the field, setting default value, or tweaking the label position. You can add a prefix and suffix to

this field so it's a little bit clearer on what you're expecting users to do. And in this example for our website, we are actually going to add a prefix ‘https://' because we don't want users to input that. We just ‘css-weekly. com’ and be done with it. All right, perfect. I think my website field is ready. So I can update my form and check it out on the front end. The website field is available on this form. Another thing to mention here is that soon you will be able to style the form directly from the admin area. This will allow you to adjust the visual style of your form from tweaking various properties to actually selecting the entire color schemes that are already predefined and ready for you to use. This is not available yet. So, we will actually use CSS to style the form that we've just created. Of course, all fields that are available within IvyForms are as simple to configure and set up as the Website field that we just added. You can drag and drop any of those fields into your form, and they are immediately ready to customize and use in the actual form. I want to do two things here that will matter a little bit later. I will add classes to my “First Name” and “Last Name” because later on, when we style this form, we will actually tweak those two fields separately. So I will add class “my-firstname” and on my last name, “my-lastname”. I already mentioned that you can use Google ReCaptcha with IvyForms and you're going to find it here under Security. So just as with any other fields, you can drag and drop this onto your form. Of course, you're going to have to configure it in the settings. I've shown you before where to configure it. So do that before you add a form to your production website. Under advanced options, you have Time field currently, and the Date is coming soon. So you can use those as well. To configure general options of the form, open the Settings tab. Here you can tweak the form name, description — I actually want to show description here — and you can choose to store the entries from this form into the database or not. Let's see other options that we have here. Notification allows you to, well, get a notification email when the form has been submitted, and confirmation allows you to style the confirmation message. If you remember when we submitted our test form, we've gotten a nice success message: “Your form was successfully submitted. ” And you can configure this here. And after the form has been submitted, you can either hide the form as it's currently the case, or you can just reset the form so it's ready to be submitted again. Two other options that you have that are really worth mentioning. Once the form has been submitted, you can redirect the user to a different page of your website, or you can redirect the user to a Custom URL. And you can enter that URL here. We're just going to use a success message for this demo. I'm going to hit Save, and I'm going to open the Integrations tab here. As we've seen before in the integrations menu, here you have wpDataTables integration currently, and you can allow IvyForms to be used as a data source in wpDataTables. If you are using wpDataTables, then you do want to enable this. All right. Now that we have created our form, let's see how we can easily style it using CSS. And for this demo, I will actually style it directly in Developer Tools, and I will show you how to easily copy the changed styles directly from Developer Tools and paste them into your CSS. Let's open our frontend page. I will refresh it. I will open Developer Tools using “Command + Shift + C” shortcut, and I will select my IvyForms form so we can see exactly what's going on in the markup here. This is the container for my IvyForms. It has a class IvyForms; we can utilize that when we're styling it, but we will go down a different route, and we will add an ID to our form so we can override the styles a little bit easier. And to do that, we will actually wrap this Shortcode with another container so we can easily add a custom ID, just so that our styling is not dependent on this form ID that IvyForms generates. I will edit this page and close Developer Tools. As I do this, I will select my shortcode, and I will create a group here. I will open the Advanced tab here, and I will set “HTML Anchor” because this effectively adds an ID to my form, and I will be able to use this to style this form. ID is going to be “myform”. I will save this and open the page again. If I open Developer Tools again and select my form, I can see that my form is wrapped in a container, and the ID for this container is “myform”. So I'm going to actually utilize this to style this form. I mentioned before that we will style this form directly in Developer Tools and then copy all of those changes simply to paste them into our CSS. And to do that, we will utilize the Changes Drawer from Developer Tools. To access it, open the Command Palette in Developer Tools. Shortcut is “Command + Shift + P” and then search for “changes”. The result I'm looking for is “Show Changes”. I'm going to hit enter here. And in this panel, I will see all the changes I make to my CSS. But there is a catch here. This will only pick up the changes that are coming from actual

files. So if we were to tweak our styles directly here in element style or inline, those changes will not be picked up by the Changes Drawer by the Changes Panel. So whenever we're changing something, we want to add a style to one of our files. For example, to “style. css” — and now if I add style to my form, let's set the ‘background’ for this form to dark green, for example. I'm using the OKLCH format. And if I open the Changes Drawer again, I can see the change applied right here. So once I'm done with all of my changes, I'm just going to open the Changes Drawer, select my style. css, and I can just select this, copy it, and I'm ready to paste it into my CSS. All right, now that you know the principle, let's tweak the form. I will tweak the background color first because I don't want to have a dark form. I light one. So I will adjust my lightness and set it to something like 90%, so we have a nice light background on our form. The text color for this form is going to be dark green that we've used before. If you're using a colored background, then you want to match the hue of your text to that background — Just make it a lot darker or lighter if you’re working with a dark mode. The ‘padding-block’ will be ‘2’ and ‘padding-inline’ will be ‘3rem’. I will also add ‘border-radius’, set it to ‘2rem’. And let's use a ‘corner-shape’ property to actually make it a little bit more interesting. If you don't know what ‘corner-shape’ property is or how it works, check out the link in the description on the screen. I have a guide on exactly how to work with it and why you should use it today: ‘corner-shape’. Let's set it to ‘scoop’ and let's add border-color. Again, we're going to use the color that we already have. If you're working with colors like OKCH or HSL, you can easily adjust colors by tweaking the components such as lightness and chroma, but leaving the hue as is. And that way, you can be certain that the colors that you're using are working together well because you're not actually changing the color itself, you're just changing its lightness or saturation. Actually, I'm going to use a shortcut here, and we will set style, width, and color at the same time. I will also adjust the opacity here and make it a little bit transparent. If we have some kind of background on our page later on, it's going to work a little bit better. Let's try ‘0. 5’. Let's adjust our input fields. Now, I will inspect those. When I inspect this, I can see that IvyForms is using classes to style this. And that's exactly why we've created an ID for our form. That way, we can easily overwrite those styles. And this is exactly what we will do. I will add another selector to my style. css — ID is ‘myform’ — and we will target `. el-input__wrapper` here. So I'm going to copy this and update my selector here. I will set the ‘background’ again to the color that we were using. But this time I will adjust the lightness and set it to something like 99% of lightness, and I will add ‘border: 1px solid’ — again, we're going to use the color that we have. This is pretty okay. But we also need to select our text field here. So I will inspect it to see exactly which class we're working with here. And it seems that we can use this class here, `. el- textarea__inner` to style our textarea. So I will just add this to our class that we've created. This was on our input wrapper. So let's update this selector here again, `#myform`, and the class is `. el-textarea__inner`. There we go. This is already looking much nicer. And if you want to check which changes you've made, you can always open the Changes Drawer. Let's try it out: “Show Changes”. And here are two selectors I've added to adjust my form. Another thing I want to do here is adjust my first and last name. It makes more sense for them to be side by side. So let's do that. I’ll select my first name field. And as we want to style those two form fields differently, we've added separate classes to those two input fields a little bit earlier in the admin. So I will select my container here, and as you see, the class here is ‘my-firstname’ and the last name is going to have ‘my-lastname’ class. So we can tweak this as before. I will add another selector into my style. css — ID is `#myform` and the class is `. my-firstname`. I will set the `inline-size` property here, and I will actually use the `calc()` function to make the inline-size 50% minus the gap that we want to have between those two fields, first name and last name. So `calc(50% - 1rem)`. Now

I will use the float property to float this form field to the left of my field underneath. I will set float to left — and this isn't working, and it's not working because I made a typo earlier and instead of first name I've entered “frist” name. For this demo, let's just go with the “frist” name because I don't want to lose the changes I made to this page. As we do want this 1rem gap between those two fields, we want to push the last name 1rem to the right. And we can do that by specifying the ‘margin-right’ or ‘margin-inline-end’. So `margin-inline-end: 1rem`. Even though this seems okay visually, it's really not in terms of usability because now we cannot click on our first name. So, we do want to adjust our last name field as well and set it to float. I will select my last name field. And this time, I didn't make a typo, so we're good to go with ‘. my-lastname'. I will add another selector to my style. css: `#myform. my-lastname {}`, `float` is going to be `right`. The `inline-size` `calc(50% - 1rem)` exactly as for our first name. And we don't need a margin here because we already have a margin on our first name. We still need to clear the floats we've created here. And to do that, we will target the item after our last name. This is going to be the email address. We didn't add a separate class to target this because we actually want to make this a little bit more flexible, and we want to target the next sibling of my last name field, which will be any field that comes after this. So if we rearrange our form later on in the admin area, which is really easy to do using the drag-and-drop functionality of IvyForms, then this will continue working as expected. So we will add another selector to our style. css file: `#myform`, and the selector is going to be `. my-lastname + div {}`. We will select the `div` element that comes after `. my-lastname` element, which will always be the next field in the form. I will set `clear: both` here to clear the floats we've created earlier. And now, both of our fields are clickable. When was the last time that you used floats to style something in your CSS? I hope that this serves as a nice reminder for you that floats still can be usable at least sometimes. We just as well could have used CSS Grid here or Flexbox, but I wanted to remind you that floats are still an option for you to use, not only when you want to float an image right of the text of an article, you can also utilize it sometimes when you want to make a certain layout changes as we did in our form right here. So let's check out our Changes Drawer: “Show Changes”. And here are all changes that I made. I will select all of those changes. I will hit copy. And now I want to paste this into my CSS. And I will not go into my editor. I will actually show you how to paste this in, directly in WordPress. Let's open the WordPress admin tab. And we're going to paste this into our Additional CSS field for our site. If you go into Theme Editor here, “Appearance - Editor”, then you don't actually have the Additional CSS field here where you could easily paste this in, but you can still access it if you open a page, and you can open any page. I'll hit edit here. Then open Styles here under this icon, and under “More”, you can select “Additional CSS. ” We can paste this in here. And this seems a little bit counterintuitive because it seems like this CSS is specifically related to this page, “About” in this example, but it's not. This is sitewide. So this will apply to our entire site. And if we open a different page later on, you're going to be able to see exactly this CSS there as well. So I will hit “Save” here. I will open my frontend, I will close Developer Tools, and I will refresh the page. Hopefully this will work, because if not, we're going to lose all our changes. And it does work. Our styles are still applied, and we have our nicely styled form. This is exactly the power of IvyForms. It allows you to very easily tweak the style of a form by applying CSS directly to it. So if you're using WordPress, check out IvyForms. It is a fantastic form builder that you can easily use on your WordPress sites. It's completely free, so there are absolutely no obstacles to using it. Hit the link in the description, try IvyForms today, it's completely free, and you'll be able to easily create various kinds of forms. And not only that, now you know how to style those forms easily using CSS. Thank you so much for watching, and thanks so much to IvyForms for sponsoring. My name is Zoran Jambor. I will see and hear you in a different customized form. Or rather, in the next video.