https://www.machform.com/forums/ MachForm Community Forums Topic: Smaller form size en Sun, 03 May 2026 23:05:41 +0000 https://www.machform.com/forums/topic/smaller-form-size#post-442 Thu, 13 Dec 2007 20:21:48 +0000 yuniar 442@https://www.machform.com/forums/ <p>Hey, thanks for sharing! </p> https://www.machform.com/forums/topic/smaller-form-size#post-441 Thu, 13 Dec 2007 17:09:57 +0000 adrianwilliams 441@https://www.machform.com/forums/ <p>I've had a play and if anyone wants to use it - here it is. I've used small fields in the machform config so the other settings may need adjusting.<br /> <pre><code>body { background:#fffff; font-family:&quot;Lucida Grande&quot;, Tahoma, Arial, Verdana, sans-serif; font-size:x-small; margin:8px 0 16px; text-align:center; } #form_container { background:#fff; border:1px solid #ccc; margin:0 auto; text-align:left; width:450px; } #top { display:block; height:0px; margin:0px auto 0; width:500px; } #footer { width:500px; clear:both; color:white; text-align:center; width:500px; padding-bottom: 0px; font-size: 0%; } #footer a{ color:white; text-decoration: none; border-bottom: 1px dotted #999999; } #bottom { display:block; height:0px; margin:0 auto; width:500px; } form.appnitro { margin:-38px 20px 0; padding:0 0 5px; } /**** Logo Section *****/ h1 { background-color:#FFE175; margin:0; min-height:0; padding:0; text-decoration:none; text-indent:-8000px; } h1 a { display:block; height:100%; min-height:40px; overflow:hidden; } img { behavior:url(css/iepngfix.htc); border:none; } /**** Form Section ****/ .appnitro { font-family:Lucida Grande, Tahoma, Arial, Verdana, sans-serif; font-size:x-small; } .appnitro li { width:75%; } form ul { font-size:100%; list-style-type:none; margin:0; padding:0; width:100%; } form li { display:block; margin:0; padding:1px 2px 1px 4px; position:relative; } form li:after { clear:both; content:&quot;.&quot;; display:block; height:0; visibility:hidden; } .buttons:after { clear:both; content:&quot;.&quot;; display:block; height:0; visibility:hidden; } .buttons { clear:both; display:block; margin-top:0px; } * html form li { height:1%; } * html .buttons { height:1%; } * html form li div { display:inline-block; } form li div { color:#444; margin:0 4px 0 0; padding:0 0 8px; } form li span { color:#444; float:left; margin:0 4px 0 0; padding:0 0 8px; } form li div.left { display:inline; float:left; width:48%; } form li div.right { display:inline; float:right; width:48%; } form li div.left .medium { width:100%; } form li div.right .medium { width:100%; } .clear { clear:both; } form li div label { clear:both; color:#444; display:block; font-size:9px; line-height:9px; margin:0; padding-top:3px; } form li span label { clear:both; color:#444; display:block; font-size:9px; line-height:9px; margin:0; padding-top:3px; } form li .datepicker { cursor:pointer !important; float:left; height:16px; margin:.1em 5px 0 0; padding:0; width:16px; } .form_description { border-bottom:1px dotted #ccc; clear:both; display:inline-block; margin:0 0 1em; } .form_description[class] { display:block; } .form_description h2 { clear:left; font-size:160%; font-weight:400; margin:0 0 3px; } .form_description p { font-size:95%; line-height:normal; margin:0 0 12px; } form hr { display:none; } form li.section_break { border-top:1px dotted #ccc; margin-top:9px; padding-bottom:0; padding-left:9px; padding-top:13px; width:97% !important; } form ul li.first { border-top:none !important; margin-top:0 !important; padding-top:0 !important; } form .section_break h3 { font-size:110%; font-weight:400; line-height:130%; margin:0 0 2px; } form .section_break p { font-size:85%; margin:0 0 10px; } /**** Buttons ****/ input.button_text { overflow:visible; padding:0 7px; width:auto; } .buttons input { font-size:120%; margin-right:5px; } /**** Inputs and Labels ****/ label.description { border:none; color:#222; display:compact; font-size:95%; font-weight:700; line-height:150%; padding:0 0 1px; } span.symbol { font-size:115%; line-height:130%; } input.text { background:#fff url(../../../images/shadow.gif) repeat-x top; border-bottom:1px solid #ddd; border-left:1px solid #c3c3c3; border-right:1px solid #c3c3c3; border-top:1px solid #7c7c7c; color:#333; font-size:100%; margin:0; padding:2px 0; } input.file { color:#333; font-size:100%; margin:0; padding:2px 0; } textarea.textarea { background:#fff url(../../../images/shadow.gif) repeat-x top; border-bottom:1px solid #ddd; border-left:1px solid #c3c3c3; border-right:1px solid #c3c3c3; border-top:1px solid #7c7c7c; color:#333; font-family:&quot;Lucida Grande&quot;, Tahoma, Arial, Verdana, sans-serif; font-size:100%; margin:0; width:100%; } select.select { color:#333; font-size:100%; margin:1px 0; padding:1px 0 0; background:#fff url(../../../images/shadow.gif) repeat-x top; border-bottom:1px solid #ddd; border-left:1px solid #c3c3c3; border-right:1px solid #c3c3c3; border-top:1px solid #7c7c7c; } input.currency { text-align:right; } input.checkbox { display:block; height:13px; line-height:1.4em; margin:6px 0 0 3px; width:13px; } input.radio { display:block; height:13px; line-height:1.4em; margin:6px 0 0 3px; width:13px; } label.choice { color:#444; display:block; font-size:100%; line-height:1.4em; margin:-1.55em 0 0 25px; padding:4px 0 5px; width:90%; } select.select[class] { margin:0; padding:1px 0; } *:first-child+html select.select[class] { margin:1px 0; } .safari select.select { font-size:120% !important; margin-bottom:1px; } input.small { width:75%; } select.small { width:50%; } input.medium { width:50%; } select.medium { width:50%; } input.large { width:75%; } select.large { width:100%; } textarea.small { height:5.5em; } textarea.medium { height:10em; } textarea.large { height:20em; } /**** Errors ****/ #error_message { background:#fff; border:1px dotted red; margin-bottom:1em; padding-left:0; padding-right:0; padding-top:4px; text-align:center; width:99%; } #error_message_title { color:#DF0000; font-size:125%; margin:7px 0 5px; padding:0; } #error_message_desc { color:#000; font-size:100%; margin:0 0 .8em; } #error_message_desc strong { background-color:#FFDFDF; color:red; padding:2px 3px; } form li.error { background-color:#FFDFDF !important; border-bottom:1px solid #EACBCC; border-right:1px solid #EACBCC; margin:3px 0; } form li.error label { color:#DF0000 !important; } form p.error { clear:both; color:red; font-size:10px; font-weight:700; margin:0 0 5px; } form .required { color:red; float:none; font-weight:700; } /**** Guidelines and Error Highlight ****/ form li.highlighted { background-color:#fff7c0; } form .guidelines { background:#f5f5f5; border:1px solid #e6e6e6; color:#444; font-size:100%; left:97%; line-height:130%; margin:0 0 0 8px; padding:8px 10px 9px; position:absolute; top:0; visibility:hidden; width:27%; z-index:1000; } form .guidelines small { font-size:105%; } form li.highlighted .guidelines { visibility:visible; } form li:hover .guidelines { visibility:visible; } .no_guidelines .guidelines { display:none !important; } .no_guidelines form li { width:97%; } .no_guidelines li.section { padding-left:9px; } /*** Success Message ****/ .form_success { clear: both; margin: 0; padding: 90px 0pt 100px; text-align: center } .form_success h2 { clear:left; font-size:160%; font-weight:normal; margin:0pt 0pt 3px; } /*** Password ****/ ul.password{ margin-top:60px; margin-bottom: 60px; text-align: center; } .password h2{ color:#DF0000; font-weight:bold; margin:0pt auto 10px; } .password input.text { font-size:170% !important; width:380px; text-align: center; } .password label{ display:block; font-size:120% !important; padding-top:10px; font-weight:bold; } #li_captcha{ padding-left: 5px; } #li_captcha span{ float:none; } /** Embedded Form **/ .embed #form_container{ border: none; } .embed #top, .embed #bottom, .embed h1{ display: none; } .embed #form_container{ width: 100%; } .embed #footer{ text-align: left; padding-left: 10px; width: 99%; } .embed #footer.success{ text-align: center; } .embed form.appnitro { margin:0px 0px 0; } /*** Calendar **********************/ div.calendar { position: relative; } .calendar table { cursor:pointer; border:1px solid #ccc; font-size: 11px; color: #000; background: #fff; font-family:&quot;Lucida Grande&quot;, Tahoma, Arial, Verdana, sans-serif; } .calendar .button { text-align: center; padding: 2px; } .calendar .nav { background:#f5f5f5; } .calendar thead .title { font-weight: bold; text-align: center; background: #dedede; color: #000; padding: 2px 0 3px 0; } .calendar thead .headrow { background: #f5f5f5; color: #444; font-weight:bold; } .calendar thead .daynames { background: #fff; color:#333; font-weight:bold; } .calendar thead .name { border-bottom: 1px dotted #ccc; padding: 2px; text-align: center; color: #000; } .calendar thead .weekend { color: #666; } .calendar thead .hilite { background-color: #444; color: #fff; padding: 1px; } .calendar thead .active { background-color: #d12f19; color:#fff; padding: 2px 0px 0px 2px; } .calendar tbody .day { width:1.8em; color: #222; text-align: right; padding: 2px 2px 2px 2px; } .calendar tbody .day.othermonth { font-size: 80%; color: #bbb; } .calendar tbody .day.othermonth.oweekend { color: #fbb; } .calendar table .wn { padding: 2px 2px 2px 2px; border-right: 1px solid #000; background: #666; } .calendar tbody .rowhilite td { background: #FFF1AF; } .calendar tbody .rowhilite td.wn { background: #FFF1AF; } .calendar tbody td.hilite { padding: 1px 1px 1px 1px; background:#444 !important; color:#fff !important; } .calendar tbody td.active { color:#fff; background: #529214 !important; padding: 2px 2px 0px 2px; } .calendar tbody td.selected { font-weight: bold; border: 1px solid #888; padding: 1px 1px 1px 1px; background: #f5f5f5 !important; color: #222 !important; } .calendar tbody td.weekend { color: #666; } .calendar tbody td.today { font-weight: bold; color: #529214; background:#D9EFC2; } .calendar tbody .disabled { color: #999; } .calendar tbody .emptycell { visibility: hidden; } .calendar tbody .emptyrow { display: none; } .calendar tfoot .footrow { text-align: center; background: #556; color: #fff; } .calendar tfoot .ttip { background: #222; color: #fff; font-size:10px; border-top: 1px solid #dedede; padding: 3px; } .calendar tfoot .hilite { background: #aaf; border: 1px solid #04f; color: #000; padding: 1px; } .calendar tfoot .active { background: #77c; padding: 2px 0px 0px 2px; } .calendar .combo { position: absolute; display: none; top: 0px; left: 0px; width: 4em; border: 1px solid #ccc; background: #f5f5f5; color: #222; font-size: 90%; z-index: 100; } .calendar .combo .label, .calendar .combo .label-IEfix { text-align: center; padding: 1px; } .calendar .combo .label-IEfix { width: 4em; } .calendar .combo .hilite { background: #444; color:#fff; } .calendar .combo .active { border-top: 1px solid #999; border-bottom: 1px solid #999; background: #dedede; font-weight: bold; }</code></pre> https://www.machform.com/forums/topic/smaller-form-size#post-440 Thu, 13 Dec 2007 14:55:59 +0000 adrianwilliams 440@https://www.machform.com/forums/ <p>Thanks Yuniar<br /> As always, first class support. :) </p> https://www.machform.com/forums/topic/smaller-form-size#post-439 Thu, 13 Dec 2007 11:10:45 +0000 yuniar 439@https://www.machform.com/forums/ <p>Changing the form height would take more effort than the form width, you'll need to change the padding between fields.</p> <p>To change the form width, search for this:<br /> <pre><code>#form_container { background:#fff; border:1px solid #ccc; margin:0 auto; text-align:left; width:640px; }</code></pre> <p><code></code><br /> Change the width above.</p> <p>You will also need to change the width for #top and #bottom, which you should see it below the code above.</p> <p>To change the font size of your field labels, search for this:<br /> <pre><code>#main_body label.description { border:none; color:#222; display:block; font-size:95%; font-weight:700; line-height:150%; padding:0 0 1px; }</code></pre> <p><code></code><br /> Adjust the font-size to suit your need.</p> <p>To change the height of the fields, search for this:<br /> <pre><code>#main_body form li { display:block; margin:0; padding:4px 5px 2px 9px; position:relative; }</code></pre> <p><code></code><br /> Play around with the padding values to get the best result. </p> <p>To change the width of the fields, it depends on the size you defined from the admin panel.<br /> There are three sizes: small, medium and large.</p> <p>So for example, if you have an input with a medium size, you will need to adjust this code:<br /> <pre><code>#main_body input.medium { width:50%; }</code></pre> <p><code></code><br /> If you have a large input, adjust this one:<br /> <pre><code>#main_body input.large { width:99%; }</code></pre> <p><code></code><br /> Are you using Firefox?<br /> I suggest to install Firefox and then install Firebug plugin.</p> <p>Firebug is a great tool for this purpose. You can simply click a form field and it will show you the respective CSS code which applied for that field.</p> <p>Try to check it here: <a href="http://getfirebug.com/" rel="nofollow">http://getfirebug.com/</a></p> <p>Let me know if you need further help. </p> https://www.machform.com/forums/topic/smaller-form-size#post-438 Wed, 12 Dec 2007 00:30:16 +0000 adrianwilliams 438@https://www.machform.com/forums/ <p>Standalone version </p> https://www.machform.com/forums/topic/smaller-form-size#post-430 Mon, 10 Dec 2007 06:41:38 +0000 yuniar 430@https://www.machform.com/forums/ <p>Hi Adrian,</p> <p>Are you going the use the embedded version of the form (the one using iframe) or the standalone version? </p> https://www.machform.com/forums/topic/smaller-form-size#post-428 Mon, 10 Dec 2007 04:35:22 +0000 adrianwilliams 428@https://www.machform.com/forums/ <p>Hello all,<br /> I'm trying to get to grips with the css editing and would like a bit of guidance on making a simple form smaller - to fit a 575x360pix window.<br /> All I need is name, phone number, message, email address and a reset and submit button.</p> <p>I need to be able to change the font size, width and depth of the form and possible size the fields (height also)</p> <p>Once I get the css right I can tailor sizes to suit. Where should I start ? </p>