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 elements to add useful things like headings, paragraphs, images, etc. 😎

This article provides some details on how to use a certain type of display element 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.

To create a button we recommend using an HTML block display element. This is the most powerful display element 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 elements.

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 element, the theme's button styling will be applied to the link on the storefront. The screenshot below shows an example of how the new element looks on the storefront:

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

<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.

<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!

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