Button Customization & Styling

A button is a significant & integral part of any website especially when it comes to web forms and customizing them is quite a bit of work to make the button look good and stand out. In our Bit Form, the user will get a by default submit button. If users want to change the default styling like – position, color, text size, etc, they can use our built-in style editor. This documentation drives you to create a custom-made button with maximum ease.

Button & Button text customization:

1. From your WordPress dashboard, go to Bit Form.

2. Select an existing form or create a brand new form for button customization. Here we will demonstrate the process using a build-in form template.

3. In the below picture you can see the default “Submit” button. You can drag & drop a button field from the “Tool Bar” & customize it as you want. In this documentation we will show you the button customization &styling using the default submit button. 

1.Default Submit Button Bit Form

4. Click on the button field & you can access the ‘Field Settings‘ option from the right panel of the style editor. From this option, you can customize the following options mentioned below.

2. Field Settings Bit Form

=> Text of button that will be displayed on the form.

3. Submit Button Text Bit Form

=> Alignments of button – Left, Center & Right

4. Button Allignment Bit Form

=> Type of button – Submit, Reset & button.

      Submit button : It is a standered submit button that helps to submit information by user.

      Reset button : It clears all the previous information & allows the user to start over again.

Button Type

=> Length of the button- Full or Small.

5.Full width button Bit Form
6. Small Button Bit Form
Styling of a button:

Follow the path to access the style editor: Click on ‘Style Customize’  => Field Customize  => Button Style . From the ‘Button Style‘ option you will find 7 different ways to advance styling the button. 

7.Style to field Bit Form
8. Button Style Bit Form
9.Submit Button style Bit Form

These ways are:

1. Background: Change the background color as you want in terms of three options – Default, Hover & Focus. By default, the background color is set to blue. Also, you can control the background filter options –Blur, Brightness, Contrast, Grayscale, Invert, Opacity, Sepia, Saturate.

10.Background Hover it Form
11. Background Hover2 it Form
13. Color Bit Form

2. Color: Set a suitable color of the button text regarding the options – Default, Hover & Focus. By default, the text color is set to blue.

13. Color Bit Form 1

3. Font: From the font option you can change the “Font Size” & ” Line of height” as your orientation.

14.Font Size Bit Form

4. Border: You can set border type as Solid, Dotted, Dashed & Double. By default, the border of the button is set to none. This border will be shown differently in respect of devices users use. Also, the user can change the color of the border in terms of the ”Default’, ‘Hover’ & ‘Focus’ options. Also, you can change the width & radius of the border you have set.

15.Border Bit Form

5. Padding: Change the padding size that will be displayed differently in terms of devices. By padding properties, you can generate space around of content.

16.Padding Bit Form

6. Margin: Change the margin to as same as “Padding”. By Margin properties, you can generate space around of background.

17.Margin Bit Form

7. Shadow: You can set the shadow type as “Inside” & “Outside”. By default the border of the button is set to none. Also, the user can change the shadow color & style of the border in terms of the ”Default’, ‘Hover’ & ‘Focus’ options.

18.Shadow Bit Form

Watch the tutorial here!