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
.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.
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
@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
thanks @escopecz @ninjoan I am using it to gather information only, as leads contact from website form considered as hot leads.
so process is:
lead fills the details on contact form
points are added into score and lead will be added on defined list (created one only for website leads)
they will get the thank you email
if they open thank you email action will be triggered as send email containing company brochure and CEO message
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.
@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?
@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
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.