Docs

[pdopchev]

Hi guys,

Been trying to customize some of the fields of a Contact 7 form. Would like to space out the checkboxes for “Alpine” “AT” Telemark” and “The 80 94 100 106 120 115 Twin Pin Tail FH” (see first screenshot)

Also tried to assign an id to a form field (Gender – see second screenshot) and have it display as a block but it affects everything else on the form. This is what I have for code:

<p style=”font-size:115%”>Gender <span style=”color:#ED1C24″>*</span><br />
[radio your-gender id:321 default:1 “Male” “Female”] </p>

.wpcf7-list-item #321 {
display: block;
}

or just

#321 {
display: block;
}

which still does not work…

link:http://www.dopchevproductions.com/test/skier-form/

Any suggestions?

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

span.wpcf7-list-item {
    padding-left: 19px;
}

In regards with gender radio boxes, add this code :

span.wpcf7-form-control-wrap.your-gender span {
    display: block;
}

Hope that helps.

[pdopchev]

Great! It works perfectly!

One more thing: how do I make the checkboxes under “What shapes of Romp skis are you interested in? *” in the 2 rows instead of one?

[Christopher]

Hi there,

Please update your code to :

<div class="x-column x-1-1 x-sm">first row content</div>
<div class="x-column x-1-1 x-sm">second row content</div>

Hope it helps.

[pdopchev]

Great! It works perfectly! If anybody else is looking for a way to do something similar, there is the final code line:

<p style=”font-size:115%”>What shapes of Romp skis are you interested in? <span style=”color:#ED1C24″>*</span><br />
<div class=”x-column x-1-1 x-sm”>[checkbox* your-shape-interest “The 80” “94” “100” “106”]
<div class=”x-column x-1-1 x-sm”>[checkbox* your-shape-interest “120” “115 Twin” “Pin Tail” “FH” ] </div></p>

[Joao]

Hi There,

Thanks for your input for the community, please let us know if we can help with anything else.

Joao

[pdopchev]

Actually, something else popped out – trying to figure out how to integrate the form id: wpcf7-f1024-p1022-o1 into the CSS so I could set in the Global Customizer and have this form look the same throughout the website.

I tried with putting as a class or div id in front of the code lines but it doesn’t seem to work:

.wpcf7-f1024-p1022-o1 input.wpcf7-form-control.wpcf7-text {
	max-width: 450px;
  width: 50%;
}

or

#wpcf7-f1024-p1022-o1 input.wpcf7-form-control.wpcf7-text {
	max-width: 450px;
  width: 50%;
}

So far this is all the code I have for the form:

/* Input Area Width & Mobile Width */
input.wpcf7-form-control.wpcf7-text {
	max-width: 450px;
  width: 50%;
}

@media (max-width: 767px) {
  input.wpcf7-form-control.wpcf7-text {
    width: 100%;
  }
}

/* Select Fields Width & Mobile Width */
select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required {
	max-width: 450px;
  width: 25%;
}

@media (max-width: 480px) {
  select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required {
    width: 100%;
  }
}

/* Text Area Width & Mobile Width */
textarea.wpcf7-form-control.wpcf7-textarea {
  max-width: 450px;
  width: 50%;
}

@media (max-width: 767px) {
  textarea.wpcf7-form-control.wpcf7-textarea {
    width: 100%;
  }
}

/* List Item Spacing */
span.wpcf7-list-item {
    padding-left: 19px;
}

link: http://www.dopchevproductions.com/test/skier-form/

Your help would be greatly appreciate it!

[Rad]

Hi there,

Your site is mostly down and inaccessible, it only works on the first load, and with few other tries but it never finished loading. I can’t confirm your CSS,

This site can’t be reached

The connection was reset.

ERR_CONNECTION_RESET

Please let me know when’s its okay.

Thanks!

[pdopchev]

Hi, the host provider was having network issues, the website is up and running now.

[Christopher]

Hi there,

Instead of using form ID, use page ID :

.page-id-1022 input.wpcf7-form-control.wpcf7-text {
	max-width: 450px;
  width: 50%;
}

Hope it helps.

[pdopchev]

Hi, thanks for the help!

Actually I am after something else here and should have specified better. Have a button with a lightbox container on some products, which displays the form when you click on it – would be great, if I have the form look the same throughout the website. Just tried the code snippet above with specifying a product id instead of page id and it doesn’t seem to work… Any ideas?

link: http://www.dopchevproductions.com/test/product/100-custom/

make it look like this one: http://www.dopchevproductions.com/test/skier-form/

[Joao]

Hi There,

They look the same for me on the first glance, would you mind providing more details about what you are looking to improve.

Thanks

Joao

[pdopchev]

Sure,

The form in the second link has a specified width of the text fields, checkboxes, select boxes, etc. – the one in the first does not (in the lightbox). It is the same form, just missing the CSS applied to the second one. Trying to apply a global CSS to the form so it shows up the same everywhere…

Thanks!

[Friech]

Hi There,

Form ID will be different for every page, so your css won’t affect the other form even if this is the very same form you created. Please use the class .wpcf7 instead, that class is common to all contact form 7.

Hope it helps, Cheers!

[pdopchev]

Thanks for the hint, what would be a good work around, if there are other forms on the website I do not want to change? Like this one at the bottom of the page: http://www.dopchevproductions.com/test/custom-skis/

[Author]

Posts