Register

How can I change the Button Styles of my Form ?

Not only does the Moosend Landing Page Designer enable you to easily add a Form element to your landing page, it also gives you many, many options for styling the heck out of said form element!

One of the things you can play with is the style of your form's Button. As soon as you have added a form element to a Container within your landing page, the form element's settings become available on the left side of your Landing Page Designer Page.

Scroll down until you find the Button Styles option, then click on it to expand the menu.
Landing_pages-Form_button.png

You now have the following options with regard to your form's Button.

  • Button Color
    Choose a color for your Button out of a color palette.

  • Label Color
    Choose a color for your Button's label out of a color palette.

  • Border Color
    Choose a color for your Button's border out of a color palette.

  • Font Family
    Choose a font for your Button's label using the drop-down menu.

  • Font Size
    Choose a font size for your Button's label either by using the up/down arrows, or by simply typing the desired number directly into the area next to the arrows.

  • Decorations
    Choose whether your Button's label will be in Italics, Bold or Underlined (or all three!)

  • Alignment
    Use the drop-down menu to choose the alignment of your Button, thus determining where the Button will 'sit' under your Form's text field. You have three alignment options to choose from: LeftMiddle, and Right.

  • Button Width
    This option provides you with a drop-down menu so that you can specify your Button's width. You have three options: Full Width, Fit to Text and Custom Fit.


If you go for Full Width, your Button will span the entire width of the Form field. You then have these options:

  • Label Padding
    Set the Padding (in other words, the height) of you Button, using the up/down arrows or typing the desired value directly into the area next to the arrows.
  • Distance
    You can adjust the Distance of your Button from the Form field, either by using the up/down arrows or by typing the desired distance value directly into the area next to the arrows.
  • Border Width
    The Border Width option allows you to increase or decrease your Button's border, either by using the up/down arrows or by typing the desired number directly into the area next to the arrows.

  • Corner Radius
    Finally, the Corner Radius option allows you to choose how rounded your Button's border corners will be. You can, once again, set this using the up/down arrows or, alternatively, by just typing the desired value in the area next to the arrows.


If you select 
Fit to Text, your Button's width will be dependent on, and change accordingly to, the text. You then have the following options:

  • Label Padding
    Set the Padding (in other words, the height) of you Button, using the up/down arrows or typing the desired value directly into the area next to the arrows.
  • Margin
    Use this option to specify how far 'in' (with regard to the Form's field) you want your Button to start. You can set this using the up/down arrows or by typing the desired number directly into the area next to the arrows.

You also have options with regard to your Button's Distance, Border Width and Corner Radius, as described above.

Finally, if you would like to get more even more creative with your Button, you could go for the third Button Width option, namely Custom Fit. When you select Custom Fit, you are presented with the following options to customize your Button:

  • Button Width
    Use the up/down arrows to select your desired Button width, or type the desired number directly into the area next to the arrows.
  • Button Height
    U
    se the up/down arrows to specify your Button's height, or simply type the number directly into the area next to the arrows.

You also have the options for your Button's Margin, Distance, Border Width and Corner Radius, as described previously.

Happy Button designing!!!