Form Styling Tips

With the release of version 2.0.0 of DOIFD, you know have the ability to completely customize the look of the DOIFD forms.

Take a look at the form below. It’s a DOIFD form but it looks completely different from the standard DOIFD form. Now some of you may look at this form and go yuuuuuckkkk! Well, this is why I”m a developer and not a designer. The point of this exercise is to show you how you can easily change the overall look of the form.

My Ugly Form

Please wait...
Loader

To achieve this look, all I need to do is add the following style code to the Form Custom CSS option in the options section.

.doifd_user_reg_form {
border-radius: 36px 36px 36px 36px;
-moz-border-radius: 36px 36px 36px 36px;
-webkit-border-radius: 36px 36px 36px 36px;
border: 19px double #000000;
background: #e7a61a;
}
.doifd_user_reg_form input[type=text] {
background: #ffffff;
}

Below is a short video with basic instructions on how to use the custom css options

As you can see, the possibilities are endless and the DOIFD form can easily be styled to fit in with any web site design. You can create your own class or modify the styles that are already used in the forms. Below are a list of classes and id’s that the DOIFD forms use.

Main Form

Free Version

.doifd_user_reg_form – This is the main form class
#doifd_button_holder – Holds the submit button

Premium Version

.doifd_user_reg_form – This is the main form class
#doifd_statusmsg – Error / Success Messages
#doifd_waiting – the waiting icon
#doifd_button_holder – Holds the submit button

 

Widget Form

Free Version

.widget_doifd_user_reg_form – This is the main form class
#doifd_widget_button_holder – Holds the submit button

Premium Version

.widget_doifd_user_reg_form – This is the main form class
#doifd_widget_statusmsg – Error / Success Messages
#doifd_widget_waiting – the waiting icon
#doifd_widget_button_holder – Holds the submit button