How do I add a big beautiful "ACCEPT" button on quotes?

Developer Support CMS Development
1

I’m designing my own quotes templates.

I would love to have a big “ACCEPT” button at the end that customers could click to accept the quote.

No digital signing. Just a button.

Any solution to this?

2

Hi @KJonsson,

I’d create a custom module for Quotes like this

{% set href = module.link.url.href %}
{% if module.link.url.type is equalto "EMAIL_ADDRESS" %}
	{% set href = "mailto:" + href %}
{% endif %}
<a href="{{ href }}" {% if module.link.open_in_new_tab %}target="_blank"{% endif %} {% if module.link.rel %}rel="{{ module.link.rel }}"{% endif %} class="myCustomButton">
	{{ module.button_label }}
</a>

this contains:

  • link function called “link” (by default it’s “link_field”)
  • simple text element called “button label”

If you want to pull the styling from the quote CSS file enter the existing button classes as class (in this example it’s “myCustomButton”). If you want to style it in the quote - add some styling functions to the module and change the code to this

{% require_css %}
<style>
.myCustomButton{
background:{{module.style.background_color.css}}
color: {{module.style.text_color.css}}
{{module.style.spacing.css}}
}
</style>
{% end_require_css %}

{% set href = module.link.url.href %}
{% if module.link.url.type is equalto "EMAIL_ADDRESS" %}
	{% set href = "mailto:" + href %}
{% endif %}
<a href="{{ href }}" {% if module.link.open_in_new_tab %}target="_blank"{% endif %} {% if module.link.rel %}rel="{{ module.link.rel }}"{% endif %} class="myCustomButton">
	{{ module.button_label }}
</a>

This styling is just an example. You can find the whole style-fields documentation here

best,

Anton

3

Hey, so what would this button actually do? Would you mind explaining before I try it?

Thanks.