Avatar billede Keld Nielsen Forsker
03. august 2019 - 14:03 Der er 6 kommentarer

Email vises forkert formatteret

Jeg har en email der generes på en hjemmeside - en bestillingsformular, hvor emailen ikke ser rigtig ud når jeg modtager den på f.eks. Outlook 2016.

Mailen der modtages ser sådan ud: https://ibb.co/MBDGdDk
...men det skulle se sådan her ud (vist i en browser): https://ibb.co/3zqbxmd

html-koden der modtages er:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="da-DK">
<head>
<title>xxxxx - bestilling</title>
</head>
<body>
<p>Fra: Hans Hansen <[kundeemail]><br />
Emne: Bestilling af billeder</p>
<p>Bestilling fra xxxx hjemmeside:</p>
<ul style="list-style-type:none;border-right:1px solid black;display:inline-block;float:left;padding:5px">
<li style="background-color:lightgray;margin:0;padding:3px 5px">Nummer</li>
<li style="margin:0px;padding:3px 5px">12454</li>
<li style="margin:0px;padding:3px 5px">24587</li>
</ul>
<ul style="list-style-type:none;border-right:1px solid black;display:inline-block;float:left;padding:5px">
<li style="background-color:lightgray;margin:0;padding:3px 5px">Antal</li>
<li style="margin:0px;padding:3px 5px">2</li>
<li style="margin:0px;padding:3px 5px">3</li>
</ul>
<ul style="list-style-type:none;display:inline-block;clear:right;padding:5px">
<li style="background-color:lightgray;margin:0;padding:3px 5px">Størrelse</li>
<li style="margin:0px;padding:3px 5px">45x59</li>
<li style="margin:0px;padding:3px 5px">18x24</li>
</ul>
<p>Hans Hansen<br />
Hansensvej 12<br />
9999  Hansby<br />
[kundeemail]<br />
12454787</p>
<p>--<br />
Denne e-mail er afsendt fra en formular på Xxxxxx (http://xxxx.dk)</p>
</body>
</html> 

Mit spørgsmål er:
Hvorfor vises det ikke rigtig i Outlook ?
Avatar billede claes57 Ekspert
03. august 2019 - 19:54 #1
det vises helt, som du har valgt det med en punkt-liste.
Du ville have valgt en tabel-opstilling med <tr> </tr> hhv før og efter hver linje
og <td> </td> omkring hvert felt (og det hele pakket i en <table> </table>
utestet efter hukommelsen er det som
<table>
<tr style="list-style-type:none;border-right:1px solid black;display:inline-block;float:left;padding:5px">
<td style="background-color:lightgray;margin:0;padding:3px 5px">Nummer</td>
<td style="margin:0px;padding:3px 5px">12454</td>
<td style="margin:0px;padding:3px 5px">24587</td>
</tr>
<tr style="list-style-type:none;border-right:1px solid black;display:inline-block;float:left;padding:5px">
<td style="background-color:lightgray;margin:0;padding:3px 5px">Antal</td>
<td style="margin:0px;padding:3px 5px">2</td>
<td style="margin:0px;padding:3px 5px">3</td>
</tr>
<tr style="list-style-type:none;display:inline-block;clear:right;padding:5px">
<td style="background-color:lightgray;margin:0;padding:3px 5px">Størrelse</td>
<td style="margin:0px;padding:3px 5px">45x59</td>
<td style="margin:0px;padding:3px 5px">18x24</td>
</tr>
</table>
Avatar billede claes57 Ekspert
03. august 2019 - 19:57 #2
ups - du skal udskrive tabel linje for linje, og ikke kolonne for kolonne - så vil det se korrekt ud.
Avatar billede Keld Nielsen Forsker
03. august 2019 - 21:12 #3
Hvorfor vises det så rigtig i en browser - se eksempel ?
Avatar billede erikjacobsen Ekspert
03. august 2019 - 23:16 #4
Din hjemmeside har vel en CSS-fil, der viser det på tabelform.
Avatar billede Keld Nielsen Forsker
04. august 2019 - 09:41 #5
Nej - det er helt uden css fil at den vises sådan, både i edge, firefox og chrome.

Selve PHP koden ligger i functions.php - og trækker data fra Contact Form 7:

--------------------
add_filter( 'cf7sg_mailtag_grid_fields','insert_table_in_mail',10,4);
/**
* this filter is used to build an html formated string to rpelace a mail tag of a field that is in a table or tab structure. NOTE: this filter is only fired if the mail format is set to html.
* In case the field is in a table that is within a tab, then the $data field will be an array of arrays.
* @param string $html an empty html string to filter.
* @param string $field the name of the file field being attached
* @param string $data an array of submitted data.
* @param string $cf7_key unique form key.
* @return string an html string to replace the mail tag.
*/
function insert_table_in_mail($html, $field, $data, $cf7_key){
  if('bestil-smart'!==$cf7_key){ //always validate the form being submitted.
    return $html;
  }
  $build = true;
  switch($field){ //if either of fields present in the table...
    case 'nummer':
      $label = 'Nummer';
      $html ='<ul style="list-style-type:none;border-right:1px solid black;display:inline-block;float:left;padding:5px">';
      break;
    case 'antal':
      $label = 'Antal';
      $html ='<ul style="list-style-type:none;border-right:1px solid black;display:inline-block;float:left;padding:5px">';
      break;
    case 'stoerelse':
      $label = 'Størrelse';
      /*styling for last column*/
      $html ='<ul style="list-style-type:none;display:inline-block;clear:right;padding:5px">';
      break;
    default: //else this isn't a field we want in the table.
      $build=false;
      break;
  }
  if($build){
    $html .='<li style="background-color:lightgray;margin:0;padding:3px 5px">'.$label.'</li>';
    foreach($data as $key=>$value){
      $html .='<li style="margin:0px;padding:3px 5px">'.$value.'</li>';
    }
    $html .='</ul>';
  }
  return $html;
}

------------------

Jeg troede at når det vistes rigtigt i en browser - ville det også vises rigtig i en mail-visning, som Outlook 2016.
Avatar billede claes57 Ekspert
04. august 2019 - 10:38 #6
Så vil mail bare ikke display:inline... det vil virke med tabel-opstilling.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester