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?

If you’re working with a client-provided HTML embed form that cannot be styled through their platform, you can still style it within Webflow using CSS. Here’s exactly how to do it:

1. Understand the Embed Code Structure

• Review the form’s HTML tags inside the Webflow Embed element.
• Look for class names or IDs on the form elements like <form>, <input>, <label>, <button>, etc.
• If the embed code does not include classes or IDs, you will need to target default tags carefully (e.g., input, textarea, button).

2. Add Custom CSS in Webflow

• Drag a "Embed" block onto the page alongside or after the form.

• Create a <style> tag inside the Embed block and write your CSS there.

• For example, to style all text inputs and submit buttons:

  Example styles:

• input { padding: 10px; border-radius: 4px; border: 1px solid #ccc; }

• button { background-color: #0070f3; color: white; padding: 10px 20px; border: none; }

• If the form uses IDs or specific tag names like input[type="submit"], you can target them specifically without needing classes.

3. Use Webflow's Page-Specific Custom Code if Needed

• Go to Page Settings → Custom Code and place your <style> block under the Before section.
• This keeps your design cleaner if you don’t want extra Embed blocks scattered across your page.

4. Force Styles When Necessary

• Some external forms come with inline styles that are hard to override.
• Add more specific selectors or use !important to ensure your styles apply, e.g., input { border: 1px solid #000 !important; }.

5. Be Aware of CORS and iFrames

• Important: If the form is served inside an <iframe>, you cannot style it directly with CSS inside Webflow. Styling requires that the form content lives directly on your page (not in an iframe).
• If the form is in an iframe, ask the client if API or styling adjustments are possible.

6. Test Responsiveness

• Ensure your styling makes the form responsive by controlling widths, padding, and margins under Webflow’s different breakpoints.

Summary

You can style a client’s HTML embed form in Webflow by carefully targeting the form’s native HTML elements with custom CSS inside a <style> tag, placed in an Embed block or Page Settings. Confirm that the form is part of the DOM (not inside an iframe) to fully control the styling.