▼
Streaming live at 10am (PST)

How to style embeded HTML?

#1

I'm creating an ecommerce site using a shopping cart called Mals. A buy button uses the following sample code. My issue is how do I style the form elements and buttons using Webflow? Assigning a class obviously does not work because you can't attach the class to the individual elements.

Is there any way I can style the elements within Webflow? Any ideas? Thanks in advance!

form action="http://secure.aitsafe.com/cf/add.cfm" method="post">
input type="hidden" name="userid" value="mals-9">
input type="hidden" name="product[]" value="Ultimate Omega">
input type="hidden" name="price" value="59.45">
select name="product[]">
option value="size">size
option value="color">color
option value="">
/select>
input type="image" src="www.test.com" height="ButtonMaker0.Panel4.viewstack2.Form37.FormItem58.HBox59.imgHeight" width="ButtonMaker0.Panel4.viewstack2.Form37.FormItem58.HBox59.imgWidth" Alt="Buy now!">
/form

How to make Shoprocket buy link as clickable HTML embed (turn it into button)
#2

Hi @Bghead8che

Are you using the embed widget and copying and pasting the HTML right into the document or are you using the embed widget to past script?

If you are pasting the HTML right into the document then there is know reason you can't place a class on the individual elements.

example:

 <input class="yourwebflowclassname" type="hidden" name="userid" value="mals-9">

You would then create the class on a native webflow form input field and style it there.

Giving embedded html webflow class styles
#3

I think I understand what you are saying. The code I am pasting is HTML not a script. I pasted it in using the HTML widget (the only way to do so, correct?).

If I understand you correctly here is the procedure:

  1. Paste in the HTML using the HTML widget.
  2. Manually recreate the form elements in Webflow.
  3. Assign the form elements a class and styling.
  4. Amend the pasted code to use the styles created.
  5. Delete the Webflow form elements.

Is this the correct procedure for styling HTML widget elements? I'd greatly appreciate feedback as to wither or not this is correct from anyone. wink Is there an easier way?

Thanks!

-Brian

#4

You go it right. Based on what you described and the code you presented I think that is the easiest way to do it.

closed #5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.