I´m using contact form 7 (wordpress, contact form) as a order page
for products. But I´m interested in styling the HTML-Mail-template in the same 3-column style
as the picture. Is there any easy way to do that?
I think the two previous answers misunderstood the question. Johny is asking how he can edit the html email that gets sent out by contact form 7 either to himself or the person who completes the form.
To do this you need to select the option of "Use HTML content type" in order to use html in the email. This is on the "mail" section of CF7.
Then the easiest way to style the html email template is using a table.
First start with a blank html template with a XHTML doctype:
StackOverflow Email Template
Then you can add any html and information you need to, to get it looking the way you want it:
For instance it is probably easier to start with no margin or padding so you add some style to the body tag:
<body style="margin: 0; padding: 0;">
Then you need to add all your style inline in the table as there are no style sheets sent with your email. You could also create an inline style section in the section as with normal html.
so I would do this for your example:
<table align="center" border="0" cellpadding="2" cellspacing="0" width="100%" bgcolor="#ffffff" style="border-collapse: collapse; font-family: Arial,sans-serif; font-size:1em;" >
Once that is all set you need to add the cells to your table.
As an example your first and second row could be something like this:
<tbody>
<tr>
<td colspan="6">To: [your-name]</td>
</tr>
<tr>
<td>Falt Utan Flask:</td>
<td>[Input-One] Back</td>
<td>Falt Utan Flask:</td>
<td>[Input-Two] Back</td>
<td>Set Datum:</td>
<td>[Date-324]</td>
</tr>
</tbody>
Each will be a new row, and each section will be a new cell. Then just keep populating and building out your table to display the way you want it.
You can add inline style into the or elements as you need it or you can add the inline style in the area as mentioned before.
This is what i needed to do for a website using the contact form 7 plugin. I found these to tutorials very helpful.
Tut 1
Tut 2
Hopefully I have not misunderstood the question myself, it is a bit ambiguous, but it was the closest one I found to what I was looking for.
Yes you can do it, you need to add some css to your existing theme file, as plugin files modification is not recommended, as i can see you have use the text boxes, you can do something like this
css style
.wpcf7-text { width:150px !important; }
.wpcf7-text is the text box class in contact form 7
in form settings
your name- [text- text-20] your addres- [text- text-30]
There are two ways
(1) Over-riding CSS of Contact Form-7 itself. This can be done through .wpcf7-[inner class] then your CSS code.
[The Easy Way]
(2) You can use this plugin https://wordpress.org/plugins/contact-form-7-style/ to style contact form-7. It has variety of options. It is not perfect though but surely a solution.
Hope this helps!
Related
A few months ago I started doing some research on HTML emails (never done those before). I read that Gmail started to support embedded CSS or "block" CSS as of September, '16. Since that time I have been trying off and on to figure out how to get Gmail to render the embedded CSS when I receive my test msgs. They look fine when I am composing them. I used this YouTube video to learn how to insert the markup in the compose window:
https://youtu.be/QprIvjZ5TYI?t=2m44s
Replacing the entire div the way the video said didn't work, but I tried replacing just the dummy text itself and when I clicked back into the compose window, the css & html were rendered perfectly. Screencap below:
http://imgur.com/a/cPi2B
Problem is when I sent it and looked at the incoming email, the style rules were ignored. Itried to post another screencap but SO is telling me I need reputation of 10 to do so and I'm a lowly 1. Anyway, trust me that all of the text on the incoming message was black.
In my first attempt I used the WHOLE html file, from .... Then I tried .... Same results. Then I tried expanding the DIVs I was replacing, replacing the parent DIV instead of the original, then its parent's DIV... That got me nowhere. Used both Firefox and Chrome, same on both. I'm out of ideas. It seems other people are getting embedded CSS to work. Any help greatly appreciated.
Thanks,
- DK
Generally speaking if you're about to send HTML e-mails you should do that using some external mail software (like Microsoft Outlook, Mozilla Thunderbird, Apple Mail etc.) and send it via SMTP.
In your case it will work, if your styles are inline, so you can send something like:
<p style="color: blue">This is a blue text</p>
But there is no way of sending something like:
<p>This is a blue text<p>
And attaching external .css file, because you can't attach CSS files in e-mails this way.
You can always convert your CSS and HTML into HTML with inline CSS using some minifiers, like here or here or here.
If you're 100% sure you're providing right HTML with inline CSS then you should save your HTML e-mail as a draft and then send it from your Drafts view. It works for me:
Unforunately you can't send HTML mails directly, but after saving it as a template / draft it will be processed by Gmail and then it should work as expected.
Hope it helps!
In your HTML file just add the <style> in a standard place within the <head> and it should work as expected.
Litmus did a really good write up of the Gmail responsive update, it's worth a read.
https://litmus.com/blog/gmail-to-support-responsive-email-design
As of October 2020, the Gmail UI still doesn't allow to compose email messages using HTML / CSS.
Here is a summary of the the trick shown in the referred video:
Click the compose button of the Gmail Web UI
Add a dummy text
Select the dummy text the use the Chrome DevTools to edit the element holdin the dummy text.
Unfortunatelly this doesn't allow to include <style>...</style>. If you dedide to use an external editor you could use the standard HTML structure
<html>
<head>
<style>
p {
color:Maroon;
}
</style>
</head>
<body>
<p>Hello worl!</p>
</body>
</html>
One option is to use Google Apps Script to compose your HTML messages. While it doesn't offer WYSWYG you could create a simple web app and make it available only to you.
The following example use scriptlets to create and style a simple table (the use of scriptlets is optional).
Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate()
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body {
background-color:gray;
}
table {
margin:auto;
}
tr .header {
background-color:navy;
color:white;
}
tr .label {
background-color:white;
}
tr .value{
background-color:white;
text-align:right;
}
tr .totals {
background-color:white;
color:navy;
font-style:italic;
text-align:right;
}
</style>
</head>
<body>
<table>
<? const headers = ['Fruit','Qty'];?>
<? const data = [
['Apple',5],
['Banana',10],
['Cherry',20]
];?>
<colgroup>
<col span="1" style="width:100px">
<col span="1" style="width:50px">
</colgroup>
<thead>
<tr >
<? for (var header of headers) {?>
<th class="header"><?= header ?></th>
<?}?>
</tr>
</thead>
<tbody>
<? for(var row of data){ ?>
<tr >
<td class="label"><?= row[0] ?></td>
<td class="value"><?= row[1] ?></td>
</tr>
<?}?>
</tbody>
<tfoot>
<tr>
<td class="totals">Totals:</td>
<td class="totals"><?= data.reduce((total,row) => total + row[1],0)?></td>
</tr>
</tfoot>
</table>
</body>
</html>
If you dont' wan to use scriplets on the Code.gs file instead of
HtmlService.createTemplateFromFile('index').evaluate()
you could use
HtmlService.createHtmlOutputFromFile('index')
The above works fine when sending the email but doesn't work for messages that are saved as draft, so if you need to save your messages as draf, instead of using <style>...</style> use inline styles.
Resources
Gmail Sender Resources > CSS Support
Composing draft messages (This explains how to create a Gmail add-on to compose a draft, but doesn't mention how to include CSS)
Related
How to paste raw HTML into an email in Gmail? (from Web Applications)
I am trying to make a plugin for WordPress.
It works great, except when i load the default WordPress themes. e.g. "twentyeleven."
This theme has a DOCTYPE as shown below. And hence, no matter what I do, it always inserts this annoying GAP when i put an image in a table.
Please Help!
How do I get rid of this gap?
Below is some code. Anytime a table is placed in a situation in which the DOCTYPE is defined as it is here, then I get this gap.
The WordPress default themes seem to use this DOCTYPE declaration. So they BREAK my pretty plugins...
<!DOCTYPE html>
<body>
<table border="1" style="border-collapse: collapse;">
<tr>
<td width="100%">
<img border="0" src="http://goo.gl/PJdRU">
</td>
</tr>
</table>
</body>
</html>
All browsers render the above code as shown below. I just want to REMOVE the Gap! Thanks!
There are several solutions, but neither is perfect. I guess the easiest will be just change your img's style - in CSS (with td img { display: block } rule) or just an inline style, like this:
<img style="display:block" border="0" src="http://goo.gl/PJdRU">
Here's an article with explanations why you see what you see - and several possible ways of fixing it. ) And here's a working JSFiddle to play with.
If I use styling in my outlook, it won't work.
how can I fix it? I am talking about this style code:
<div id="BodyID" Style=" word-spacing:2px; min-width:0px; min-height:0px;max-width:693px; max-height:490px; height:485px; background-color:#f4f4f4; border:1px solid #e4e4e4; font-family:Arial;">
Unfortunately Outlook supports something roughly equivalent to IE5 compatible HTML. It's really terrible. Here's a detailed MSDN article on the Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007, which I don't believe changed much for Outlook 2010.
Honestly, the only way I've been able to get outlook HTML to look the way I want is to hand generate the HTML using roughly HTML2 standard tags and properties and not using CSS at all. Some CSS renders, but it's really hit or miss.
Maybe this can help http://www.campaignmonitor.com/css/ It's a table, what is supported in E-Mails
edit
min|max-width|height not supported
http://htmlemailboilerplate.com/
I've been using that as a base for my HTML email campaigns.
And the link yunzen posted to campaign monitor is a great resource.
The MSDN article superlime linked to tells the sad story: for whatever incomprehensible reasons, Microsoft reverted nearly 10 years in their handling of HTML email w/Outlook2007, and did not see fit to fix it in 2010.
Having taken the trouble to design a well-formatted HTML layout for rest of the universe of mail user agents, I do see one saving workaround, which is what I'm going to direct my users to, rather than spend my time trying to reconstruct ancient HTML:
Use the VIEW IN BROWSER option Outlook offers for reading an email message. That re-assembles the HTML as intended.
Try adding 3 columns table, click on the example link below.
Example: Link
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="400">
<table border="1" cellspacing="0" width="100%">
<tr>
<td>
Content here...
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
I have a client form which includes HTML served up from an iframe - I can't edit it. The only thing I can do is apply CSS edits.
I'm trying to apply a simple adjustment which would stack the <td>s in the form so
1. What is your age?
becomes
1.
What is your age?
If you right click the first question and Inspect Element you'll see the rather interesting DOM structure I get to work with. This example it looks like this:
<div id="Age" class="questionlabel">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<span class="questionnumber_questionlabel">1. </span>
</td>
<td>
<label class="required">What is your age?</label>
</td>
</tr>
</tbody>
</table>
</div>
When I inspect that <td> and add a display:table-row; it completely ignores me. This is in Chrome - I can replicate this DOM and get the CSS to do what I want in jsfiddle so I'm thinking there is a reset somewhere I can't see. I even tried display:table-row !important; to no avail. I can apply border:2px solid blue; no problem. I can apply display:none; no problem.
Any ideas as to what is going on here that would prevent this simple CSS param from working?
To re-iterate the ONLY thing I can do is apply CSS - No JavaScript and no HTML edits. Basically I pass in a CSS file in the url to the iFrame. That's all I get. Thanks!
EDIT: I apologize I had to remove the link to the example form on the live site.
Edit - screenshots had to be removed, but the solution is still valid.
Added this code to form-css.css, using Firebug. Beginning or end, it did not matter:
table#form_table div.questionlabel td {display: table-row !important;}
.questionnumber_questionlabel {margin: inherit!important;}
(Note: I reset that margin as the old one (-10px) was causing unsightly overlap.)
I'm developing sharepoint datetime control and got some problem with css of this control.
below is my html code.
<td style="padding-top: -10px">
<SharePoint:DateTimeControl CalendarImageUrl="/_layouts/NCS.OCP.Resource/images/calendar.jpg"
DatePickerFrameUrl="/_layouts/iframe.aspx" ID="DateDOB" DateOnly="true" Calendar="Gregorian"
LocaleId="2057" runat="server"></SharePoint:DateTimeControl>
<td>
I have tried modify ms-input css with padding-top -10px but failed, this control always falls down of my td.
is there any way to pull this control up so that this td can on one line...?
Looks like sharepoint has it's own <div>s or <td>s. Maybe even some custom css/
Try inspecting the elements, getting their ID's and then changing it with JS.