Need to adapt the design of a form to your brand guidelines? There are 2 ways to modify it, depending on your coding skills and how you want to modify its look and feel.
Let’s see both of them!
The design settings tab
If you don't have coding skills or just need to modify fonts, colors and buttons, you can do it by clicking on the ‘Design’ tab of the form editor.
Here you can edit these styles while you see a simulation of how it would look. To check the final result, just click on the 'Preview' button to see the styles applied to the form.
Theme
Modify the border-radius of the buttons and fields to make them more or less rounded. Simply choose one of the options and publish the changes to apply them to the form.
Primary color
To customize the color of the form navigation buttons, use the color picker from the 'Primary color' section. You can select the color or paste the corresponding hexadecimal or RGB color code.
Fonts, sizes and background color
You can also edit the size and color of all text on the form, including labels and inputs. To do this, you can again use the color picker to select a color or enter its hex or RGB code.
In addition, you can modify the background color of the fields, in the ‘Input’ section, and the font style in the ‘Body’ block.
To change the font family, just write its name in that field. Make sure the font is loaded where you embed the form, as we don’t load the font, we only apply the CSS rule. As a recommendation, you can check the CSS rules for Google Fonts.
Error messages
To modify the color of the error messages that will be displayed on the form, you can also use a color picker. Just remember to use a color that gives a sense of alertness to prevent them from becoming unnoticed or confusing.
Branding
In this tab, you can also disable the 'Powered by Arengu' text from the footer of the form.
To remove this text, click the link to access your workspace settings.
Then disable the ‘Display Arengu branding’ checkbox. This option is only available on paid plans, so you will simply need to upgrade your account to disable it.
CSS styles
If you have coding skills, you can go even further and fully customize the form using all these CSS variables. You can see an example of how far you can go by editing the CSS styles of our forms on the Edify and Minimum.run websites.
Have you modified the look and feel of your form? Share your examples with us and if you haven't tried Arengu yet, sign up free or book a demo with our team. We will be happy to help you discover all the opportunities it opens for your business.
