Forms have always been regarded as an indispensable component of a website
where users are expected to provide a specific kind of input. If you've been
running a WordPress powered website then you'd be well familiar with the
awesome plugins that can render you the flexibility of creating forms which can
further be incorporated into multiple web pages. One such WP plugin that has
served as a 'magic wand' for creating advanced forms is Gravity Forms.
Specially suited for e-commerce websites, this plugin can be conveniently
integrated with popular applications and online services such as: PayPal,
Authorize.net, Zapier and many more. Apart from this, the 1.5 version of
Gravity Forms plugin brought along a brand new feature called 'Ready Classes'
which provided us an excellent means of building unique layouts for the fields
within the forms. Keep on reading the post as I'll take you on a journey of
using these Ready Classes for performing minor/major tweaks to the forms.
Ready Classes- A closer look:-
Ready classes are the classes names which can be assigned to the parents
elements for every form field. These classes make use of default styles which
are available within the form's stylesheet. Therefore, you can choose from a
wide collection of options/buttons which allow you to moderate the look and
feel of fields available within a specific form. In addition to these highly
accessible buttons, there are handy popups which include a well-defined list of
different Ready Classes that allow you to customize the forms in your own
unique way. Lastly, you can also enjoy the convenience of adding a new Ready
Class with a simple double-click.
Insights on using Ready Classes for customizing forms:-
To get started with adding a Ready class to a particular form field, you
can get on with opening the form builder and initiating the form editing
process. After that, you'll have to decide about the field to which the new
ready class needs to be added. For tis, simply head on to 'Advanced tab' where
you'll find a CSS Class Name. Here, just insert the names of all the ready
classes which you wish to integrate with the form field.
Here's a list of few default CSS ready classes(available in the Gravity
Forms stylesheet) for you to choose from:
1. gf_line
This is a CSS ready class that allows you to position the form field inline
horizontally(in relation to other fields).
2. gf_left_half
Compatible with “top label” form layout setting, this ready class will let
you position the field towards the left column out of the two form layouts.
3. gf_right_half
Just like gf_left_half, even this ready class is just compatible with “top
label” form layout setting. With this ready class, you'll be able to position
the form field towards the right column out of the available layouts. You may
opt for adding the gf_left_half and gf_right_half classes for arranging the
fields in a style that they appear parallel to each other. Here, you must
remember that the gf_left_half class is being added to the first field and
gf_right_half class to the second one.
4. Ready
Classes applicable in case of forms with lists:
Ø gf_list_2col
This ready class will allow you to make big
modifications to checkbox lists, followed by converting the checkboxes into 2
column formats which are spaced proportionally.
Ø gf_list_3col
Exactly similar to the gf_list_2 col, the
gf_list_3 col will transform the checkboxes into proportionally spaced 3 column
formats.
Ø gf_list_4col
With this ready class, you can change your
checkboxes into proportionally spaced 4 column formats. You can use this ready
class with checkbox lists and multiple form label position settings.
Ø gf_list_5col
Use this ready class for changing the checkboxes
into 5 column formats. This class can be used with checkbox lists as well as
different form label position settings.
Ø gf_list_inline
With this ready class, you'll be able to position
the checkbox list inline horizontally. Quite similar to other ready class, this
one can also be used with checkbox lists and varied form label position
settings.
Ø gf_list_height_25
This ready class lets you assign a 25px height
value to different checkbox items included within the available list. Issues
such as hanging floats remain at bay, with the use of this ready class.
Ø gf_list_height_50
Using this ready class enables you to assign 50px
height value to different checkbox items and preventing issues like hanging
floats. You may use this ready class with a form label position setting of your
preference.
Ø gf_list_height_75
This ready class will assign a 75px height value
to all checkbox items and prove as a viable option for keeping issues like
“hanging floats” at bay.
Ø gf_list_height_100
Use this ready class to assign a 100px height
value to checkbox items available with the list. Plus, you may use this ready
class with a form label position setting(s) of your choice.
Ø gf_list_height_125
This ready class assigns a 125px height value to
checkbox items, followed by offering you the flexibility of using the same with
a form label position setting that is in sync with your requirements.
Ø gf_list_height_150
Use this ready class for assigning a 150px height
value to checkbox items within the available list. If you want to remain safe
from the hanging floats error, this ready class can serve as your savior.
We're done!
Conclusion:-
Explained above are just a few ready classes
available for modifying the form fields, there are many other miscellaneous one
which come with their unique set of functions. Do share your experiences of
using any/all of the above mentioned CSS ready classes using the comments
section below.
Author Biography:-
Samuel Dawson is a expert professional with
Designs2HTML Ltd, a perfect PSD to HTML company having long years of experience. Samuel has
effective strategy to gain knowledge from different online portals & he
also shares his knowledge further.
Publisher's Last Words:
This is a guest post by Samuel Dawson, Thanks to Samuel Dawson for this awesome and useful information.if you want to post your article on http://www.allaboutcomputing.net you also can contact us. For more about Computer programming and for many more about Computer or web designing stay connected with http://www.allaboutcomputing.net .
I hope you have got answers of some Questions by this small post and I know you have lot of questions, So please feel free to ask in comment section or you can mail me my e mail id is : tushar.bedekar11@gmail.com
.jpg)
0 comments:
Post a Comment