Customizing the appearance of your forms is essential for maintaining brand consistency and creating a good user experience. By injecting custom CSS into your NeetoForm, you can override default styles, tailor the look and feel of your forms to align with your brand identity, and ensure that they fit perfectly within the design of your website or application.
Here are the steps to apply custom CSS to your forms in NeetoForm:
Start by opening the form you wish to customize and head over to the Theme tab.
If you're using a system theme, you'll first need to clone it to edit it. If you are already using a custom theme, then edit it.
In the theme editor, scroll down to find the Custom CSS section. Here, you can inject your custom CSS code. This is where you'll input the styles you want to apply to your form.
If you need more space to work on your CSS code, you can click on Expand editor. This can make it easier to manage longer or more complex styles.
After adding your CSS, save the changes and preview the form to ensure everything looks as expected.
For example: You can import custom fonts from any URL and apply it to any part of the form using CSS selectors. In the below snippet, we are loading the Fascinate font from Google fonts and applying it to the header element.
@import url('https://fonts.googleapis.com/css2?family=Fascinate+Inline&display=swap');
.neeto-form-welcome__heading {
font-family: "Fascinate Inline", system-ui;
font-weight: 400;
font-style: italic;
}
Things to note
When using custom CSS feature, it is important to ensure that your code is well-structured and doesn't conflict with the default styles or functionality of NeetoForm. Incorrect or poorly written CSS may lead to unexpected behaviors or display issues. Always test your customizations across different browsers and devices to ensure compatibility. Additionally, note that custom CSS might not work as expected if NeetoForm updates or changes its base styles, so periodic reviews and updates to your CSS might be necessary.