Adding custom styling to your Lead widgets HTML elements.

The lead widgets come with built-in methods to change the UI for the common elements, but you sometimes need to add custom styles to match the buttons, inputs, validation messages to your website brand style. To allow you to add custom styles, we’ve enabled the option to add Advanced Style rules to all of your lead widgets. Please see the details below. Each lead widget has a unique ID that you can get from your lead widget code. Please see the screenshot below. To add the custom style to any lead widgets, edit your lead widget and click on the Advanced Styling tab in the left sidebar. Next, scroll to the end of the section, and you’ll find a textbox where you can add your custom CSS rules. Here are some of the classes you can apply your custom styling. Make sure to replace the key with your lead widget key highlighted in red. Form Submit Button: #mwa-key-xxxxxx #mwa-submit-btn { /* Your Code Here */} Form Input Elements: #mwa-key-xxxxxx .mwa-field { /* Your Code Here */} Validation Messages: #mwa-key-xxxxxx .mwa-error { /* Your Code Here */} Like the above-defined classes, you can add custom code to all HTML elements wrapped inside the lead widget container div. If you have any questions, please feel free to reach out to us at support@mywebaudit.com.

Still puzzling over something?