Ho can I align fields in a form to be consistant

[Anonymous]

Hello,

When i create a form and embed this onto a website, it comes up like this:




Does anyone know how i can align the 'Enquiry details' with the others in the form.

Thanks,
Rebecca

[Anonymous]

Rebecca,

Have you tried setting the field width on each of the fields? The Enquiry Details may be acting up because it's not a single text line like the other fields. Also you can control the style of the form via the CSS in the form settings.
 

[Joe_Reitz]

I agree with BeHai– the different input method could be throwing off how it's displayed. If you're not CSS-savvy, make sure the "Field Width" property is the same as the other fields (blue bar on the right as you're building forms). But also be sure to check that the "Label Width" is consistent, as well. Usually it's the simple things 😉 

If that doesn't work, share the CSS.

[Anonymous]

Hello,

I have treid resizing the label width but do not have any luck.

Here is the CSS theme:

#mktoStyleLoaded {
  /* css load detection, do not remove */
  color:#123456;
}
.mktoForm fieldset {
  border:1px solid #aeb0b6;
}
.mktoForm fieldset legend{
  padding:0 1em;
}


.mktoForm input[type=text],
.mktoForm input[type=url],
.mktoForm input[type=email],
.mktoForm input[type=tel],
.mktoForm input[type=number],
.mktoForm input[type=date],
.mktoForm select.mktoField,
.mktoForm textarea.mktoField{
  -webkit-appearance: none;
  background-color:#fff;
  line-height:1.5em;
  color:#000;
  border:1px solid #aeb0b6;
  padding:0.2em 0.3em;
  box-shadow:inset 1px 1px 4px 1px #ddd;
  min-height:1.9em;
}
.mktoForm input[type=text]:focus,
.mktoForm input[type=url]:focus,
.mktoForm input[type=email]:focus,
.mktoForm input[type=tel]:focus,
.mktoForm input[type=number]:focus,
.mktoForm input[type=date]:focus,
.mktoForm select.mktoField:focus,
.mktoForm textarea.mktoField:focus{
  outline:none;
  border:1px solid #888;
  color:#000;
}

.mktoForm select.mktoField::-ms-expand {
  display: none;
}

.mktoForm select.mktoField {
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: "";
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
  padding:0.2em 22px 0.2em 0.3em;
  background:#fff url(../images/arrow-down-bk.png) center right no-repeat;
}

.mktoForm .mktoLogicalField{
  border:1px solid transparent;
}

.mktoForm input.mktoField.mktoInvalid,
.mktoForm textarea.mktoField.mktoInvalid,
.mktoForm select.mktoField.mktoInvalid,
.mktoForm .mktoLogicalField.mktoInvalid{
  border:1px solid #8C0005;
}

.mktoForm .mktoRadioList > label,
.mktoForm .mktoCheckboxList > label{
  margin-bottom:0.6em;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.mktoForm input[type=checkbox],
.mktoForm input[type=radio] {
  width:1em;
  height:1em;
  opacity:0;
}

.mktoForm input[type=checkbox] + label:before,
.mktoForm input[type=radio] + label:before
{
  content: "";  
  position:absolute;
  width:1em;
  height:1em;  
  margin-left:-1.5em;
  line-height:1em;
  font-family:Arial, sans-serif;
  font-size:13px;
  border:1px solid #ccced2;
  box-shadow:inset 1px 1px 4px 1px #ddd;
  background:#fff;
}

.mktoForm .mktoLabelToLeft input[type=checkbox] + label:before,
.mktoForm .mktoLabelToLeft input[type=radio] + label:before{
  margin-left:0;
  right:0.3em;
}

.mktoForm input[type=checkbox]:checked + label:before,
.mktoForm input[type=radio]:checked + label:before {
  text-align:center;
  color:#000;
}

.mktoForm input[type=checkbox]:focus + label:before,
.mktoForm input[type=radio]:focus + label:before{
  border:1px solid #888;
}

.mktoForm input[type=checkbox] + label:before{

}
.mktoForm input[type=checkbox]:checked + label:before{
  content:"\2713 ";
}

.mktoForm input[type=radio] + label:before{
  border-radius:1em;
}
.mktoForm input[type=radio]:checked + label:before{
  background-image:url(../images/dot-bk.png);
  background-position:3px 3px;
  background-repeat:no-repeat;
}

.mktoForm.mktoNoCheckedSupport input[type=checkbox] + label:before,
.mktoForm.mktoNoCheckedSupport input[type=radio] + label:before{
  display:none;
}
.mktoForm.mktoNoCheckedSupport select.mktoField,
.mktoForm.ie7 select.mktoField,
.mktoForm.ie6 select.mktoField {
  background-image:none;
  padding-right:0.3em;
}

.mktoForm textarea.mktoField{
  resize: none;
}

If you could help that would be greatly appreciated.

Thanks,
Rebecca