Form Customization - Help moving required asterisks

[Jeff_Harris1]

Hi All,

I looking for a little assistance on customizing the look of a Marketo form we have hosted on a Marketo landing page --> N3 - Sales Specialization

I would like the asterisk to be positioned to the left of the input fields, however, it keeps moving above. I have selected "left" in the form settings under "label position" and that didn't seem to fix it. I am sure it is a CSS issue, but I have been working on it now for too long and decided to reach out to the community for help!

Let me know if anyone has ideas! Thanks,

- Jeff

[Jim_Thao7]

It looks like you're stretching the label (which the asterisk lives in) and the input fields both to a width of 100% for that form container.  Because of this, you can't fit 2 elements in the same row next to each other if they both stretch 100% of the width. 

You should change the following class to a width of 10% instead of 100%:

  .mktoForm .mktoLabel

Then, you should change the following class to a width of say 90% instead of 100%:

  .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,

  .mktoForm textarea

That should do the trick.

[Jeff_Harris1]

That was it. Thanks Jim!