OK, time to give a little something back.
I’ve just managed to successfully convert the eform Feedback form into a tableless layout.
IE: Replaced all the table tags with divs and css.
You can see the first version here:
http://www.breakthroughecommerce.com/utilities/form2
It’s still a work in progress and I will probably tweak the design a little more, but I’m chuffed it works, and hopefully this little tute may be of use to others.
I’ve used the basic efeedback form that comes with eform, so if you have that installed already, there’s only really one chunk to create. If you haven’t, do that first otherwise the rest of this won’t work.
So here goes.
Step 1: Creat a new chunk and give it a name, in my case efeedbackform2.
Step 2: Paste the following code in the chunk.
<div>
<div id="contactform">
<div class="contact-form"><a name="contactus"></a>
[+validationmessage+]
<form method="post" action="[~[*id*]~]">
<input type="hidden" name="formid" value="feedbackForm2" />
<h1 class="contactus">Find Out How To Play a Smarter Game</h1>
<div class="content cf">
<div class="colA"> <strong><label accesskey="n" for="Name">Your Name</label></strong>
<div> <input type="text" name="Name" maxlength="200" eform="Your Name::1:Expected at least two words:#REGEX /^\w+\s\w+/i" /></div>
<strong><label accesskey="c" for="company">Your Company</label></strong>
<div> <input type="text" name="company" eform="Company:string:1" /></div> </div>
<div class="colB"><strong><label accesskey="e" for="email">Your Email Address</label></strong>
<div><input type="text" name="email" size="40" maxlength="40" eform="Your Email Address:email:1" /></div>
<strong><label accesskey="w" for="website">Company Website</label></strong>
<div> <input type="text" name="website" size="40" eform="Website:string:1" /></div>
<strong><label accesskey="c" for="comments">Tell me a little about your marketing goals and online chalenges:</label></strong>
<div class="comments"><textarea cols="60" rows="10" name="comments" eform="Comments:html:1"></textarea></p></div></div></div>
<div class="button"><input type="submit" name="submit" value="Send Request" type="image" src="images/download2.gif" ></p>
</form> </div>
</div></div>
</div>
Then save.
Step 3: Go to the page where you’re going to place the form, or just create a new page for the form.
Step 4: Paste the call on the page where you want it to appear. My call is only a slightly modified version of what comes with the eform example files.
All I’ve done is remove the captcha/vericodes by setting it to "0" and changed all the instances of "feedbackForm" to "feedbackForm2"
Step 5: Add the following css to your css file
#contactform .contact-form {background-color: #E0E5EB;text-align: center; font-size: 11px; font-family: Arial, Helvetica, sans-serif; padding: 10px 0 0 0}
#contactform .contentf {padding-left: 92px; background-color: #E0E5EB;}
#contactform .title {margin: 5px 0 3px 0;}
#contactform .colA {width: 45%; float: left; text-align: left; padding-left: 27px;}
#contactform .colB {width: 45%; float: left;text-align: left; padding-left: 27px;}
#contactform .methods {background-color: #E0E5EB; padding: 4px 0 5px 5px; width: 239px;}
#contactform .input {width: 238px; border: 1px solid #c1c1c1;}
#contactform .comments textarea {width: 238px; border: 1px solid #c1c1c1;}
#contactform .comments_full textarea {width: 488px; border: 1px solid #c1c1c1;}
#contactform strong {display: block; margin: 5px 0 2px;}
#contactform .button {background: #E0E5EB; text-align: center; padding: 20px 0;}
That’s it, you’re done. It should work.
Just a few notes:
The css and some of the divs are set up to work within my overall design, so if you get odd layout things happening or it looks weird you’ll have to work that out for yourself. It will probably be one too many or one too few divs.
Also be aware that you may get css inheritance issues. Again, that will be for you to sort out.
As I said, it’s a work in progress.
Also, some of the div tags in the chunk should probably come out and go on the page around the call.
Once you’ve got it running and get the gist of what’s going on, you should be able to figure out how to add and place any extra fields.
Ok Enjoy.
