2 Replies Latest reply on Feb 14, 2018 6:33 PM by Jeff Harris

    Form Customization - Help moving required asterisks

    Jeff Harris

      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

        • Re: Form Customization - Help moving required asterisks
          Jim Thao

          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.

          1 of 1 people found this helpful