Customizing Button Blocks in a Signup Form

read
Last updated at:

Overview

Signup form buttons allow you to gather information about those browsing your site, subscribe them to your newsletter, and direct them to your product pages. In this article, we’ll run through the different settings within your form button blocks.

Button Block Settings

Buttons have many customization options to fit the needs of your website. Let’s dive into the different options you have when creating your button block.

  • Button Action
    The button action specifies what happens after someone clicks on the button. You can choose whether you would like the button to close the form, submit the form, go to a specific URL, or subscribe via SMS LINK.
  • Submit Form
    Submitting a form stores the new email address and associated values in your Klaviyo account and adds new subscribers to the list you specify. Once a subscriber submits a form, you can choose whether they are redirected to the form's Success Message or a specific URL. Alternatively, you can close the form once they've submitted their information.
  • Close Form
    Closing a form allows browsers to close the form without submitting any information — similar to closing out of the form in the upper right corner. If an embedded form has a close form button on it, it will be closed. However, this will only take effect until the page is reloaded.
  • Go to URL
    A Go to URL button will bring browsers who click the button to a specific URL. This will count as submitting a form in terms of the behavior that you outline in the Behaviors tab. For example, if you choose never to show a form to someone after they submit it, this same behavior will apply to a Go to URL button.
  • Subscribe via SMS
    If you use Klaviyo to send text messages to your subscribers, you may want to create a click-to-text form in which mobile browsers can subscribe to your default SMS list by tapping a button. Please note that this option will automatically change your form to display on mobile only. If you select Subscribe via SMS, you will then be able to specify the opt-in keyword and message.

    The opt-in keyword is the word that someone must text to your destination number in order to be added to your account’s SMS Subscription list. This is configured at the account-level.

    The opt-in message is the copy that will be sent in the confirmation text message. By default, this will read “Send this text to subscribe to <organization_name>!”, but you can configure the message content. This field allows up to 160 GSM-7 characters (1 message) only. Special characters, including emojis, are not valid.

Submit Hidden Fields

Hidden fields are additional properties that will be added to a subscriber's profile in Klaviyo. This allows you to track viewers who interact with your form. By default, all new signups must have a $source property — this is what identifies how they were added to your account. You can analyze how people come into your account in the List Growth Report.

Additionally, you can configure this property name (e.g. Newsletter Popup). Similar to text inputs on forms, if you add additional hidden fields for properties that already exist in someone's profile, they will be overwritten by the new value when they submit the form. For example, if you’re using a form to gather collection preferences, and a customer has selected previously that they are interested in your men’s collection, if you have a form pointing to your women’s collection with a hidden field for interest in your women’s collection, this property will be overwritten. This option is only available for buttons that submit the form, not close form, go to URL, etc.

Button Styling

You can use the following settings to customize your buttons to match your branding and the style of your form.

  • Text
    Configure what you want the button to say. 
  • Background Color
    Configure the color of the button. Here, you can also set the opacity of the button -- if you would like, you can set the opacity to 0% to have the button background be transparent by dragging the opacity slider to the far left.
  • Hover Color
    Optionally, configure the color the button will turn when someone hovers over it. If you don't specify a hover color, it will default to the color of the button itself. You can also select the opacity for a button background's hover color.
  • Border Radius
    Configure whether you would like your button to be rectangular, round, or somewhere in between.
  • Border Thickness
    If a button has a border, this is the number of pixels it will span.
  • Border Style
    Choose if you would like your button to have a border and, if so, whether it will be solid, dashed, or dotted. This is also where you select the color of a button's border.
  • Width
    When you select Stretch Width, the button will stretch to take up all the available space in the row. If you select Fit Width, the button will shrink to the minimum space necessary.
  • Text Color
    Configure the color of the text displayed on the button.
  • Font
    Select the font family and size displayed on the button.
  • Font Weight
    Select whether you would like the text to be in bold, italics, or underlined.
  • Letter Spacing
    Choose how far apart the letters are displayed in the button text.

Additional Resources

x
Was this article helpful?
1 out of 4 found this helpful