Apply webflow classes to embedded form

Design help Custom code
1

Overall, this question is about applying some webflow classes to an embedded form in webflow. Currently I just wanted to test if I could get elements inside my form by tag name. I started with a simple test, just getting all my h2 tags in my form. I also added an h2 into webflow for comparison.

The following code works as expected (the h2 tags all say “cat”) for the h2 inside webflow, but has no effect on the h2’s inside my embedded form. When I open the console and expand my element list the h2’s in my form appear, but the debugger includes a message that says “value below was evaluated just now.” This makes me think that my code can’t see the h2’s in my form because they haven’t been built yet, but I put this code just before the body tag and also inside a webflow ready wrapper. Any ideas on what to do?

Read only link: https://preview.webflow.com/preview/cloud-thirds?utm_source=cloud-thirds&preview=952763beb8d2c9566198e768eb090dfd

script
var Webflow = Webflow || ;
Webflow.push(function () {
console.log(“ready!”);
var h2Els = document.getElementsByTagName(‘h2’);
console.log(h2Els);
for (var i = 0; i < h2Els.length; i++) {
h2Els[i].innerText = “cat”;
}
});
/script

2

Hi @Jeremy_D I think that’s possible. But just to be sure, can you please post your read-only link?

4

Its hard to answer. Anyway first try your code on codepen.

This code works fine.

<script>
var elem = $('#embedForm h2');

$.each(elem, function () {
		$(this).text( "Some new text." );
});
</script>

HTML

<form id="embedForm">
<h2>Hello</h2>
<h2>World</h2>
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
  <input type="submit" value="Submit">
</form>

image
image1093×337 18.3 KB

Publish → Result:
image

If you talk about form element - again should work fine (Same idea/trick).
image

after

image
image969×291 6.59 KB

Please test if your Heading is H2.

5

After doing some research I don’t think this is possible. I think because it violates the same origin policy (Same-origin policy - Wikipedia). Anyway, I think that I can’t access anything in my embedded form via javascript because it comes form Cognito forms rather than webflow.

If I’m wrong I’d be more than happy to be corrected as my route around this would be to hardcode the css tags and therefore lose all the power of webflow style classes.

6

Have you checked this?

https://www.cognitoforms.com/support/168/Style--Publish/Iframe-embedding

7

Thanks! I was actually just looking at that documentation. I tried passing in my own style sheet but it wouldn’t let me because it was cross platform. Currently I’m trying to pass in the webflow url stylesheet, but I’ll need accessibility to style it with tags to access all the elements in the form. But I don’t think I can edit the webflow style sheet directly. Any other ideas?

8

What you can do is, once you’ve found the classes of the fields and labels, etc of your form:

  1. Drag a form element into the WF canvas
  2. Give those classes to the input fields to the ones in the form you just added
  3. Once finished remove the form from the canvas
  4. Export your style sheet file
  5. Pass it to the Cognito forms as mentioned in the document
1 Like
9

But doesn’t the file have to be hosted by webflow?

10

Well you need to link your form from cognito to the Webflow stylesheet.