Layout of form changes from Form...

Mar 23rd, 2014 at 09:07 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,271 posts

Don't mess with any of the exported files. Customize the email notification inside of the form builder.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Mar 23rd, 2014 at 09:55 PM
User 2659348 Photo

Chris S Peterson
Registered User
119 posts

I had to last week to get the other problem solved. I had to literally write the style="" code in next to every element to get the widths and margins to work right.

And on this issue, this is all there is in the WFB for customizing the email notifications:

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head><title>You got mail!</title></head>
<body style="background-color: #f9f9f9; padding-left: 11%; padding-top: 7%; padding-right: 20px; max-width: 700px; font-family: Helvetica, Arial;">
<style type="text/css">
body {background-color: #f9f9f9;padding-left: 11%; padding-top: 7%; padding-right: 2%;max-width:700px;font-family: Helvetica, Arial;}
p{font-size: 12px; color: #666666;}
h1{font-size: 60px !important;color: #cccccc !important;margin:0px;}
h2{font-size: 28px !important;color: #666666 ! important;margin: 0px; border-bottom: 1px dotted #00A2FF; padding-bottom:3px;}
table{width:80%;}
td {font-size: 12px !important; line-height: 30px;color: #666666 !important; margin: 0px;border-bottom: 1px solid #e9e9e9;}
td:first-child {font-size: 13px !important; font-weight:bold; color: #333 !important; vertical-align:text-top; min-width:10%; padding-right:5px;}
a:link {color:#666666; text-decoration:underline;} a:visited {color:#666666; text-decoration:none;} a:hover {color:#00A2FF;}
b{font-weight: bold;}
</style>
<h1 style="font-size: 60px !important; color: #cccccc !important; margin: 0px;">Hey there,</h1>
<p style="font-size: 12px; color: #666666;">
Someone filled out your form, and here's what they said:
</p>
<div>
[_form_results_]
<p style="font-size: 12px; color: #666666;">
<b style="font-weight: bold;">Note: </b> Customizing your email message is as easy as 1-2-3! To get started, edit your form and go into the <b style="font-weight: bold;">Settings &gt; Email Notices Tab</b> and then click on <b style="font-weight: bold;">"Configure email message"</b>. Web Form Builder supports HTML and CSS so there is no limit to how snazzy you can design your message.
For more info <a href="http://coffeecup.com" style="color: #666666; text-decoration: underline;">go here</a>.
Hope you're enjoying the software!
</p>
</div>
</body>
</html>

The first stuff in BOLD is the only thing there is about the table that shows up in the emails. It is just styling isn't it? Nothing about the structure of the table itself.
And the second thing I Bolded is what gets put into the table. It's in brackets which means it's getting the info and putting it in that div on the email. But it doesn't just "put" the info in the div unstructured. Somewhere it is being told to structure it to where the email shows up with the word "Name" on the left, then over to the right is the person's name that filled out the form, etc.

The code above shows some styling for this, but not the structure. I'n my limited experience, when I see the word "table" and "td", or even "tr" in code, that means there is a table somewhere with table data and table rows. This code has no "tr" but next to "td" it says first-child, which makes me think of js.

Someone designed this table and I just need to be able to modify it. Is what you are telling me, that I can't really make these messages as "snazzy" as I want? That there IS a limit to how I can design it? Or is this all written in a way that is way beyond my knowledge of html & css?
Knowing is half the battle
Mar 24th, 2014 at 06:56 AM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,271 posts

Here's the email notification the way it appears in the form builder with out making any changes. Maybe start from there from within the app itself.
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head><title>You got mail!</title></head>
<body style="background-color: #f9f9f9; padding-left: 11%; padding-top: 7%; padding-right: 2%; max-width: 700px; font-family: Helvetica, Arial;">
<style type="text/css">
body {background-color: #f9f9f9;padding-left: 110px;padding-top: 70px; padding-right: 20px;max-width:700px;font-family: Helvetica, Arial;}
p{font-size: 12px; color: #666666;}
h2{font-size: 28px !important;color: #666666 ! important;margin: 0px; border-bottom: 1px dotted #00A2FF; padding-bottom:3px;}
table{width:80%;}
td {font-size: 12px !important; line-height: 30px;color: #666666 !important; margin: 0px;border-bottom: 1px solid #e9e9e9;}
td:first-child {font-size: 13px !important; font-weight:bold; color: #333 !important; vertical-align:text-top; min-width:10%; padding-right:5px;}
a:link {color:#666666; text-decoration:underline;} a:visited {color:#666666; text-decoration:none;} a:hover {color:#00A2FF;}
b{font-weight: bold;}
</style>
<h2 style="font-size: 28px !important;color: #666666 ! important;margin: 0px; border-bottom: 1px dotted #00A2FF; padding-bottom:3px;">Thanks for taking the time to fill out the form. <br/>Here's a copy of what you submitted:</h2>
<div>
[_form_results_]
</div>
</body>
</html>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Mar 24th, 2014 at 08:00 PM
User 2659348 Photo

Chris S Peterson
Registered User
119 posts

Eric, thanks for still trying to help me.

But that is what I posted above (except that is the other one - the one the customer will receive; I posted the one that I will get back).

And maybe you're forgetting that I don't know what I'm doing. I can do some code, but when I'm modifying something someone else wrote, I need to be told what to write & where to write it. My site was built by me by learning a little and then trying it. So, if I didn't have to learn it to get my site to be what it is, then I don't know it.

In order to be able to change how the "table" part of the email looks or is structured, where in the code above would I start typing stuff and what kind of stuff would I type? Not just the color & font size of the "form results" that are automatically entered into the table, but the actual way the table is STRUCTURED?

As it is now (even though you can't see it in the code above) the email comes with a table that has 2 columns. Not that this is what I'm wanting to do, but............ what if I wanted it to have 3 columns? Or what if I wanted to make a row that shows up empty just to separate certain info? Where would I go to change those things?

I'm running out of ways to ask this question.
Knowing is half the battle
Mar 24th, 2014 at 08:58 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,271 posts

This should help get you going.
Any of the _words_ that look like _this_ are what your variables are named in the form builder. You don't have to use _ but I used them for clarity.:)
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head><title>You got mail!</title></head>
<body style="background-color: #f9f9f9; padding-left: 11%; padding-top: 7%; padding-right: 2%; max-width: 700px; font-family: Helvetica, Arial;">
<style type="text/css">
body {background-color: #f9f9f9;padding-left: 110px;padding-top: 70px; padding-right: 20px;max-width:700px;font-family: Helvetica, Arial;}
p{font-size: 12px; color: #666666;}
h2{font-size: 28px !important;color: #666666 ! important;margin: 0px; border-bottom: 1px dotted #00A2FF; padding-bottom:3px;}
table{width:80%;}
td {font-size: 12px !important; line-height: 30px;color: #666666 !important; margin: 0px;border-bottom: 1px solid #e9e9e9;}
td:first-child {font-size: 13px !important; font-weight:bold; color: #333 !important; vertical-align:text-top; min-width:10%; padding-right:5px;}
a:link {color:#666666; text-decoration:underline;} a:visited {color:#666666; text-decoration:none;} a:hover {color:#00A2FF;}
b{font-weight: bold;}
</style>
<h2 style="font-size: 28px !important;color: #666666 ! important;margin: 0px; border-bottom: 1px dotted #00A2FF; padding-bottom:3px;">Thanks for taking the time to fill out the form. <br/>Here's a copy of what you submitted:</h2>
<div>
<table><tbody style="vertical-align: text-top;line-height: 30px;">
<tr><td>First Name</td><td>_fname_</td></tr>
<tr><td>Last Name</td><td>_lname_</td></tr>
<tr><td>Submitted On:</td><td>_submitted_</td></tr>
<tr><td>IP Address:</td><td>_fromaddress_</td></tr>
</tbody></table>
</div>
</body>
</html>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Mar 24th, 2014 at 09:09 PM
User 38401 Photo

Jo Rice
Senior Advisor
10,951 posts

Chris, that's quite a tall order to have someone walking you through all this to be honest. Most of what needs to be done should be learned by you as to why you're doing it rather than just "what" to change. I would highly suggest you do some training, tutorials, etc. which you can do for free at a lot of online sites as well as quite a few good paid ones too.

Your site(s) and you would benefit tremendously if you had more knowledge about what's where and why. Just a thought :)
Jo

http://elementsinwebdesign.com
Mar 24th, 2014 at 09:54 PM
User 2659348 Photo

Chris S Peterson
Registered User
119 posts

Eric, That looks like it will help me. If doing something like what you've done here (The lower part you added with additional table info) is all I need to do to get it to show up in the emails, and it won't confuse the code above it, then that's all I needed to know. I will mess with it tomorrow and see if this gets me going in the direction I'm looking for. Thanks so much!

Jo Ann, I have done all of the tutorials and research and learning that I needed to to create my site from scratch. I even nearly gave myself a stroke trying to learn & figure out enough js to get a simple pause button to work on my image slideshow. I wanted a pause button (toggle on & off), didn't want a play button, and I was willing to learn whatever I had to until I could get my way.
But this (wfb) is someone else's software that they wrote; I didn't write it. As you know, there are several ways to write things & create programs. I'm sorry, but I just figured that since they wrote it, it would be WAY quicker if they'd just tell me what to do with THEIR software - as opposed to me spending weeks trying things (writing it in my basic way next to their up-to-date style of writing code), re-exporting & uploading each time, filling out my own form each time just to see the email & see if what I did worked or if it made a worse mess.
And.... I figured I was supposed to ask for their help since, upon buying the software for real dollars, their marketing claims that I get free unlimited support and to not hesitate to ask for it. I didn't realize I was so out of line.

I am a carpenter. If someone wanted help building something with wood, I would simply be able to help them. I gave a link to my site when I started asking questions on here and they could see that I had obtained some basic knowledge. I did warn that it was basic though.

My sites are benefiting because I DO know what's where & why. That's why, even as a carpenter, I was dead-set on building my own site - so that I WOULD know those things and not be at the mercy of people that didn't want to, or have time to, help me every time I wanted to change or add something. But again, THIS (this form) is the only part of my site that involves someone else's software. Every other keystroke on my site was written by me; every button or image created by me.

I know WHY I wanted to change the emails. But the "what" part was the hindrance because I did not write the form software. If I had hundreds of dollars to buy Acrobat XI just to create one form, then we wouldn't be having this conversation. I'd have been done by now.

I'm a visual person. If you look at the code on my site, you will see that I put a lot of stuff on the page it actually goes on instead of some more concise or elegant way of having separate files or folders for every little thing. That is so that, down the line when I haven't messed with it in a while and I go back to change something, I won't get confused all over again and wonder where the code is and in what file it's in that makes a particular page work. Because I don't do this every day I have to have it that way to help me work on my site in the future. And when I looked at the code in question (email config above) all I saw was a "reference" to a table "somewhere". My basic-code-writing brain told me that there HAD to be more details (structure) for that table somewhere. A kind teacher would have said: "You know, you can just start writing more structure for the table right in THIS same file. Something like this.. (and gave a quick example)" And I would have been like: Oh cool. Thanks!"
Luckily, Eric finally said just that. I do hope it works so I can quit being the "freak poked with a stick".

And it's a sad world when people are more willing to criticize the under-educated and waste a lot of time instead of just simply lending a quick helping hand. Teach a man to fish & he'll leave you alone. Poke him with a stick and he might not shut up.
Knowing is half the battle
Mar 24th, 2014 at 10:08 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,271 posts

Chris test the results to see what you get. Html email is a difficult thing. Using a table structure with inline styling may seem old fashion but it's still the most reliable from browser to browser. If you really want to step up your game checkout Mail Chimp. The form builder already has Mail Chimp integrated into it for making email list. Mail Chimp has some html email setups that could be altered for the form builder.
http://templates.mailchimp.com/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Mar 25th, 2014 at 07:43 AM
User 38401 Photo

Jo Rice
Senior Advisor
10,951 posts

Chris I think you misconstrued what was said there as I didn't say anything at all to criticize you, I only said the bare facts on what is needed to alter the HTML of the email setup. The thing about this program is that although it "seems" user friendly for the most part, the users still need to have basic (and it's very old basic) knowledge of HTML and CSS.

You went off on such a tangent there about things I never said that I don't know what to say back to you other than the Support is for the software not the coding of your site. CC is gracious enough to give us the full entire coding setup of the emails to show us how it should work, and the rest is for us to alter it how we like. That's not a support issue, that's a coding issue and that's what I mean by you and anyone else wanting to alter things like this needing to have more knowledge.

There was no slight in there to you, no animosity, just a very pointed comment of what you should do to be able to do what you're trying to do so that you understand it better, and that what you have someone else work on with you here is fine and dandy, but it won't really teach you much. That's all that was really said in my comment.

As a side note, I will say that Email HTML code and CSS code is very old school so you'd need to work on the way things "used" to be with HTML 2 and up to 4 as it does everything pretty much the way it used to be with inline and internal CSS rather than style sheets. That's not by CC design though, that's just how email works for HTML so we have no choice but to do it that way at this time.

I truly do wish you well with it, but I do stick to my guns on the fact that you (and anyone else needing to use most of the software for web design these days, including much of CC's stuff) should really delve in and work out a lot of the code details either before or while you're working on the programs. If you've learned how to do as much as you have, it would stand to reason you'd want to understand how it all goes together better. :)

NOTE: If it's any consolation, we all have to do what you're saying you shouldn't have to do lol. I copy the code out of the email setup and create a new page in my HTML Editor program and paste it in there to see what it looks like. You don't have to keep uploading it with the Form Builder, you can just edit it in your favorite HTML Editor and use the visual aids within the program to see what the result is. That's the best way to do it and faster too. :)
Jo

http://elementsinwebdesign.com
Mar 25th, 2014 at 07:55 AM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,271 posts

Thanks for the reminder on using the html editor to preview the email JoAnn, I totally forgot to tell him that, even though I was already doing that to see the results of my sample.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.