Add Contact Form Clean into a Column

I've added a row with two columns in it. I then want to add the "Contact Form Clean" UI component into one of the two columns.

However no matter what I do, I cannot drag, right click and insert or add this component into a column.

It will only add in as it's own block as part of the body. Even then I cannot drag it into a column once added to the body.

I notice this with a lot of other pre-defined components. Seems rather limiting.

Can someone tell me how to add these types of items into columns please for an alternate layout.

Yeah not sure why it's that way. Here is what I did to get around that limitation.

In the Overview pane,

  1. I drag/drop the "Contact Form Clean" to the body.
  2. expand the Block to expose the Form
  3. drag/drop the Form on to the Column you want it in
  4. drag/drop a DIV into the same Column
  5. drag/drop FORM on to the DIV and select the DIV
  6. click the HTML pane, click the ATTRIBUTES pane
  7. in the class section type in "contact-clean"
  8. click APPLY

There doesn't seem to be any difference in doing it this way, it's just a little extra to do.


Saj, perfect - thanks.

It was creating the div with the original name I was forgetting to do - thanks again.

Does seem rather limiting to have to do this, as lots of things within Bootstrap need to be in columns for better layout and design.

Maybe we can get this in a future update, as there is no reason I can see why you shouldn't be able to just drag a component like a form into an existing column and still keep all of the same code without having to do this silly workaround.

I'll +1 this request. I tried to do something similar and had the same problem. It would be nice to add forms and whatever to columns with out restriction, or maybe an expert (on your own) mode that allows it.

It's most likely not the "columns" that are giving you issues here though guys, it's the "container" setting. You cannot drag a container into another container, only 1 container in a row or section etc. Therefore, because most of the online downloaded components are wrapped in a container (flaw on the part of those constructing them for uploading in my opinion, since it's more work needed to adjust it all if you want to use it lol), you need to drag the components to an area outside of a container, then drag it into your chosen column or row etc. That's the main reason why you cannot just drag and drop a lot of the components.

Other than that, using the Div way is best for the rest.

Jo, This is very interesting about containers.

  • You cannot drag a container into another container, only 1 container in a row or section etc.
  • because most of the online downloaded components are wrapped in a container, you need to drag the components to an area outside of a container, then drag it into your chosen column or row etc.

Conceptually I have been thinking of Containers as being used only under the Body, then Rows, then Columns, headings, paragraphs, Html etc.

What is the purpose of Containers (fluid and standard)? Can containers be pulled into Rows? I guess not. We learn by doing with Bootstrap. I am a nooby, but I am thinking of Containers as a Super Div. and you would use Div's in Containers generally.

  • What is the difference between a Container and a Div.?
  • What is the difference between a Standard Container and a Fluid Container?

These are things we need to learn about.

I'm totally the wrong person to try explaining what containers are about lol. I would suggest checking out the W3C schools site and see what they have to say on them, unless of course someone else has a good description.

What I do know is that if you use a container div in the body as the website wrapper, you will not be able to drag any of the online components into your page, you will need to do as Saj outlined and drag it to a location at the top or bottom of the page that is outside your main container div. Then in the DOM Overview, just drag the inner column,row or whatever the next layer is inside the container to the location you want the item. It's not a super hard thing to do, just a tedious thing that I'm hoping will be addressed in some future update when they have more of the main features added so that it will be easier for us to deal with containers within components.

I personally wrap my site in a container, so that kind of forces me to do the Saj method, but some people don't do that and they wrap their page parts in them instead. I guess that would be the eaiser way to make sure container components work better, but most of the time you still have to do the Saj method (haha we have a new method! lol) so I just opt to do the full container instead as it seems to work best for me, mostly because I use a lot of right and left sidebar grids which pretty much need the container wrapper to work correctly.

Other than that, try some google searches for Container Div description and I'm sure there are lots of them.

The containers are used specifically by the Grid system.

The component in question, doesn't contain a .container component it's just a DIV with the class .contact-clean. However, the BSS Devs had assigned the Block labeling to that DIV (which you can see in the Overview pane) which apparently makes the component unable to be placed in pretty much anything. Luckily you can deconstruct the component a bit and without much effort to bypass that limitation.

Other people build their components with the .container component because it makes the component align and spaced correctly when they are using rows/columns. If the user component looked miss-aligned and things not flowing right would it be a component that you might skip over? ;)


That worked for me Saj. Thank you! Added the DIV

Glad you got it worked out :)