How To Use Buttons On Growform

With Growform, it's easy to create forms with beautiful, clean buttons:

How to add buttons to your Growform form

To add buttons to your form, just choose "Buttons" under "Simple fields" when adding a new field:

Migrating from buttons created before July 2023

To make use of the new button types, convert your button type to "rectangle" or "square" under style:

You may wish to also enable shadows on your form to ensure your buttons stand out and to ensure a clean, modern look:

Changing the button type

To change the button type, select your buttons and choose "rectangle" or "square" under "style".

There are 2 types of buttons:

Rectangle: These are the default setting, and allow for more options to be shown at once. Rectangle buttons are arranged 2 per row as standard, and allow for anywhere between 2 and 20+ choices. On mobile, these buttons can stack to be as usable as possible.
Square: These are suitable for more visual forms, and are suitable for larger images. These buttons can enlarge to 1 button per row on mobile devices, to keep the images large and vibrant.

For layout inspiration, check out our templates library, which has been updated to make full use of both button types.

Hiding the field name

Many users prefer to hide the field name on buttons, finding decorative paragraph or headers above the buttons provides for more flexibility:

Button options

Buttons per row: This defines how many buttons per row there are on desktop view (defined as screens larger than the form's width). 2 buttons per row is usually a good starting point.
Buttons per row (mobile): This defines how many buttons will be shown per row on smaller devices (where the screen is smaller than the form's width). 1 button per row usually provides good usability.
Show controls*: This option shows a radio button ( shown as a circle) or a checkbox (shown as a square) depending on whether your buttons support multiple choice or not. This setting impacts most configurations, but won't have an impact on square buttons with images, as these buttons do not have a control.
Spacing: The amount of space in between the buttons. 20px is a sensible value, but some users may wish to compress buttons slightly.
Compress buttons on mobile (rectangle only): This option "stacks" buttons when shown on a smaller screen. This setting overrides the "spacing" option if it is in place, instead reducing the spacing to zero for best usage of the available space.
Image sizing (rectangle): Image sizes are denoted by a "width" value in pixels, which allow for an image to be placed at the left-hand side of the button as a thumbnail. We will attempt to show an image 2.5x larger for compatibility with retina screens, so you should provide a large image if possible.
Image sizing (square): Rather than being defined as a pixel size, these images take up a percentage of the button. We usually recommend starting from 100%, and then enlarging the image until the canvas is completely filled, with no gaps.
Image only mode (square): This allows you to hide the labels, for a purely visual selection experience.

Styling with theme settings

It's possible to adjust every color used in the button in "theme settings" (the purple "Theme" button in the top-right corner of the builder):

If you are changing settings but cannot see the impact, you should check that you're changing the settings for the correct button type: square and rectangle buttons have different theme settings.

Button classNames (for Google Tag Manager or CSS):

As well as theme settings, it's also possible to style buttons with custom CSS - or use classNames to target individual buttons and fire tags in Google Tag Manager as a result.

Two useful CSS classes are as follows:

.btn - Targets all buttons in the form

.buttons_419390411041909_btn_1 - Targets button 1, where "buttons_419390411041909" is the field name

For more ways of targeting buttons right-click your button in Google Chrome and choose "Inspect element", or contact Growform support.