HI DP Family, I am currently re-designing a webform for my autoresponder campaign using Kompozer. I have figured out how to do everything but round the corners. Any suggestions? Please advise. Thanks.
All of them. I'm working on a webform(table) and would like to round the corners of it and the buttons.
An HTML table used for a form? Tables are used for tabular data, not for placement. You need to rethink your design first.
use the input and label field for the form secondly the round border can be made through border radius property in CSS or else you will have to crop the image.
That's a given if Komposter is on the job... since as something that encourages the use of it's WYSIWYG you can bet dimes to dollars it's endless pointless DIV around tables for layout with nothing remotely resembling semantic markup or separation of presentation from content. But again, without seeing the page in question anything we say is guessing wildly; though if it's anything like the laundry lists of "how not to develop websites" in the OP's signature...
I am taking the HTML code from my auto-responder and editing the webform image using Kompozer. I and attempting to round the corners of the button and the borders. The site is http://www.theenterprisemind.com. Thanks for your assistance.
Nope, he guessed EXACTLY what you are referring to -- as the link to your page confirmed. The entire thing is chock full of all the things one expects from a WYSIWYG editor, and as such for someone like Rukbat or myself to even want to bother to try and help you, we'd have to throw that entire mess of code away and start over from scratch -- it would be faster than to try and do anything with the decade and a half out of date methodology and nonsensical code that editor saddled you with. Since you have tables for no good reason, presentation inlined in the markup, nothing remotely resembling semantics, and the whole other host of things that basically throw accessibility out the window. Hence your 11k of markup to deploy 336 bytes of actual content and two inputs. The code doesn't even make sense having multiple HEAD, multiple TITLE, massive tables with even more massive STYLE attributes for christmas only knows what -- it's a laundry list of how not to build a website -- and ENTIRELY what one can expect from Kompozer. Editors like Kompozer, Frontpage, the preview pane in Dreamweaver, etc, etc, are NOT how you build a website -- they amount to nothing more than nube predation and broken methodologies. Anyone telling you otherwise is packing you so full of sand you could change your name to Sahara.
Sounds like a good suggestion, but I don't know how to manipulate the input fields. Do you have a tutorial you recomend to learn how? I already tried the border radius linein the code and it wouldn't stick. Thanks for responding.
This is a very wordy analysis that left out how you would recommend rounding the corners. I understand that the code from the auto responder is subpar as well as the editor. But, for now that's what I have to work with. Any suggestion is still welcome. Thanks again for responding.
Ok, see this: <div align="center"> <table border="0" cellpadding="10" cellspacing="0"> <tr> <td valign="top"> <img src="http://theenterprisemind.com/wp-content/uploads/2012/12/The-Road-to-a-50k-Mailing-List-250.jpg"> </td> <td valign="top"> <p align="center"> <img src="http://theenterprisemind.com/wp-content/themes/u-design/wpoptins_images/arrowdown.gif" width="273" height="114"> </p> <html> <head> <title>Enterprisemind Webform</title> </head> <body> <center> <table style="margin: 0px; padding: 0px; position: relative;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td align="center" valign="middle"> <form action="http://www.listwire.com/form/process.php" method="post"> Code (markup): That HAS to go before we'd even THINK about rounding the corners. Two tables for nothing, multiple bits of code that have no business in your markup any time after 1998... Hell, I can't even figure out where you're setting the blue background... but see that second HTML, HEAD and BODY? You can't do that -- PERIOD. You've got too many problems for us to even TRY adding what you are asking... you should probably learn a lot more about HTML and CSS before even attempting what you are asking; or hire someone to rewrite the ENTIRE page from scratch. I can't put it much more plainly than that. You're looking for a silver bullet fix when it needs to be burned at the stake. I MAY have some time later -- If so I'll toss together one of my infamous rewrites to show you what I mean.
Ok, here's how I'd have done that same site: http://www.cutcodedown.com/for_others/enterprisemind/template.html as with all my examples the directory: http://www.cutcodedown.com/for_others/enterprisemind is wide open for easy access to the gooey bits. Works in all modern browsers, IE8/lower doesn't get the shadows or rounded corners (oh noes, not that...) It also is opened up to be elastic design so it auto-enlarges for users using a different default font size. You MIGHT be able to extract how I did the form and stick it in your code, but that code has so many major issues I wouldn't even try -- at the same time you load this into Komposter, change anything, hit save, it'll probably shtup the whole thing. For JUST the form, the parts you'd care most about are the markup: <form action="http://www.listwire.com/form/process.php" method="post" id="mailingListJoin" /> <fieldset> <label for="mailingListJoinName">Name:</label> <input type="text" name="fullname" id="mailingListJoinName" /> <br /> <label for="mailingListJoinEMail">Email:</label> <input type="text" name="email" id="mailingListJoinEMail" /> <br /> <input type="submit" value="Give Me My Free eBook!" class="submit" /> <input type="hidden" name="bot_account" value="enterprisemind" /> <input type="hidden" name="bot_pass_standard" value="1" /> <input type="hidden" name="bot_pass_custom" value="0" /> <input type="hidden" name="bot_redirect" value="http://theenterprisemind.com/thank-you-50k/" /> <input type="hidden" name="bot_track_code" value="" /> <input type="hidden" name="bot_web_form_id" value="46566" /> <p> We Hate Spam Too. Your information will not be sold, leased, or shared. </p> </fieldset> </form> Code (markup): ... and the CSS for it: #mailingListJoin { overflow:hidden; /* prevent float indent */ zoom:1; /* trip haslayout, prevent float indent IE */ padding:114px 3.5em 0; font:normal 65%/200% tahoma,helvetica,sans-serif; background:url(http://theenterprisemind.com/wp-content/themes/u-design/wpoptins_images/arrowdown.gif) top center no-repeat; } #mailingListJoin fieldset { padding:1em 0.5em 0; color:#FFF; background:#237; -webkit-border-radius:0.5em; -moz-border-radius:0.5em; border-radius:0.5em; } #mailingListJoin p { line-height:1.4em; padding-top:0.5em; } #mailingListJoin label { display:inline-block; width:3.2em; text-align:right; } #mailingListJoin input { width:15em; padding:0.2em; font:normal 100%/120% tahoma,helvetica,sans-serif; border:1px solid #000; -webkit-border-radius:0.25em; -moz-border-radius:0.25em; border-radius:0.25em; -webkit-box-shadow: inset 1px 1px 2px #CCC; -moz-box-shadow: inset 1px 1px 2px #CCC; box-shadow: inset 1px 1px 2px #CCC; } #mailingListJoin input.submit { display:block; padding:0.25em 0; margin:0.75em auto 0; font-weight:bold; background:#EEE; -webkit-box-shadow: inset -1px -1px 2px 1px #CCC, inset 1px 1px 2px 2px #FFF; -moz-box-shadow: inset -1px -1px 2px 1px #CCC, inset 1px 1px 2px 2px #FFF; box-shadow: inset -1px -1px 2px 1px #CCC, inset 1px 1px 2px 2px #FFF; } #mailingListJoin .submit:active, #mailingListJoin .submit:focus, #mailingListJoin .submit:hover { background:#DDD; } Code (markup): The various -webkit and -moz versions are due to those browsers having this idiotic 'testing' prefix idiocy for CSS3 properties. Notice we have an actual fieldset wrapping the inputs and labels around your field labels -- their 'for' attributes pointing at the ID's on them like they're supposed to. Also that animated arrow I moved to the CSS since it's not really content, and as such has ZERO business in the HTML. It's somewhere between half and a third the code, take a good hard look at it to see exactly why most people are going to tell you to throw kompozer in the trash and learn to do it properly instead -- particularly if this is a money-making venture.
Use CSS border-radius property to get round corners or got to this site http://www.css3generator.com/ it will generate it for you for free
Very impressive!! This example is exactly how I want the auto responder form to look. So, are you offering these subdirectory files for me to upload with my FTP client or were they just for illustration?
If you want to use the code, go ahead and grab it. When I make my examples I do so without such restrictions in mind. Wouldn't make much sense otherwise.