Forms on Landing Pages - Responsive

Anonymous
Not applicable

Forms on Landing Pages - Responsive

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

7 REPLIES 7
SanfordWhiteman
Level 10 - Community Moderator

Re: Forms on Landing Pages - Responsive

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

Anonymous
Not applicable

Re: Forms on Landing Pages - Responsive

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

SydneyMulligan
Level 10 - Champion Alumni

Re: Forms on Landing Pages - Responsive

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
Not applicable

Re: Forms on Landing Pages - Responsive

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

Tim_Langlois1
Level 4

Re: Forms on Landing Pages - Responsive

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
Not applicable

Re: Forms on Landing Pages - Responsive

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
Not applicable

Re: Forms on Landing Pages - Responsive

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;

}

}