https://www.machform.com/forums/ MachForm Community Forums Topic: [css] A pointer to some input fields (address/names) en Thu, 18 Jun 2026 11:34:37 +0000 https://www.machform.com/forums/topic/css-a-pointer-to-some-input-fields-addressnames#post-23292 Mon, 18 May 2015 04:22:26 +0000 vikrif 23292@https://www.machform.com/forums/ <p>When I paste the above CSS in the form theme and select "Save Settings" it will hang on "Saving"... The error is present only when the "url" tag is present in the CSS code otherwise it saves the changes. </p> https://www.machform.com/forums/topic/css-a-pointer-to-some-input-fields-addressnames#post-22865 Wed, 04 Mar 2015 10:54:25 +0000 yuniar 22865@https://www.machform.com/forums/ <p>Thank you for sharing this!</p> <p>Just to add some information, you don't need to add the code to each of your view.css file manually. Simply put the CSS code into the "Advanced CSS" section of your theme and you should be good. </p> https://www.machform.com/forums/topic/css-a-pointer-to-some-input-fields-addressnames#post-22853 Mon, 02 Mar 2015 18:49:29 +0000 Fa 22853@https://www.machform.com/forums/ <p>Hi,<br /> Several people using our forms have been confused in entering the values in the address fields, not knowing which label was for which field. Lately, i came across gravity form and noticed how they emphasize the input areas.<br /> So below a little css i am using to mimic what they did, that is when the field gets the focus, a little arrow next to the label (which is below the input area) points to the area.<br /> ex: <a href="http://demo.gravityforms.com/advanced-contact-form/" rel="nofollow">http://demo.gravityforms.com/advanced-contact-form/</a></p> <p>In view.css add the below code:<br /> <pre><code>#main_body form li.address div span input:focus + label, #main_body form li.simple_name div span input:focus + label { background-image: url(&quot;../../../images/arrows/arrow.png&quot;); background-position: 100% 50%; background-repeat: no-repeat; display: inline-block; padding-right: 20px; width: auto !important; }</code></pre> <p>And the arrow.png has been added in the arrows folder of machform.<br /> It is applied on the address and simple name fields.</p> <p>Note: you might want to add this also to the view.css of your individual forms in the data folder (or it may work to just add in the advanced css - not tested though).</p> <p>Regards, </p>