# Form Styling **URL:** \ **Category:** General Discussion\ **Created:** [December 18, 2015, 12:46pm UTC](https://forum.mautic.org/t/form-styling/3018 "2015-12-18T12:46:15Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![vishwajeet](https://avatars.discourse-cdn.com/v4/letter/v/34f0e0/32.png) [@vishwajeet](https://forum.mautic.org/u/vishwajeet)\ **Post date:** [December 18, 2015, 12:46pm UTC](https://forum.mautic.org/t/form-styling/3018/1 "2015-12-18T12:46:15Z")
Hello, This post is for short tutorial who are looking for styling form in wordpress. (I hope you have mautic plugin installed) **1) to style the fields:** Code: .mauticform-input, .mauticform-textarea, .mauticform-selectbox { background-color: #eee !important; border: none !important; width: 80% !important; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; border-radius: 0 !important; font-size: 14px; color: #999 !important; padding: 16px !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } I have used only text and text area and select fields for my form, if you have other fields too in form, just right click on that field\>\>select inspect and find the class and add in code. For e.g. for select box field you can use .mauticform-selectbox **2) for styling button:** Code: .mauticform-button { color: #FF6600 !important; margin: 8px auto 0; cursor: pointer; font-size: 20px; font-weight: 500; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 6px 20px; line-height: 1.7em; background: transparent; border: 2px solid; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s; } **3) hover effects on button** Code: .mauticform-button:hover { background-color: #eee; border-color:#eee; padding: 6px 20px !important; } You can see live example here http://www.yaduinbound.com/contact-us/ or http://www.yaduinbound.com/start-your-project/ I used select field too in second link to style form as per your branding of website you just need to change values in code like color codes, border radius etc. I hope it helps many people who are looking for form styling. Thanks and love mautic. ---
**Author:** ![vishwajeet](https://avatars.discourse-cdn.com/v4/letter/v/34f0e0/32.png) [@vishwajeet](https://forum.mautic.org/u/vishwajeet)\ **Post date:** [December 18, 2015, 12:46pm UTC](https://forum.mautic.org/t/form-styling/3018/2 "2015-12-18T12:46:15Z")
Hello, This post is for short tutorial who are looking for styling form in wordpress. (I hope you have mautic plugin installed) 1) to style the fields: `.mauticform-input, .mauticform-textarea, .mauticform-selectbox { background-color: #eee !important; border: none !important; width: 80% !important; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; border-radius: 0 !important; font-size: 14px; color: #999 !important; padding: 16px !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }` I have used only text and text area and select fields for my form, if you have other fields too in form, just right click on that field\>\>select inspect and find the class and add in code. For e.g. for select box field you can use .mauticform-selectbox 2) for styling button: `.mauticform-button { color: #FF6600 !important; margin: 8px auto 0; cursor: pointer; font-size: 20px; font-weight: 500; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 6px 20px; line-height: 1.7em; background: transparent; border: 2px solid; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s; }` 3) hover effects on button `.mauticform-button:hover { background-color: #eee; border-color:#eee; padding: 6px 20px !important; }` You can see live example here [http://www.yaduinbound.com/contact-us/](http://www.yaduinbound.com/contact-us/) or [http://www.yaduinbound.com/start-your-project/](http://www.yaduinbound.com/start-your-project/) I used select field too in second link to style form as per your branding of website you just need to change values in code like color codes, border radius etc. I hope it helps many people who are looking for form styling. Thanks and love mautic. ---
**Author:** ![vishwajeet](https://avatars.discourse-cdn.com/v4/letter/v/34f0e0/32.png) [@vishwajeet](https://forum.mautic.org/u/vishwajeet)\ **Post date:** [December 18, 2015, 12:51pm UTC](https://forum.mautic.org/t/form-styling/3018/3 "2015-12-18T12:51:32Z")
I don’t know why it appears like that but there is “-” instead of bullets. ---
**Author:** ![ninjoan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ninjoan/32/1005_2.png) [@ninjoan](https://forum.mautic.org/u/ninjoan)\ **Post date:** [December 20, 2015, 6:17am UTC](https://forum.mautic.org/t/form-styling/3018/4 "2015-12-20T06:17:15Z")
oh thanks @vishwajeet i will try later ---
**Author:** ![escopecz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/escopecz/32/370_2.png) [@escopecz](https://forum.mautic.org/u/escopecz)\ **Post date:** [December 21, 2015, 8:23am UTC](https://forum.mautic.org/t/form-styling/3018/5 "2015-12-21T08:23:42Z")
@vishwajeet try to use the `code` tags to display the code. ---
**Author:** ![vishwajeet](https://avatars.discourse-cdn.com/v4/letter/v/34f0e0/32.png) [@vishwajeet](https://forum.mautic.org/u/vishwajeet)\ **Post date:** [December 21, 2015, 9:43am UTC](https://forum.mautic.org/t/form-styling/3018/6 "2015-12-21T09:43:21Z")
oh, thanks @escopecz ---
**Author:** ![ninjoan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ninjoan/32/1005_2.png) [@ninjoan](https://forum.mautic.org/u/ninjoan)\ **Post date:** [December 21, 2015, 6:00pm UTC](https://forum.mautic.org/t/form-styling/3018/7 "2015-12-21T18:00:02Z")
@vishwajeet I check your website [http://www.yaduinbound.com/start-your-project/](http://www.yaduinbound.com/start-your-project/) Good website but I have a question con can use the Time of Project as some kind of filter in Mautic for a sample if the client selects Inbound Marketing this make that lead goes to some Mautic List in specific? Or how you use the List and Radio Check option in this case ---
**Author:** ![escopecz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/escopecz/32/370_2.png) [@escopecz](https://forum.mautic.org/u/escopecz)\ **Post date:** [December 22, 2015, 7:56am UTC](https://forum.mautic.org/t/form-styling/3018/8 "2015-12-22T07:56:41Z")
@vishwajeet I edited your original post and added the code tags. Hope you don’t mind. ---
**Author:** ![vishwajeet](https://avatars.discourse-cdn.com/v4/letter/v/34f0e0/32.png) [@vishwajeet](https://forum.mautic.org/u/vishwajeet)\ **Post date:** [December 22, 2015, 12:30pm UTC](https://forum.mautic.org/t/form-styling/3018/9 "2015-12-22T12:30:54Z")
thanks @escopecz @ninjoan I am using it to gather information only, as leads contact from website form considered as hot leads. so process is: 1. lead fills the details on contact form 2. points are added into score and lead will be added on defined list (created one only for website leads) 3. they will get the thank you email 4. if they open thank you email action will be triggered as send email containing company brochure and CEO message 5. points will be added in score and lead will be pushed to integration (in our vtiger crm where all custom fields created as per form fields and mapped through integration) and then we can use form information in CRM. let me know if have any other question, Thanks ---
**Author:** ![ninjoan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ninjoan/32/1005_2.png) [@ninjoan](https://forum.mautic.org/u/ninjoan)\ **Post date:** [December 23, 2015, 3:44am UTC](https://forum.mautic.org/t/form-styling/3018/10 "2015-12-23T03:44:19Z")
Oh thanks @vishwajeet im doing the same but using SuiteCRM, i though Mautic can filter lead by List or Radio Box Thanks mate ---
**Author:** ![jwldub](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@jwldub](https://forum.mautic.org/u/jwldub)\ **Post date:** [May 9, 2016, 10:12pm UTC](https://forum.mautic.org/t/form-styling/3018/11 "2016-05-09T22:12:59Z")
@vishwajeet your forms look wonderful on your website! I am trying to accomplish this as well. It loos like you are using the Divi theme? That is the same theme I use in Wordpress… I am having trouble implementing your code… Where would I paste this code? Into the Divi Them Options Custom CSS area? Or somewhere in the advanced settings within the actual text module? Thats in advance for your help! ---
**Author:** ![vishwajeet](https://avatars.discourse-cdn.com/v4/letter/v/34f0e0/32.png) [@vishwajeet](https://forum.mautic.org/u/vishwajeet)\ **Post date:** [May 10, 2016, 4:12am UTC](https://forum.mautic.org/t/form-styling/3018/12 "2016-05-10T04:12:01Z")
@jwldub yes I am using divi theme, just go to epanel and paste code in custom CSS area. Can you share URL ? What problem you are facing? The code is ready to use, just paste and you will get beautiful forms. If you are using extra fields you need to find CSS class for them. Share your URL so I can suggest you solution. thanks ---
**Author:** ![jwldub](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@jwldub](https://forum.mautic.org/u/jwldub)\ **Post date:** [May 10, 2016, 6:50pm UTC](https://forum.mautic.org/t/form-styling/3018/13 "2016-05-10T18:50:28Z")
@vishwajeet [http://i.blurb.ly/free-cardinals-tickets](http://i.blurb.ly/free-cardinals-tickets) ---
**Author:** ![jwldub](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@jwldub](https://forum.mautic.org/u/jwldub)\ **Post date:** [May 10, 2016, 6:50pm UTC](https://forum.mautic.org/t/form-styling/3018/14 "2016-05-10T18:50:58Z")
also: [http://homefrontprogram.com/get-started/](http://homefrontprogram.com/get-started/) ---
**Author:** ![vishwajeet](https://avatars.discourse-cdn.com/v4/letter/v/34f0e0/32.png) [@vishwajeet](https://forum.mautic.org/u/vishwajeet)\ **Post date:** [May 11, 2016, 6:46am UTC](https://forum.mautic.org/t/form-styling/3018/15 "2016-05-11T06:46:44Z")
do you added code in custom CSS? I can’t see any code here. ---
**Author:** ![jwldub](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@jwldub](https://forum.mautic.org/u/jwldub)\ **Post date:** [May 11, 2016, 9:07pm UTC](https://forum.mautic.org/t/form-styling/3018/16 "2016-05-11T21:07:19Z")
I got it figured out! Thanks, this is great! I have been looking for ways to edit the style of the forms for quite some time. Is there a way to stylize each specific form? What if we have more than one form on a website and want to stylize each one differently? ---
**Author:** ![jwldub](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@jwldub](https://forum.mautic.org/u/jwldub)\ **Post date:** [May 11, 2016, 9:15pm UTC](https://forum.mautic.org/t/form-styling/3018/17 "2016-05-11T21:15:40Z")
I integrated the code on this site, however the style is not working… The forms on this site are embedded using iframe instead of javascript… Is your code only working for forms embedded with javascript? [http://i.blurb.ly/free-cardinals-tickets](http://i.blurb.ly/free-cardinals-tickets) ---
**Author:** ![jwldub](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@jwldub](https://forum.mautic.org/u/jwldub)\ **Post date:** [May 14, 2016, 10:48pm UTC](https://forum.mautic.org/t/form-styling/3018/18 "2016-05-14T22:48:50Z")
@vishwajeet I integrated the code on this site, however the style is not working… The forms on this site are embedded using iframe instead of javascript… Is your code only working for forms embedded with javascript? [http://i.blurb.ly/free-cardinals-tickets](http://i.blurb.ly/free-cardinals-tickets) ---
**Author:** ![vishwajeet](https://avatars.discourse-cdn.com/v4/letter/v/34f0e0/32.png) [@vishwajeet](https://forum.mautic.org/u/vishwajeet)\ **Post date:** [May 15, 2016, 6:30am UTC](https://forum.mautic.org/t/form-styling/3018/19 "2016-05-15T06:30:55Z")
@jwldub do you use mautic wordpress plugin to add forms? ---
**Author:** ![jwldub](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@jwldub](https://forum.mautic.org/u/jwldub)\ **Post date:** [May 15, 2016, 2:02pm UTC](https://forum.mautic.org/t/form-styling/3018/20 "2016-05-15T14:02:13Z")
No i se the iframe for this particular site, because the iframe allows the “redirect URL” to stay within the iframe and not take them to a completely different page. If you go to the page and fill out the form, you will see the flow. We use this is a contest opt-in. Once they fill out the form, within the iframe it shows the share on Facebook or Twitter option, which is actually a mautic landing page appearing within the iframe. If I use javascript on this, then after they fill out the form, the redirect does not work the same. [Next page](https://forum.mautic.org/t/form-styling/3018.md?page=2)