Skip to main content

🎨 Designing a Beautiful Form to Match Your Brand

Designing a form involves changing its visual elements, such as colors, background, logo, label styles, required field indicators, error messages, and more.

By customizing these design aspects, you can create a beautiful personalised form that reflects your brand's aesthetics and personality.

Steps to customizing Form Design​

To design a form in FormNX, follow these steps:

  1. Log in to your FormNX account and open the form you want to design or create a new one.
  2. Navigate to Form Settings: In the form builder, look for the "Form" tab, located below the "Elements" tab (left side).
  3. Customize Design Elements: Inside the "Form" tab, you'll find options to change the design of your form.

Designing a Beautiful Form

Changing Form-Size​

Choose the size of the form, such as Full, Large, Medium, or Small, based on your preferences and the layout of your web page.

Changing Form-Position​

Align the form to the left, center, or right of the page to ensure it integrates smoothly with your website's design.

Form Page Setting​

Modify the page design by selecting from options like a solid color background, gradient, image, or transparency. This allows you to create visually appealing backgrounds that complement your brand.

Form Page Setting​

Similar to page settings, you can adjust the form's design by choosing a background style that matches your brand's aesthetics.

How to Add Custom CSS in your Forms​

To add custom CSS, refer to the screenshot below.

Custom Css

Custom CSS for Changing the color of Submit Button​

Note: Replace this #ff5733 with HEX of color you want to set.

.btn.submit_btn {
    background-color: #ff5733; /* Change this color to your desired color */
    border-color: #ff5733; /* Change this color to match the background */
}

.btn.submit_btn:hover {
    background-color: #cc4626; /* Change this color for the hover state */
    border-color: #cc4626; /* Change this color to match the background */
}

Custom CSS for Changing the color of Progress Bar​

.progress-bar {
    background-color: #00a816; /* replace #00a816 with HEX of color you want to set */
}

Custom CSS for Changing the color of Previous Button​

#prev_btn {
    background-color: #00a816;
    border: #008000;
    color: #ffffff;
}

Custom CSS for Changing the color of Next Button​

#next_btn {
    background-color: #00a816;
    border:  #00a816;
}

Custom CSS for Changing the color of the Icon's​

.fa-solid {
    color: #00a816; /* Change this color to your desired color */
}

Custom CSS for changing the color of the Border of the Input form fields​

.input-group .form-control,
        .input-group .input-group-text {
            border: 2px solid #ff003a; /* Change this color to your desired border color */
        }

.input-group .form-control:focus {
    border-color: #ff003a; /* Ensure the same color is shown when the input field is focused */
    box-shadow: 0 0 0 0.25rem rgba(48, 213, 105, 0.25); /* Add a shadow effect on focus */
    outline: none; /* Remove the default outline on focus */
}

Custom CSS for changing the color of the Border of the Dropdown form fields​

<style>

/* Change the border color of the select2 container */
.input-group .select2-container--bootstrap-5 .select2-selection--single {
    border: 1px solid #b78efd !important; /* Replace #b78efd with your desired border color */
}

/* Change the border color on focus */
.input-group .select2-container--bootstrap-5.select2-container--focus .select2-selection--single {
    border-color: #b78efd !important; /* Replace #b78efd with your desired border color */
box-shadow: 0 0 0 0.25rem rgba(48, 213, 105, 0.25); /* Add a shadow effect on focus */
    outline: none; /* Remove the default outline on focus */
}


.select2-search__field:focus {
    border-color: #b78efd !important; /* Replace #b78efd with your desired border color */
    box-shadow: 0 0 0 0.25rem rgba(48, 213, 105, 0.25) !important; /* Add a shadow effect on focus */
    outline: none; /* Remove the default outline on focus */
}

</style>

Custom CSS for changing the color of the text beside Scale Rating element​

<style>

.scale-rating-container span {
    color: red; /* Change this to whatever color you prefer */
}

</style>

Custom CSS to hide the label of the Fields and the Asterisk symbol​

<style>
label.form-label {
    display: none;
}
</style>

FAQs​

Can I change the colors of specific form elements?​

Yes, you can customize the colors of specific form elements, such as labels, required field indicators, and error messages, to match your brand's color scheme.

Is it possible to upload my company logo to the form?​

Yes, Absolutely! You can easily add your company logo to the form to reinforce your brand identity.

Are there options for custom CSS styling?​

Yes, if your plan has option for 'Custom JS/CSS' you can add custom css.

To add custom CSS, refer to the screenshot below.

Custom Css