How can I style a HTML embed form in Webflow for job applications, when the embed code from the client has no styling options in their back-end?

You can style an HTML embed form in Webflow even if the client-provided code doesn’t come with built-in styling. You’ll need to target and override the default styles using custom CSS in Webflow.

1. Add the Embed Code

• Go to the page in Webflow where the form should appear.
• Drag in an Embed element (from the Add panel under “Components”).
• Paste the client’s form embed code into the editor and click Save & Close.

2. Inspect the Embedded Elements

• Publish your Webflow site and view it in a browser.
• Right-click the form and choose “Inspect” (in Chrome or similar dev tools).
• Note all form element class names or IDs (e.g., <input class="xyz-contact"> or <form id="applyForm">).

3. Add Custom Styles in Webflow

• Go to Page Settings (or open the Embed custom code again).

• Use a <style> tag within a Webflow Embed block or in the Page Settings → Before tag section.

• Write CSS targeting the embedded elements. Example:

• <style> #applyForm input { width: 100%; padding: 10px; border: 1px solid #ccc; } </style>

• You can add styling for other elements like textarea, button, .form-label, etc.

4. Avoid Style Conflicts

• If the external form uses generic class names, you may need to add more specific selectors (e.g., wrap the Embed in a div with a custom Webflow class like .job-form-wrapper, then use .job-form-wrapper input to avoid global overrides).
• Always check for !important declarations if defaults aren’t overridden—only use as a last resort.

5. Use Webflow Styles When Possible

• If the form is not inside an iframe, you can also:
• Add a Webflow class to the embed’s wrapper div, then apply styles through the Webflow Designer.
• For minor tweaks (e.g., margins, spacing), this is often cleaner than writing raw CSS.

Summary

To style a client-provided HTML embed form in Webflow, inspect the form’s elements and apply custom CSS through the Embed element or Page Settings. Target the form fields using specific selectors, and isolate styles to avoid conflicts.