How to add a mailto: link to a button

[tranquilweaves]

Hi I really need help with making a button on my contact page a mailto: button that when it is clicked takes the customer to compose an email with my email address in the recipient place. Please help! 

[mrashid]

Hi @tranquilweaves use code 
mailto:someone@example.com

[tranquilweaves]

@mrashid yes but how to I add this to the button? It is not an option to add the button currently, I am using DAWN theme, How can I add it to the button?

[mrashid]

@tranquilweaves please share screenshot where you want to add
and share email address

[tranquilweaves]

@mrashid  I want it to be linked to the button on my contact page and my email address is tranquil.weaves@gmail.com

[mrashid]

@tranquilweaves  now open customization and enter link 

mailto:tranquil.weaves@gmail.com

 after enter link then select link on top like in screenshot 

[tranquilweaves]

@mrashid it doesnt work when I do this for some reason it does not work, in the screenshot below you can see when I click the button all that happens is in the left bottom corner my email address shows

[mrashid]

@tranquilweaves  oh , 

Now we need to edit the code .

[tranquilweaves]

@mrashid I now understand it is working on my phone but not the desktop is there some quick code I can add myself to make it work for desktop? 

[mrashid]

@tranquilweaves is it possible for you to add me as a staff?

[tranquilweaves]

@mrashid I edit all the code myself cause I need to know the changes made to my site, most people here give code in the forum so we can try it ourselves, is there any code you can suggest I try for this? 

[mrashid]

@tranquilweaves okay great 

Give me 5 minutes 

[tranquilweaves]

@mrashid thank you, I will wait 5 minutes 😊

[mrashid]

@tranquilweaves section name?

[tranquilweaves]

@mrashid the page name is Contact

[mrashid]

@tranquilweaves 

{%- when 'buttons' -%}
<div
class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}"
{{ block.shopify_attributes }}
>
{%- if block.settings.button_label_1 != blank -%}
<a
{% if block.settings.button_link_1 == blank %}
role="link" aria-disabled="true"
{% else %}
href="{% if block.settings.button_link_1 contains 'mailto:' %}{{ block.settings.button_link_1 }}{% else %}mailto:{{ block.settings.button_link_1 }}{% endif %}"
{% endif %}
class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label_1 | escape -}}
</a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
<a
{% if block.settings.button_link_2 == blank %}
role="link" aria-disabled="true"
{% else %}
href="{% if block.settings.button_link_2 contains 'mailto:' %}{{ block.settings.button_link_2 }}{% else %}mailto:{{ block.settings.button_link_2 }}{% endif %}"
{% endif %}
class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label_2 | escape -}}
</a>
{%- endif -%}
</div>

replace this code

[tranquilweaves]

@mrashid please could you paste it in the code format so I can copy it and paste it into that section? Right now if I copy and paste was you have written it pastes in a straight line and does not work, rather than like in the screenshot where it is staggered

[tim]

It could be that your browser does not know how to proceed with this type of links or maybe a popup blocker (especially if you're trying in Customizer)... Try on a different computer/ browser. 

But it works on my copy of the Dawn and does not require any extra code.