MachForm Community Forums » MachForm 3

1. Fa
   Member

   Hi,
   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.
   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.
   ex: http://demo.gravityforms.com/advanced-contact-form/

   In view.css add the below 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("../../../images/arrows/arrow.png");
       background-position: 100% 50%;
       background-repeat: no-repeat;
       display: inline-block;
       padding-right: 20px;
       width: auto !important;
   }

   And the arrow.png has been added in the arrows folder of machform.
   It is applied on the address and simple name fields.

   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).

   Regards,

   Posted 9 years ago #
2. 

   yuniar

   Thank you for sharing this!

   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.

   ---

   MachForm Founder

   Posted 9 years ago #

3. vikrif
   Member

   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.

   Posted 9 years ago #

RSS feed for this topic

Reply

You must log in to post.