Question

How do i put a border around certain questions with CSS

Forms

Updated July 31, 2015

asked on July 30, 2015

I'm wanting to but a box or even just a gray area behind to single line questions on a form to make sure I differentiate a certain question. Here is an example of what I'm hoping for:

Is there some CSS code for this?

Thanks!

0 0

Answer

SELECTED ANSWER

replied on July 30, 2015 • Show version history

Hello James,

You might be able to accomplish this by putting the required fields in a collection and then removing the header and Add button using Javascript.

Below is an image containing the code and the resulting image:

where 'cf-collection-append.form-q' is the class name of the Add button and '.cf-section-header' is the class name of the header which says "Collection" by default.

Here is the code in an easier to read version.

CSS Code:

.CollectionName {
  border-style: solid;
  border-width: 5px;
}

JavaScript Code:

$(document).ready(function() {
	$('.cf-collection-append.form-q').remove();
    $('.cf-section-header').remove();
});

0 0

Replies

replied on July 30, 2015

Since there is no specific target to customize the border for, I don think you can. Perhaps use Custom HTML and do something like this?

Forms Design:

Forms Preview:

1 0

replied on July 30, 2015

Might need to use a section header at the top of that and then one at the bottom. Remove the text from the title/label of the sections and then apply a CSS Class name to the section header above the two fields. Then you can use that to assign a border with CSS. I do not know about having the submit button in that border though.

1 0

replied on July 30, 2015

Thanks, guys. That might work.

0 0

replied on July 30, 2015

Hi Winston,

That would be awesome!

I added the code you've sent but it's only removing the "Collections" title and the "Add" button.

I'm relatively new so I don't know if I'm using collections wrong or anything like that. But maybe you can tell me if the coding is right.

0 0

replied on July 30, 2015

Modify the CSS and change CollectionName to the actual CSS class name you're using for the collection. If your collection doesn't have a CSS class name, then you can give it one first and then use that in the CSS.

1 0

replied on July 30, 2015

Hello James,

I apologize, I forgot to also note that the .CollectionName in the CSS was the class name that I gave to my collection. Alex's solution is correct and you can assign a class name through the advance options on the Collection element.

1 0

replied on July 31, 2015

That worked perfect! Thanks, guys!

0 0

You are not allowed to follow up in this post.

Question

Question

How do i put a border around certain questions with CSS

Answer

Replies

Sign in to reply to this post.