below is my google apps script to display HTML form in the mail to the client and fetching response via web-service. this works fine when my client is using Gmail account and form is displaying perfectly nice and also all the events are working correctly. but the problem occurs when my client tries this same with outlook account the <textarea>, <button> (these tags are not displaying). Can anyone tell me what's the problem? for outlook account is there any more settings we need to do?
function sendAutoReply(e)
{
var myemail = "viral.shah#searce.com";
var email = "";
var subject = "Your Request Status Message..";
var html =
'<body>' +
'<table border="1">'+
'<tr>'+
'<td>'+
'<label> Comment </label>'+'<br>'+'<br>'+
'</td>'+
'</tr>'+
'<tr>'+
'<td>'+
'<textarea rows="5" cols="100"/>'+'<br>'+'<br>'+
'</td>'+
'</tr>'+
'<tr>'+
'<td>'+
'<input type="button" value="accept"/>' +
'</td>'+
'<td>'+
'<input type = "button" value = "Decline"/>'+
'</td>'+
'</tr>'+
'</table>'+
'</body>';
try {
for(var field in e.namedValues) {
if (field == 'Subject') {
subject += e.namedValues[field].toString();
}
if (field == 'Email') {
email = e.namedValues[field].toString();
}
html += field + ' : '
+ e.namedValues[field].toString() + "\n\n";
}
MailApp.sendEmail(email, subject, html, {replyTo:myemail, htmlBody:html});
}
catch(e){
MailApp.sendEmail(myemail, "Error in Auto replying to contact form submission. No reply was sent.", e.html);
}
}
Thanks in Advance :)
Outlook doesn't support the <button> tag:
The HTML tags that Outlook supports
Try using <input type="button"> instead of and it should work.
As for <textarea>, it's technically supported, but there appear to be lots of people who complain about it not working. That document says in one place that it supports the "cols" attribute and in another place that it does not, so try removing that perhaps. Also, Outlook is finicky enough about HTML that I'd try explicit closing tags like <textarea></textarea> instead of the shorthand style.
No, I'm telling it won't support any HTML tags into outlook email client
Please Go through this Forum Link
And this MSDN link
I think these articles will make clear thoughts about this.
for outlook 2007 mail client not displaying forms there. so, this one is not possible in outlook mail client. check the given link.
Hope this one helps you.
If the button action is simple enough that can be equivalent to visiting an url, you can add a message like the following:
Confirm email through this link if confirm button is unavailable
https://www.example.com/confirm/av87hfua7ImAToken4vf8a98jao5ia
Those who see the button will also see this sentence, but since this is a fairly common practice it won't cause much noise.
Related
I have a problem with my HTML-Website.
I would like to have a text field which generates a link after entering and pressing a button from the input. For example, in the text field is "development" and by pressing the button should my browser go to "www.laurensk.at/development".
I don´t have the code for that...
I've understood your question, you can do it using JQuery or Javascript
$("#btnGoto").click(function(){
window.location="www.laurensk.at/"+$("#txtPage").val();
});
I hope this will help you.
You can use the addEventListenerfunction to generate the link when there is a new input in the field.
Example:
var path = document.getElementById("path")
var link = document.getElementById("link")
function makeLink() {
link.href = "http://my.web.site/" + path.value
link.innerHTML = "http://my.web.site/" + path.value
}
path.addEventListener("keyup", makeLink)
<input id="path"/>
<br>
<a id="link" target="_blank"></a>
Documentation: EventTarget.addEventListener() - Web APIs | MDN
All I ever wanted is my DropDownList to be special. :(
I can write just names, but that won't be as intresting. So I tried to add images, like so:
// Somewhere in the code...
ListItem item = new ListItem();
item.Value = // something
item.Text = "<img src=\"" + <AnImagePathIGetFromTheDatabase> + "\">";
<MyDropDownlist>.Items.Add(item);
However the evil thing escapes the text in a list automatically, like so:
<img src="https://41.media.tumblr.com/bcb96f4a4c46a1001118ee216d7abacf/tumblr_mgfhbngsDl1r58qimo1_500.png">
So I get text instead of an image. How can I overcome this?
EDIT: Using Lajos' solution, I've got to a situation where I inspect the selection element, And I get the following :
<img src="http://i.somethingawful.com/u/robtg/Fiesta/f05.jpg" alt="monster" height="42" width="42">
Which is pretty much what I was looking for. Sadly, in the page source, I get the following:
<option value="MeaninglessImp" class="imageconverter">http://i.somethingawful.com/u/robtg/Fiesta/f05.jpg</option>
The list itself shows 2 empty cells. The inspector says the pictures have been scaled down to 0x0.
Fiddle: here.
Why does that happen?
You can set the Text to contain the source and not show them until the page is loaded. You can implement a Javascript library which replaces src text with images in your list. That should solve the problem.
// Somewhere in the code...
ListItem item = new ListItem();
item.Value = // something
item.Text = <AnImagePathIGetFromTheDatabase>;
listItem.Attributes.Add("class", "imageconverter");
<MyDropDownlist>.Items.Add(item);
And in Javascript you need something like:
$(function() {
$(".imageconverter").each(function() {
$(this).html('<img src="' + $(this).text() + '">');
});
});
I've created a html page and in that page I have forms, drop down lists and radio tags and tables. from one button I wanted to reset everything on the page when its clicked upon.
you can use the following JavaScript method to clear the HTML input file control's value:
function clearFileInputField(tagId) {
document.getElementById(tagId).innerHTML =
document.getElementById(tagId).innerHTML;
}
Or, if refactored in jQuery, this should work as well:
$("#control").html($("#control").html())
Or, for textbox type
var elements = document.getElementsByTagName("input");
for (var ii=0; ii < elements.length; ii++) {
if (elements[ii].type == "text") {
elements[ii].value = "";
}
}
You could use a reset button, please refer to this page for more information -> LINK
But if you have multiple form on the page you can write a javascript function to reset all of them like this:
$('#yourResetButton').click(function(){
$('form').each(function(idx, obj){
obj.reset();
});
});
You could also refresh your page as stated in other answers but in my opinion that could be very disappointing for your users to see that the page is refreshing
A little working fiddle as example
You can reset with reset however you won't be able to reset your inputs that doesn't included into forms, otherwise you can clear inputs within your forms like:
$('form').each(function (index, obj) { obj.reset(); });
Example
<input type="button" onclick="function() {window.location.href = window.location.href;}" name="Reset" value="Reset">
I have a button that is accessed by a keyboard shortcut but the users have to press ALT+Z. Is there anyway to let the users access the button by simply pressing Z (or some other key) without having to press ALT?
Many thanks,
<input style="display:none;" id='stopButton1' type="button" value="Z" onclick="stop('z')" accesskey="z" />
No that is not possible in pure HTML.
JavaScript is needed: Use the keypress event to detect specific character codes, and call some function.
We can use jquery 2.1.3 plugin and keypress with ASCII value
JS:
$(document).keypress(function (e) {
if (e.which == 72 || e.which==104) {
window.location.replace("http://soluvations.in");
}
});
HTML:
<p>Press H/h to go to Home Page</p>
Here is
JSFIDDLE link
I landed on this page looking for a quick way to make accesskey operate without the modifier (alt) key.
If anyone else is looking for the same, I have added this to my page:
$(document).on('keydown', function(e) {
var link = $("a[accesskey=" + e.key + "]");
if (link.length) {
window.location = link.attr('href');
}
});
This will capture keypresses, and if there is a link with that accesskey set, it will redirect to its href.
I have a couple of mailto links in a HTML document.
<a href="mailto:etc...">
Can I insert HTML formatted body in the mailto: part of the href?
Mail me
Note that (2016) in iOS, it is perfectly fine to add <i> and <b> tags for simple italic, bold formatting.
As you can see in RFC 6068, this is not possible at all:
The special <hfname> "body" indicates that the associated <hfvalue>
is the body of the message. The "body" field value is intended to
contain the content for the first text/plain body part of the
message. The "body" pseudo header field is primarily intended for
the generation of short text messages for automatic processing (such
as "subscribe" messages for mailing lists), not for general MIME
bodies.
Whilst it is NOT possible to use HTML to format your email body you can add line breaks as has been previously suggested.
If you are able to use javascript then "encodeURIComponent()" might be of use like below...
var formattedBody = "FirstLine \n Second Line \n Third Line";
var mailToLink = "mailto:x#y.com?body=" + encodeURIComponent(formattedBody);
window.location.href = mailToLink;
No. This is not possible at all.
It's not quite what you want, but it's possible using modern javascript to create an EML file on the client and stream that to the user's file system, which should open a rich email containing HTML in their mail program, such as Outlook:
https://stackoverflow.com/a/27971771/8595398
Here's a jsfiddle of an email containing images and tables: https://jsfiddle.net/seanodotcom/yd1n8Lfh/
HTML
<!-- https://jsfiddle.net/seanodotcom/yd1n8Lfh -->
<textarea id="textbox" style="width: 300px; height: 600px;">
To: User <user#domain.demo>
Subject: Subject
X-Unsent: 1
Content-Type: text/html
<html>
<head>
<style>
body, html, table {
font-family: Calibri, Arial, sans-serif;
}
.pastdue { color: crimson; }
table {
border: 1px solid silver;
padding: 6px;
}
thead {
text-align: center;
font-size: 1.2em;
color: navy;
background-color: silver;
font-weight: bold;
}
tbody td {
text-align: center;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<td><img src="http://www.laurell.com/images/logo/laurell_logo_storefront.jpg" width="200" height="57" alt=""></td>
<td align="right"><h1><span class="pastdue">PAST DUE</span> INVOICE</h1></td>
</tr>
</table>
<table width=100%>
<thead>
<th>Invoice #</th>
<th>Days Overdue</th>
<th>Amount Owed</th>
</thead>
<tbody>
<tr>
<td>OU812</td>
<td>9</td>
<td>$4395.00</td>
</tr>
<tr>
<td>OU812</td>
<td>9</td>
<td>$4395.00</td>
</tr>
<tr>
<td>OU812</td>
<td>9</td>
<td>$4395.00</td>
</tr>
</tbody>
</table>
</body>
</html>
</textarea> <br>
<button id="create">Create file</button><br><br>
<a download="message.eml" id="downloadlink" style="display: none">Download</a>
Javascript
(function () {
var textFile = null,
makeTextFile = function (text) {
var data = new Blob([text], {type: 'text/plain'});
if (textFile !== null) {
window.URL.revokeObjectURL(textFile);
}
textFile = window.URL.createObjectURL(data);
return textFile;
};
var create = document.getElementById('create'),
textbox = document.getElementById('textbox');
create.addEventListener('click', function () {
var link = document.getElementById('downloadlink');
link.href = makeTextFile(textbox.value);
link.style.display = 'block';
}, false);
})();
I have used this and it seems to work with outlook, not using html but you can format the text with line breaks at least when the body is added as output.
Email me
Some things are possible, but not all, say for example you want line breaks, instead of using <br />use %0D%0A
Example:
<img src="images/email.png" alt="EMail PDF Brochure" />
It is worth pointing out that on Safari on the iPhone, at least, inserting basic HTML tags such as <b>, <i>, and <img> (which ideally you shouldn't use in other circumstances anymore anyway, preferring CSS) into the body parameter in the mailto: does appear to work - they are honored within the email client. I haven't done exhaustive testing to see if this is supported by other mobile or desktop browser/email client combos. It's also dubious whether this is really standards-compliant. Might be useful if you are building for that platform, though.
As other responses have noted, you should also use encodeURIComponent on the entire body before embedding it in the mailto: link.
Thunderbird supports html-body: mailto:me#me.com?subject=Me&html-body=<b>ME</b>
Whilst it may not be possible within the parameter of the URL, there is a cheeky solution which allows full HTML. The concept is that you have a hidden element on the page (I am using Bootstrap and Jquery in the example below) which is temporarily revealed and the HTML copied (as per here: How to copy text from a div to clipboard). Following that, you redirect the user to the Mail link so in effect all they then have to do is hit Paste within their designated mail program. I've only tested this on Linux/Thunderbird but the paste also works into Gmail web.
<div id="copyEmailText" class="d-none"><p><strong>This is some HTML</strong>. Please hit paste when your email program opens.</p>
function copyDivToClipboard(element) {
var range = document.createRange();
range.selectNode(element);
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand('copy');
window.getSelection().removeAllRanges();// to deselect
}
$('#copyEmail').on('click',function(){
$('#copyEmailText').toggleClass('d-none');
copyDivToClipboard($('#copyEmailText')[0]);
window.location.href = 'mailto:?subject=Email subject text';
$('#copyEmailText').toggleClass('d-none');
})
Anybody can try the following (mailto function only accepts plaintext but here i show how to use HTML innertext properties and how to add an anchor as mailto body params):
//Create as many html elements you need.
const titleElement = document.createElement("DIV");
titleElement.innerHTML = this.shareInformation.title; // Just some string
//Here I create an <a> so I can use href property
const titleLinkElement = document.createElement("a");
titleLinkElement.href = this.shareInformation.link; // This is a url
...
let mail = document.createElement("a");
// Using es6 template literals add the html innerText property and anchor element created to mailto body parameter
mail.href =
`mailto:?subject=${titleElement.innerText}&body=${titleLinkElement}%0D%0A${abstractElement.innerText}`;
mail.click();
// Notice how I use ${titleLinkElement} that is an anchor element, so mailto uses its href and renders the url I needed