Versatile 'Display fields'

The form builder in Customer Fields offers multiple powerful tools at your disposal that can be used to customize your form, including; a built-in CSS editor, the ability to add unique CSS classes to different fields, and display fields to add useful elements for things like headings, paragraphs, images, etc. 😎

This article provides some details on how to use a certain type of display field to create a button with a hyperlink. This is helpful if you'd like to show a prominent call to action on your form that will link customers to another URL. The example used in this article is intended to prompt existing customers to log in to their account instead of registering for a new account.

Use an HTML block

To create a button we recommend using an HTML block display field. This is the most powerful display field for custom form elements since it gives you full control over the markup. See this help article if you want to learn more about the app's display fields.

Button markup

For the button markup, we suggest using an a tag with some styling to make the link look like a button. The example shown in the screenshot below uses a common class of btn, and this happens to be the class that most of Shopify's free themes use to style buttons. Utilizing the theme's existing button class will ensure that the theme will apply styling to the link so that it looks like a button. Here's an example of how to set this up in the form builder:

Since we've used the theme's button class (btn) for the content of the HTML field, the theme's button styling will be applied to the link on the storefront. The screenshot below shows an example of how the new field looks on the storefront:

Markup examples

Here are some examples of the code that you could use when creating a button hyperlink with the HTML block field. Just remember to change the URL and link title as needed 🤗

Assign a class directly to the a tag:

<a class="btn" href="/account/login">Log In</a>

Note: You can swap out the btn class if your theme uses a different class for buttons, otherwise it might be easier to use some inline styling instead.

Add inline styling to the a tag:

<a style="padding:15px; background-color:grey; color:white; border-radius:3px" href="/account/login">Log In</a>

Note: The example above includes some generic styling for a button using a grey background and white text. Of course, you're welcome to change this styling as needed!

Have questions or need assistance?

Please reach out to our Support team via chat or email and we'll be happy to assist!

Did this answer your question?