Forms on Landing Pages - Responsive

[Anonymous]

How can you make the forms that are built in Marketo and placed on our landing pages (that we host via WordPress) be responsive?

[SanfordWhiteman]

It is better to give specific examples (dimensions and devices) of where the form is not responsive.

[Anonymous]

Thank you, my Webmaster found the answer she was looking for.

[SydneyMulligan]

Great, do you mind sharing what worked in case someone stumbles upon this post in the future looking for an answer to the same question? You should also mark the question as resolved.

[Anonymous]

could your webmaster (or you) share please? I have the same question. thanks!

[Tim_Langlois1]

Marketo forms are responsive if the web page or landing page they are on are responsive. No changes are needed to the form itself.

[Anonymous]

All, I have been working on the form for a day now. Our site is 100% responsive. The form itself is not responsive because form fields in Marketo are set to only accept a fixed width. I have adjusted the rows and input fields to be 100% of the width at all times; however, what should work in an ideal world still does not work with the form I am styling. Below is the original code that I used. You can adjust the percentages to suit your needs. I am going to be using @media queries to adjust the form fields for specific screen sizes. That way I can have additional control on how the form is displayed on all devices. I can reply with a link to the final form design once I move it from dev to live.

.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 textarea.mktoField, .mktoForm select.mktoField {
    width:100% !important;
}
.mktoFormCol, .mktoFieldWrap {
    width:100% !important;
}

[Anonymous]

Below is the final coding I used on our landing page. View page: VHT Magic Kingdom | Exploria Vacations

.HSform {background: #ef8b04;padding:10px;}
.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 textarea.mktoField, .mktoForm select.mktoField {
    width:355px !important;
}
.mktoFormCol, .mktoFieldWrap {
    width:355px !important;
}
.mktoForm .mktoButtonWrap.mktoCleanGray .mktoButton {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  color: #050505 !important;
  padding: 10px 20px !important;
  background: -moz-linear-gradient(
  top,
  #ffffff 0%,
  #ffffff) !important;
  background: -webkit-gradient(
  linear, left top, left bottom,
  from(#ffffff),
  to(#ffffff)) !important;
  -moz-border-radius: 4px !important;
  -webkit-border-radius: 4px !important;
  border-radius: 4px !important;
  border: 1px solid #38b8b4 !important;
  -moz-box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 2px rgba(255,255,255,1) !important;
  -webkit-box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 2px rgba(255,255,255,1) !important;
  box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 2px rgba(255,255,255,1) !important;
  text-shadow:
  0px -1px 0px rgba(000,000,000,0.2),
  0px 1px 0px rgba(255,255,255,0.4) !important;
}
@media (max-width: 1550px) {.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 textarea.mktoField, .mktoForm select.mktoField {
    width:275px !important;
}
.mktoFormCol, .mktoFieldWrap {
    width:275px !important;
}
}
@media (max-width: 1220px) {.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 textarea.mktoField, .mktoForm select.mktoField {
    width:200px !important;
}
.mktoFormCol, .mktoFieldWrap {
    width:200px !important;
}
}
@media (max-width: 980px) {.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 textarea.mktoField, .mktoForm select.mktoField {
    width:650px !important;
}
.mktoFormCol, .mktoFieldWrap {
    width:650px !important;
}
}
@media (max-width: 840px) {.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 textarea.mktoField, .mktoForm select.mktoField {
    width:500px !important;
}
.mktoFormCol, .mktoFieldWrap {
    width:500px !important;
}
}
@media (max-width: 650px) {.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 textarea.mktoField, .mktoForm select.mktoField {
    width:400px !important;
}
.mktoFormCol, .mktoFieldWrap {
    width:400px !important;
}
}
@media (max-width: 520px) {.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 textarea.mktoField, .mktoForm select.mktoField {
    width:280px !important;
}
.mktoFormCol, .mktoFieldWrap {
    width:280px !important;
}
}