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 the embedded form from the client does not have any styling options in their back-end, you can still customize its appearance using Webflow's built-in styling options. Here are a few steps you can follow to style the HTML embed form in Webflow for job applications:
1. Add an HTML embed element to your Webflow project: Start by dragging and dropping an HTML embed element onto your page where you want the form to appear.
2. Paste the embed code: Once you have the HTML embed element on your page, paste the embed code provided by the client into the HTML embed element's code block. Make sure to paste the entire code snippet as provided.
3. Style the form container: By default, the embed will adopt the styles from your Webflow project's global settings. You can apply custom styling to the form container using the Class or ID attributes. Select the HTML embed element and assign a class or ID to it in the element settings panel. Then, navigate to the Style panel to apply CSS properties and customize the appearance of the form container, such as background color, padding, border, etc.
4. Style form fields: To style the form fields (e.g., input fields, checkboxes, dropdowns), you will need to inspect the embedded form using your browser's developer tools to identify the class names, IDs, or element selectors associated with each field. Once you have identified these elements, you can target them in Webflow using custom code or by defining a class or ID for the specific form elements in the Style panel. Apply your desired CSS properties to customize the form field appearance (e.g., font size, color, background color, border styling, etc.).
Note: Since the embedded form comes from an external source, using the Webflow Designer might have certain limitations when it comes to directly editing the form's HTML structure. Depending on the complexity of the form and the provided embed code, you may need to leverage custom CSS or JavaScript to achieve more advanced styling and functionality.
Remember to thoroughly test the styled form to ensure that it remains functional and is compatible across different devices and browsers.