Buttons

To enter theme editing mode, you first need to copy the theme (described here - "How do I change the design theme?"). Next, select the "Buttons" item. The settings will be available for the form:

Background 1

Background

In the "Background" menu, you can choose a suitable background option for the form elements:

  • Color
  • Gradient
  • Image
  • Transparent background

If you select "Color" in the basic state, the background color of the buttons will be set to monochrome, a suitable color can be selected from the palette:

Background 2

Under "Gradient" you can select the initial background color of the buttons that will transition into the final color, selecting it accordingly is also available. You can also adjust the direction of the color transition:

  • Top down
  • Bottom up
  • From left to right
  • From right to left
  • From top left to bottom right
  • From bottom left to top right
  • From top right to bottom left
  • From bottom right to top left

Background 3

The next item is "Image". To add an image to your page, click the "Select Image" icon in the "Image URL" field and you will see the file manager pop up with options to select an image:

  • Gallery
  • Photobank
  • My images

Background 4

Under "My Pictures" you'll have previously uploaded images, under "Gallery" you'll have standard images, and under "Upload", you can add images. In the "Repetition" field you can set how the image will be located in the element: without repetition, horizontal, vertical, reproduce. If you choose a transparent background, there will be a background color for the form:

Background 5

There's also a "On Hover" setting, which means that when the user hovers over the button, its background will change to the specified one. The settings are similar to the normal state:

Background 6

Border

In the menu of editing the design theme with the "Border" item in the main state, you can set

  • border width
  • border style
  • border color
  • border rounding

To go into the frame settings, click the slider to enable the option and select the sub-item to adjust:

In the normal state, i.e. the view of the button frame before pressing. For the example we chose width 2, black color and style "dottes" (dashed):

Borger 2

And in the "On Hover" sub-item, you can also configure similar settings for the background of the frame, which will be visible when you hover over the button.

Shadow

In the edit menu of your design theme you can adjust the button's shadow by moving the slider:

Shadow 1

In the shadow settings, the normal state and hover settings will be available, where you can edit: shadow type (outer and inner), color, shadow blur, shadow stretch, transparency, and X and Y shifts:

Shadow 2

Font

In the design theme edit menu, the Font section has subsections available in normal and hovered states:

  • Font (you can choose the font type)
  • Size
  • Color
  • Line Height
  • Font style (italic and bold)

Font 1

In the "On Hover" subsection, you can also configure similar settings for the button font:

Font 2

Alignment

In the "Alignment" subsection, you can customize the location of buttons:
  • Center
  • Left
  • Right

Alignment

Sizes

In the Sizes subsection you can set the width and height of the buttons in px:

Dimensions

Indents

To access the "Indents" settings in the form theme editing mode, click on the "indents" subsection and you will see the internal and external indentations of the form buttons available for customization:

button indents

Comments

Order turnkey form development

No time to figure out all the settings yourself? No problem!
Order web form development from us