I am building email templates for Sendgrid. Is there a way to insert an if statement in the template that checks for existence of the variables coming from the server and displays or hides the row that shows that variable in the email?
SendGrid uses HandleBars for dynamic templates. To conditionally render something, you can use:
{{#if user.profile.male}}
<p>Dear Sir</p>
{{else if user.profile.female}}
<p>Dear Madame</p>
{{else}}
<p>Dear Customer</p>
{{/if}}
Related
Situation:
I am a HTML newbie who gets by through Google-fu and I am in charge of a tool which sends HTML email to customers.
I have been asked by our customers (Because pressing reply and typing a single word is really difficult) if I can create buttons on the emails I send which allows them a 1-click reply.
Conditions:
The reply has to come from their own email address
It needs to go back to the email address that sent the email (We have one template email which can be sent from several addresses)
It needs to maintain the same subject line (It contains a reference number to ensure the email is processed correctly when received)
Must be created using inline HTML(4 or 5) only (Restrictions of the system that generates the email)
Ideally will send the reply immediately (And show them as much in some manner), but opening up a new email already pre-populated is an acceptable alternative
I have struggled to find much at all on this, which leads me to think that it is not possible.
If using tiny bit of pure javascript, that does not need any external library on your website.
This code goes to your website where you want your check to be made.
<script>
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}
document.addEventListener("DOMContentLoaded", function(event) {
if(getURLParameter('answ') == 0) document.getElementById('answered_yes').remove();
else if(getURLParameter('answ') == 1) document.getElementById('answered_no').remove();
else {
document.getElementById('answered_yes').remove(); document.getElementById('answered_no').remove();
}
});
</script>
<div id="answered_yes">
THIS IS HOLDER FOR YES ANSWERER //Put your wanted info hare if he answered yes
</div>
<div id="answered_no">
THIS IS HOLDER FOR NO ANSWERER //Put your wanted info hare if he answered no
</div>
Now on email links put these type of links.
<a href="yourwebsite.com/index.php?answ=0" target="_blank" >ANSWER NO</a>
<a href="yourwebsite.com/index.php?answ=1" target="_blank" >ANSWER YES</a>
What this does is simply puts a parameter on a link called answ that has 0 or 1 by my setting and once your website gets a request it checks which parameter is it 0 or 1. If its 0 that means we remove the div that says yes, otherwise do the same with no div.
with only html it is not possible unless you would give him different links as in.
<a href="yoursite.com/he_answered_no.html" >No</a>
<a href="yoursite.com/he_answered_yes.html" >Yes</a>
And put your contents inside there.
However if you are going to use this script in your website, put that code somewhere in the body, its not perfect, but it will do the job. Then put your information on yes div and on no div, its going to remove whatever div he answers too.
But like I mentioned, with purely HTML it is not possible only adding some bits with other languages, pure javascript should work on any HTML site, unless you are trying to add the code to some kind of platform that blocks any ongoing scripts.
You can just use a "mailto:" link similar to this:
Email Us
Here's the link with more info: https://css-tricks.com/snippets/html/mailto-links/
It will open up a prepopulated email with the "to" address, subject line, and body text already inserted. People will be able to modify the text if they want or just click send. You would need to some way to dynamically change the subject line to the one the customer received, but your email tool probably has that capability.
I am working on app in elixir. It sends email to clients. I am using bamboo library for sending emails.
So far, emails are working fine. But now, I am trying to send emails using templates.
Everywhere i see in the bamboo documentation is using
bamboo.phoenix .
I am not using phoenix for handling requests. I am using a library called plug. Is there a way to send templates in email without phoenix ??
Adding answer to this post with the help #JustMichael comment.
Directory structure -
/priv
/static
/test.html.eex
Function used :
new_email
|> to("vivek29vivek#gmail.com")
|> from(#from_email)
|> subject("test")
|> html_body(EEx.eval_file("priv/static/mail_templates/#test.html.eex",[foo: "bar"])) //this will render the template.Also can pass variables
test.html.eex
<h3>Foo: <%= foo %></h3>
But , we cannot add css just by adding <link rel="stylesheet" href="styles.css"> . I guess, There is a need for static server.
Do comment if there is another way to add css apart from inline css.
Our Magento 2.1.5 site is ready to translate all email templates.
But, when a customer creates order, he got non-translated order confirm email immediately. To check this issue, when we click "send email" tab on order view page on admin, we get the correctly translated email.
Send order
What was wrong?
We found this email template which was just order_new.html on theme folder.
app\design\frontend\[vendor]\[theme]\Magento_Sales\email\order_new.html
Also, this template was assigned on vendor.
vendor\magento\module-sales\etc\email_templates.xml
<template id="sales_email_order_template" label="New Order" file="order_new.html" type="html" module="Magento_Sales" area="frontend"/>
Is there any solution?
I solved this issue successfully.
This is solution.
Original:
#subject Your {{var store.getFrontendName()}} order confirmation #
My Solution:
#subject {{trans "Your %store_name order confirmation" store_name=$store.getFrontendName() }}#
In some forms, Chrome autofill prompts with Credit card autofill.
EDIT:Adding screenshot. This is not the same as browser autocomplete. You need not have entered the value in the same form before.
How should I write my HTML form so the browser detects these as Credit card fields and triggers this behavior?
An example of it working with a Stripe form would be ideal.
This question is pretty old but I have an updated answer for 2019!
You can now tell your browser which fields are for credit card info just by naming the <input> correctly.
The following answer is from my original answer from here: https://stackoverflow.com/a/41965106/1696153
Here's a link to the official current WHATWG HTML Standard for enabling autocomplete.
Google wrote a pretty nice guide for developing web applications that are friendly for mobile devices. They have a section on how to name the inputs on forms to easily use auto-fill. Eventhough it's written for mobile, this applies for both desktop and mobile!
How to Enable AutoComplete on your HTML forms
Here are some key points on how to enable autocomplete:
Use a <label> for all your <input> fields
Add a autocomplete attribute to your <input> tags and fill it in using this guide.
Name your name and autocomplete attributes correctly for all <input> tags
Example:
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="name#example.com" required autocomplete="email">
<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="name#example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">
How to name your <input> tags
In order to trigger autocomplete, make sure you correctly name the name and autocomplete attributes in your <input> tags. This will automatically allow for autocomplete on forms. Make sure also to have a <label>! This information can also be found here.
Here's how to name your inputs:
Name
Use any of these for name: name fname mname lname
Use any of these for autocomplete:
name (for full name)
given-name (for first name)
additional-name (for middle name)
family-name (for last name)
Example: <input type="text" name="fname" autocomplete="given-name">
Email
Use any of these for name: email
Use any of these for autocomplete: email
Example: <input type="text" name="email" autocomplete="email">
Address
Use any of these for name: address city region province state zip zip2 postal country
Use any of these for autocomplete:
For one address input:
street-address
For two address inputs:
address-line1
address-line2
address-level1 (state or province)
address-level2 (city)
postal-code (zip code)
country
Phone
Use any of these for name: phone mobile country-code area-code exchange suffix ext
Use any of these for autocomplete: tel
Credit Card
Use any of these for name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
Use any of these for autocomplete:
cc-name
cc-number
cc-csc
cc-exp-month
cc-exp-year
cc-exp
cc-type
Usernames
Use any of these for name: username
Use any of these for autocomplete: username
Passwords
Use any of these for name: password
Use any of these for autocomplete:
current-password (for sign-in forms)
new-password (for sign-up and password-change forms)
Resources
Current WHATWG HTML Standard for autocomplete.
"Create Amazing Forms" from Google. Seems to be updated almost daily. Excellent read.
"Help Users Checkout Faster with Autofill" from Google in 2015.
From this answer https://stackoverflow.com/a/9795126/292060, it looks like Chrome is either matching a regex pattern on the field name, or the form is explicitly using the x-autocompletetype attribute, like this (This example uses "somename" to avoid mixing issues matching on the name):
<input type="text" name="somename" x-autocompletetype="cc-number" />
Practically, you could do both, picking a name that matches, and the x-autocompletetype:
<input type="text" name="ccnum" x-autocompletetype="cc-number" />
Do you have a view-source of the input box in your screenshot? That would show if it's matching on the name or on the x-autocompletetype attribute.
The answer I linked to has several links for more information; I didn't repeat them here.
Some other comments:
I know Chrome pops a question whether to save the credit card information (I don't), but I don't know if it is popping that question regardless of how it detected it. That is, I'm not sure if Chrome will autocomplete separate fields of credit cards along with other fields, or if it needs to save the whole thing as a credit card.
Your question was how to do it, not whether to. But from the comment in your question, I agree that you might not want to autocomplete the credit card fields. Personally I find it disconcerting when it happens, even knowing it's local in my browser (I especially feel this way about the CVV, and get a surprising amount of resistance when I report it). However, there are posts that find it frustrating when a customer wants to use it, has Chrome set up with credit cards, and a website blocks it.
Thanks #goodeye for directing me to the correct answer.
To trigger the Credit Card autofill,
SSL must be enabled on your form
Most variants of standard credit card field names should work if SSL is enabled.
Here is a link to the regexes Chrome uses to trigger detection
As of 04-12-2022 (from the link above)
/////////////////////////////////////////////////////////////////////////////
// credit_card_field.cc
/////////////////////////////////////////////////////////////////////////////
// ... snipped ...
const char kCardNumberRe[] =
"card.?number|card.?#|card.?no|cc.?num|acct.?num"
"|nummer" // de-DE
"|credito|numero|número" // es
"|numéro" // fr-FR
"|カード番号" // ja-JP
"|Номер.*карты" // ru
"|信用卡号|信用卡号码" // zh-CN
"|信用卡卡號" // zh-TW
"|카드"; // ko-KR
Chrome is using autocomplete attribute in inputs for autofill. This will probably be used by other browsers in future if not yet.
autocomplete's actual use is to say whether autocomplete is enabled or not by specifying autocomplete="off". But chrome uses the same for autofill.
Autofill and autocomplete are different, so don't get confused.
Autofill is what chrome uses to fill up forms from what is stored in your autofill settings in your chrome browser.
Autocomplete is what all browsers use to remember what you may have entered previously in the same form by suggesting values as you type. So when you use autocomplete="off" on an input, browser stops suggesting these values.
Coming back to the solution, for autofill to work use cc-number for card number, cc-name for card holder name, cc-csc for cvc and cc-exp for card expiry date in your autocomplete attribute.
Here is a sample that will be compatible with chrome autofill:
<div>
<label for="frmNameCC">Name on card</label>
<input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">
</div>
<div>
<label for="frmCCNum">Card Number</label>
<input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">
</div>
<div>
<label for="frmCCCVC">CVC</label>
<input name="cvc" id="frmCCCVC" required autocomplete="cc-csc">
</div>
<div>
<label for="frmCCExp">Expiry</label>
<input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">
</div>
If you have credit cards saved in your chrome browser right now, try clicking Run code snippet button above and you can see chrome autofill in action.
Source: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
Chrome also scans thru placeholders.
Example: <input placeholder='dd-mm-yyyy'/> will trigger it to become a credit card field.
I have a mostly "static" web site with no server-side code and just a little JavaScript. Now I would like to add a contact form. I do not care how I get the contact form data (so just writing this data to a text file in the server will be ok).
What is the simplest solution for this problem? How do people usually handle this?
I believe I can add some server-side code (PHP or something) to handle the form (and write the form data to a file, for instance) but I would prefer a client-side solution.
Use an external tool, they are commonly referred to as "formmailer". You basically submit the form to their server, and they send the form contents via mail to you.
If you don't want that, you have to do something server-sided: Storing data on the server, without having a server side program that accepts the data from the client, is just not possible.
You could install CouchDB and interface that from Javascript :) Everyone could use that then, too :)
The most easy PHP script that stores POST data on your harddisk:
<?php file_put_contents('/path/to/file', serialize($_POST) . "\n", FILE_APPEND); ?>
You can use Google Drive and create form with required fields. and embed code (which will be iframe) in your static web page.
You will be able to get submitted data in spreadsheet.
You can use qontacto . it is a free contact form you can add to any website. it forwards you the messages.
I set up the fwdform service for this exact need.
Just two simple steps to get your form forwarded to your email.
1.Register
Make an HTTP POST request to register your email.
$ curl --data "email=<your_email>" https://fwdform.herokuapp.com/register
Token: 780a8c9b-dc2d-4258-83af-4deefe446dee
2. Set up your form
<form action="https://fwdform.herokuapp.com/user/<token>" method="post">
Email: <input type="text" name="name"><br>
Name: <input type="text" name="email"><br>
Message: <textarea name="message" cols="40" rows="5"></textarea>
<input type="submit" value="Send Message">
</form>
With a couple of extra seconds you can spin up your own instance on Heroku.