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.
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.
=> Text of button that will be displayed on the form.
=> Alignments of button – Left, Center & Right
=> 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.
=> Length of the button- Full or Small.
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.
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.
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.
3. Font: From the font option you can change the “Font Size” & ” Line of height” as your orientation.
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.
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.
6. Margin: Change the margin to as same as “Padding”. By Margin properties, you can generate space around of background.
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.
Watch the tutorial here!