I have to design a form for a wordpress plugin.
This plugin will be used on multiple websites. My doubt was how will I be able to make the
form design as generic as possible so that it will fit well and blend well with the wordpress theme’s design. Since the form could be placed in the page, post or the widget area.
I also need to consider that most WordPress themes are now “responsive” to reflect the increasing viewing of websites on mobile devices.
I would like to know your opinion on this topic.
Thanks in Advance.
This is a actually a good question, but on the other hand it is a bit broad because you need to consider a lot of things , and as for now, the details supplied by you are very limited.
First , I will assume that the form will be on the front-side of the site .
In order to achieve best – compatibility , IMHO, you will need to :
1 – Simplify the HTML as possible, but at the same time..
2 – Use all the required standard elements ( and also HTML5 support )
3 – do not directly apply any CSS ( see below )
4 – Make sure it is responsive as for the DIV order
5 – Make an easy targeted unique class
6 – If you must specify width / height, make conditionals for widget…
In my experience, the more minimal the code is , the better it “adapts” itself to the theme.
The fact is , that most themes already do ( or should ) include styles for the most common form elements , such as
input-fields etc. ( because of the comments form, and also well- it is required).
you can also pick up the sample data which has form elements and read also the theme testing process. so if you will stick to those classes and elements ( for example those of the comment form ) you will be fine in most cases . All this is under conditional – because you did not really specify what kind of form you need and how complicated it is .
as for point 3 :
There are several approaches .
- make a number of well designed generic “form themes” that the user
can choose but one option to..
- leave an empty css and a place to embed own css In settings.
- Create a complete set of CSS IDs and classes, with applied rules from
a color picker for example
- combination of all of the above
All of this answer can be summed to one word “flexibility” .
You need to think of letting the users the maximum flexibility possible , but at the same time supply them with the right TOOLS to achieve it.