Guides & tutorials

How to customize the design of a form

No items found.
Import this tutorial scenario in your workspace
Table of contents

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.

You might like to read

See more tutorials

Getting started with Arengu

Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.