Your embedded form can look right until its submit button picks up a blue background, a dark hover colour or another site-wide style. The first job is to find which layer is setting that colour. Make these changes on the WordPress site that hosts the form. Styling the surrounding static page will not change the form inside the iframe.
Before you begin
Take a screenshot of the current button and note your intended normal and hover colours. Work on a staging copy or a test form where possible. Changing Site Settings can affect buttons across the entire WordPress site. If only one form is affected, start with that widget’s local controls.
1. Open the source form page in Elementor
In WordPress, open the page containing the form and choose Edit with Elementor. Open Site Settings from the editor menu or top toolbar. In newer interfaces you may also find it under Elementor → Editor → Site Settings. Look for Theme Style → Buttons, or a section labelled Buttons.
2. Check the site-wide Normal and Hover styles
Under Normal, inspect the text, background and border colours. Open a colour control and use its Clear, Reset or eraser control to remove an explicit colour you do not want. Repeat under Hover. Also check the background type: a gradient or background image can remain after a single colour is cleared. Do not reset the whole site kit just to fix one button.
3. Clear local form-widget overrides
Select the actual form widget. For Elementor’s Form widget, open Style → Buttons. For the Fluent Forms widget or another form-plugin widget, look for its Submit Button or Button styling section. Check both Normal and Hover. Clear conflicting background, text and border colours at this level too. If a colour is linked to a global swatch, inspect that binding rather than changing the shared swatch for the whole site.
Clear is not the same as transparent
Clearing a control removes that explicit setting and allows another matching CSS rule or fallback to win. Setting the colour to transparent writes a transparent background: it can still override the form plugin’s colour. If your goal is to use the plugin’s or your custom CSS colours, start by clearing the unwanted setting. A cleared control can still fall back to a global style, so check the published result.
4. Set the intended colours in the right place
Use the form plugin’s own styling controls, its custom CSS area or a carefully scoped Elementor rule. An embedded form is a separate document: CSS on the outer static page does not automatically reach inside it. Put source-form styling on the WordPress side. Avoid a blanket rule for every button on the website.
5. Test the published form, not just the editor
Save the page, clear the relevant Elementor and page caches, then open the source form and its embedded version. Check normal, hover, keyboard focus and disabled or submitting states. Check phone and tablet layouts as well. Keep a visible focus indicator and sufficient text contrast.
Still seeing the wrong colour?
Inspect the button in your browser’s developer tools and look at the winning background-color rule. A theme rule, a global binding, a form-plugin stylesheet or an !important declaration may be winning. Remove the unwanted override or adjust the narrowly scoped rule. Do not assume that clearing one Elementor control removes every other styling layer.
References: Elementor Site Settings, Theme Style and Form widget styling. Labels can vary between Elementor versions and form plugins.