Forums

Hi , i got a problem with my email template. I just cant get my email to show my style i created.

This is what i got in my Template:

<style>
#email_container{
    width: 600px;
    height:auto;
    min-height: 380px;
    background-color: #f5f5f5;
    border-radius: 20px;
    border: 2px solid #008bd0;
}

#email_header{
    background-color: #008bd0;
    width:602px;
    height: 70px;
    position: relative;
    left: 0px;
    top: -3px;
    font: 25px verdana, sans-serif;
    color: white;
    text-align: center;
    line-height: 60px;
    border-radius: 20px 20px 0px 0px;
    }

#field{
    position: relative;
    left: 20px;
    top: 10px;
    width: 560px;
    height: auto;
    min-height: 360px;
    margin-bottom: 20px;
}
.field_label{
    font: 20px verdana, sans-serif;
    color: #008bd0;
}

#field_name{
    position:relative;
    top: -25px;
    left: 100px; 
}

#field_adresse_strasse{
    position:relative;
    top: -25px;
    left: 100px; 
}

#field_adresse_plz{
    position:relative;
    top:-25px;
    left: 100px; 
}
#field_adresse_ort{
    position:relative;
    left: 185px; 
    top: -50px;
}
#field_adresse_land{
    position:relative;
    top: -50px;
    left: 100px; 
}

#field_telefon{
    position:relative;
    top: -25px;
    left: 100px; 
}

#field_email{
    position:relative;
    top: -25px;
    left: 100px; 
}

#field_nachricht{
    position:relative;
    width:auto;
    max-width: 520px;
    height: auto;
    min-height: 80px;
    top: 0px;
    left: 10px;
    background-color: white;
    box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.1) inset;
    padding: 10px;
}

.normal_t{
    font: 20px verdana, sans-serif;
    color: #808080; 
    overflow: hidden;
}
</style>

<div id="email_container">
    <div id="email_header">Kontaktanfrage</div>
    <div id="field">
        <div class="field_label">Name:</div>
        <div id="field_name" class="normal_t">{vorname} {nachname}</div>
        <div class="field_label">Adresse:</div>
        <div id="field_adresse_strasse" class="normal_t">{strasse}</div>
        <div id="field_adresse_plz" class="normal_t">{plz}</div>
        <div id="field_adresse_ort" class="normal_t">{ort}</div>
        <div id="field_adresse_land" class="normal_t">{land}</div>
        <div class="field_label">Telefon:</div>
        <div id="field_telefon" class="normal_t">{telefon}</div>
        <div class="field_label">E-Mail:</div>
        <div id="field_telefon" class="normal_t">{email}</div>
        <div class="field_label">Nachricht:</div>
        <div id="field_nachricht" class="normal_t">{message}</div>
    </div>
</div>

I have put that in SETUP>EMAIL Action>edit and then "Email template"

I get the email but without the styles. Am i missing some dumb tiny thing?

Actually you are right, i am using gmail. But luckly only for testing purpose. The E-Mail it will get sent to should work then😉 thx for the help. Didnt know that gmail doesnt support that.

Well it solved my problem. Unfortunatly i am not really happy with the style outcome. Didn't know that it is so restrictive. Anyway got another question regarding my mails. Somehow i get 2 E-Mails with each submit.

One with full Data, the 2nd one without data only containing the fields.

Hi mJrA,

You can add more complex styling but I think it has to be in-line rather than in a style block to be sure that it will work widely.

Do you have a second email action enabled? That would explain the two emails.

Bob

I modified the "Basic contact form with multi fields for name & address" demo form and deleted one of the email actions. Now i only got one. Maybe i should have disabled it before i delete it? God i am really new to this😟

That happens when my company wants me to do their Homepage😀

Hi mJrA,

You don't need to disable before you delete - just deleting should work OK.

Please take a Form Backup using the icon in the Forms Manager and post it here and I'll take a closer look.

Bob

Not needed. I think i found the cause. Thought i dont know how to solve it. I attached a image so you can see my problem

BTW: how can i edit my posts?

I just added the last action (email 3) to change it for my needs and delete the double one. But i dont know how to get the Jigsaw icon with the options

Hi mJrA

I'm afraid that you can't edit your posts here. I think Max has done that because in the past we had a lot of spammers who would make a more or less sensible post then come back later and add a bundle of links to it.

I don't think that either of the things in your image are the problem you have. Those icons are just a way of showing how the action is configured. I'm not sure what the jigsaw piece represents; in the email one I think the second email is the name that you have give the action.

Bob

Well then here is the file😉

Hi mJrA,

I replaced your email with mine and submitted the form but I only got one email.

Bob

hmm... I got the form in a modal window, maybe that causes issues? I have some other problems with the form like in the modal window the form fields are not next to eachother. They are all in one column. I cant see the * too.

Here are 2 Images to show my problem. Maybe that is related to the double e-mail i get.

Image 1 hows the form opened by a click on the contact button.

Image 2 shows hte form opened in the article directly. The form is now correct.

Funny now i only get one e-mail. I change the modal window to the one my template uses. The only thing whats left is that i doesnt use the required fields.

Hi mJrA,

It looks from your images as if the CSS is not loading in the modal window version.

Bob

I now changede the link so it opens it in a other modal window. There the fields are next to eachother, but still without the *

Maybe u see it better when u visit the page😉

http://www.lagertechnik.qteck.de

bottom button (Kontakt) - wrong version

http://www.lagertechnik.qteck.de/index.php/9-uncategorised

click on the Kontak in the middle openes the correct version of the kontakt. Don't ask me why it doesnt load it.

http://www.lagertechnik.qteck.de

I have put the Form back into the old modal window and there we are again double e-mails. Unfortunatly that modal window is the best responsive one. I really dont know what to do to fix this😟

I solved this problem too. There is a Setting in my modal plugin (NONUMBERS - MODALS)
-> (Load scripts/styles) that has to be on "YES"

I encountered another problem that the modal didnt load. Solution for that was to edit the "jquery.easing.1.3.js" of my template i was using. In my Case (JA-Smashboard)

I had to wrap the code of the jquery.easing.1.3.js in

$(document).ready(function() {
...
});

Now everything works like i want. Thx Bob for your Help. Hope this will help someone who whas same issues.

greetings mJrA