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 your client’s HTML embed form comes with no built-in styling options, you can still style it in Webflow using custom CSS. Here's how to properly apply your own design styles.

​

1. Understand the Structure of the Embed Code

​

• Paste the embed code into a Webflow Embed element on your page.
• Preview the published site in a browser.
• Use your browser’s Inspect Element tools to view the structure and class or ID names of the elements inside the embed code (e.g., form, input, labels, buttons).

​

2. Use Custom CSS in Webflow

​

• Webflow won’t let you style embedded external elements (like iframe content or external forms) using Webflow Designer tools—so you’ll need to apply custom CSS.
• Go to Page Settings (or use the Embed element inside the page) and add a <style> tag with your CSS rules.
• Identify the classes or element tags used (like form, input, label, etc.) and write your custom styles targeting those.

​

Example (inside the <style> tag):

​

<style>
  form input[type="text"] {
    padding: 10px;
    border: 1px solid #ccc;
    width: 100%;
  }

  form label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
  }

  form button {
    background-color: #2c6cff;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
  }
</style>

​

Note: This will only work if the embed is static HTML (i.e., form fields are in your page DOM). If the embed is an iframe, you cannot style it directly due to cross-origin restrictions.

​

3. Apply Webflow Classes to the Embed

​

• Wrap the Embed element in a Webflow Div Block and apply a Webflow class.
• Use this parent class to scope your CSS more specifically to avoid collisions with other site elements.
• Example: Give the wrapper a class job-form-wrapper and write CSS like:

​

<style>
  .job-form-wrapper input {
    border-radius: 4px;
    border: 1px solid #ddd;
    font-family: inherit;
  }
</style>

​

4. Dealing with Iframe-Based Embeds

​

• If the embed is an iframe, you can't directly style internal elements unless the form provider allows it via query parameters or has customization options in their dashboard.
• In that case, request your client to check with the form provider for custom themes, CSS injection, or using API-generated HTML instead of iframe.

​

Summary

​

To style a client’s unstyled embedded form in Webflow, use custom CSS inside a <style> tag targeting the HTML elements injected into the page. This works for static HTML embeds but not if the form is rendered via an iframe, which cannot be styled from Webflow.