CMS Development

LeighM
Participant

Horizontal Form Styling

All of our forms are extremely long height wise. We are trying to create a "sqaure" form and tighten it up a bit so it takes on a shape of a square- adding more width to it. I'm not well versed in html/css code, so having difficulty trying to manipulate it. Any help?? 

0 Upvotes
6 Replies 6
TRooInbound
Key Advisor | Partner
Key Advisor | Partner

Horizontal Form Styling

Hi @LeighM,

 

HubSpot gives this type of style by default you need to just drag form elements. 

Please refer this link for more info or let us know if you're looking for more interactive designs. (feel free to mail us at hello@trooinbound.com)

 

 

Did my post help answer your query? Help the Community by marking it as a solution.

TRooInbound Team

For more help and solutions, please visit at www.trooinbound.com or email at hello@trooinbound.com

0 Upvotes
LeighM
Participant

Horizontal Form Styling

No, I am aware of this. I don't want form fields side by side. What I want it to look like...What I want it to look like...What it looks like now...What it looks like now...

0 Upvotes
TRooInbound
Key Advisor | Partner
Key Advisor | Partner

Horizontal Form Styling

Hi @LeighM,

 

Oh! now I got what do you want!

 

Just remove text from label text and place same text in placeholder like this how to add placeholder text

 

for remove '*' from your design and other styles, you need to add style to your CSS Stylesheet.

span.hs-form-required {
    display: none;
}

input, select {
    height:40px;
    padding:0 10px;
   width:100%;
}

 

 

Did my post help answer your query? Help the Community by marking it as a solution.

TRooInbound Team

For more help and solutions, please visit at www.trooinbound.com or email at hello@trooinbound.com

LaurenLokker
Contributor | Diamond Partner
Contributor | Diamond Partner

Horizontal Form Styling

@TRooInbound how would I add a slight drop shadow around the box to make it stand out from a white background?

0 Upvotes
TRooInbound
Key Advisor | Partner
Key Advisor | Partner

Horizontal Form Styling

Hi @LaurenLokker,

 

you can add this with box-shadow property in CSS like,

input {
      box-shadow: 0px -1px 10px rgba(0,0,0,.1);
}

I have set the black color with some opacity in the demo. choose color accordingly your design.

 

Team TRooInboud.  

TRooInbound
Key Advisor | Partner
Key Advisor | Partner

Horizontal Form Styling

Hi @LeighM and @LaurenLokker,

 

Did my post help answer your query? Help the Community by marking it as a solution.

 

Team TRooInbound