Website Theme Customizer

  1. Home
  2. Support
  3. Website Theme Customizer
  4. General – Configure Homepage, Page Settings and General Styling
  5. Customize the Form Settings for the Input and Text Areas on the Website

Customize the Form Settings for the Input and Text Areas on the Website

Forms are an excellent mode of one way communication. It brings business the leads, partnership, other numerous opportunities and even sometimes complains. Using the comment for for example works as excellent feedback to improve your product or service multiple folds.

For such an important business and communication tool, we must carefully understand the settings we can use to improve its design aesthetics. We strive towards providing the best user experience, in that endeavour, our forms should be graphically enticing enough to invite visitors to connect with us.

Let’s understand how a few settings can help us to customize and improve our Forms.

Change the Form Labels Color

You can easily change the color of all the labels of all the built in forms that were not created in the Page Designer. Simply click on “Select Color” button under the “Label Color” section. Choose the color of your choice and you’re good to go! All the form label color will now be changed.

You can use the label color to reflect your design primary and secondary colors. It will make your site forms look great.

Change the Font Size of the Input and Textarea (Forms)

Some websites use larger text size while a few prefer smaller text size. Why? Glad, you asked! It’s wise to always keep your target audience in mind. If you know your key target audience are visitors who prefer to get minimum information with large font size, it’s best to use larger text size, and that’s especially true with forms.

Just use the slider to increase or decrease the font size to your liking. The live preview will help to get a better idea of how it exactly looks on site. Simply navigate to a page that includes a built in form and try it out.

Change the Border Width of the Input and Textarea Boxes (Forms)

 You can be very creative with the border width configuration. As you get to change the top, right, bottom and left border width individually. These changes will directly affect the border of the input box and text area box.

Changing the border width is easy; you get four small boxes to fill in the desired border width. These are top, right, bottom and left, in the same sequence.

The last button has a chain type icon that links these boxes together. So that if you want to keep the border width the same for every box. Just click on it and fill in a number in any box. It will automatically fill in other boxes with the same number.

Change the Border Radius of the Input and Textarea (Forms)

Adding a little border-radius to any input box makes it look modern. Not every design allows for a border radius. If rounded corners blend well with your design, and make your site look modern. Then you must try using some border-radius.

You can easily increase or decrease the border-radius by using the slider. The live preview will also help to quickly find out what looks best.

Change the Border Color of the Input and Textarea (Forms)

Good border color can elegantly increase the aesthetic appeal of a site. It’s a catalyst to add a sophisticated feel to a website form. Such minor considerations create a positive vibe for the user filling the form as well. You never know such positivity can lead to an engaging project opportunity! You never really know!

In an endeavor to doing your best, you can simply change the border color by clicking on “Select Color” button underneath the “Border Color” label. Just choose the desired color and you’re done changing the color! It’s that simple.

Change the Border Color as You Focus on an Input Box or Textarea (Forms)

“Focus” is rather a technical term. It’s easier to understand that when you first click on an input box, that’s when you focus. You can choose to change the border color as soon as you focus on an input box.

It’s actually useful and many business use color psychology to incentivize the user to take action. For example, a green border color makes you feel like everything is fine. It’s the freshness color, the color of nature, safety and new growth.

Simply click on “Select Color” button under “Border Color: Focus” label to instantly change the focus color.

Change the Background Color of Input and Textarea Boxes

Most businesses and blog owners prefer to keep the background color of input boxes white. It’s easier to read for all age groups, and blends with every design.

However, let’s say if you operate a kid’s website. You might want to experience using colored input boxes.

Just click on “Select Color” button under “Background Color” label to change the background color of input boxes and live preview it as well.

Change the Input Text Color Under Forms

If you have a white background for inputs, it makes sense to have black or darker shade of gray as the text color for the input box. As black is the default text color and white as the default background color for inputs.

But if you change the background, in most cases you will have to change the text color that’s visible and contrasts well from the background. At the same time, it should look good too.

Just click on the “Select Color” button and choose your desired color for the Input boxes text color.

Change the Padding (Space) amongst Input Boxes, Textareas and Form Elements

Every business has a different kind of forms. Some are lengthy and some are shorter. They unanimously look best though if you’ve carefully used the padding (space in between input boxes).

The best thing is you can use different padding for the top, right, bottom and left sections. It lets you create neat forms and best customize how it looks as per your needs.

You will find four small input boxes under “Padding (px)” label namely Top, Right, Bottom and Left in respective order. The last chain icon lets you link together these values. So that if you click the chain icon, you can then enter a value in any of the boxes and other boxes will automatically update with the same value.

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?