Form Styling

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.
1 Like

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

I don’t know why it appears like that but there is “-” instead of bullets.

oh thanks @vishwajeet i will try later

@vishwajeet try to use the code tags to display the code.

oh, thanks @escopecz

@vishwajeet I check your website 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

@vishwajeet I edited your original post and added the code tags. Hope you don’t mind.

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

Oh thanks @vishwajeet im doing the same but using SuiteCRM, i though Mautic can filter lead by List or Radio Box

Thanks mate

@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!

@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

@vishwajeet

http://i.blurb.ly/free-cardinals-tickets

also:

http://homefrontprogram.com/get-started/

do you added code in custom CSS? I can’t see any code here.

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?

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

@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

@jwldub do you use mautic wordpress plugin to add forms?

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.