Form Field and Button Side by Side - Is It Possible | Community
Skip to main content
Jason_Raisleger
Jason_Raisleger
New Participant
March 21, 2017
Solved

Form Field and Button Side by Side - Is It Possible

  • March 21, 2017
  • 2 replies
  • 18257 views

I am trying to create a marketo form for embed that will capture email addresses for newsletters and I just need the form to display the form field and submit button next to each other. I have been playing around with the css for over an hour and can figure it out. Below is what I want it to look like. Can you help? Thanks!

    Best answer by Casey_Grimes2

    Hi Jason,

    Ah--I forgot that Marketo forms have the bad habit of wanting to manually set the width on their container (I normally just normalize all that in one go.) As such, it's not allowing you to wrap. Applying the following CSS:

    .mktoForm {width: auto !important;}
    .mktoOffset {display:none}
    .mktoButtonRow {display: inline-block; position: relative; margin-left: 5px !important;vertical-align: top;}

    should get you where you need to be.

    2 replies

    Casey_Grimes2
    Casey_Grimes2
    New Participant
    March 21, 2017

    Hi Jason,

    It absolutely is! Simply set .mktoForm .mktoFormRow to have display:inline-block; .mktoButtonRow should have inline-block set by default by forms2.css. This should force it to float to the right of the text field.

    You may need to adjust .mktoFormRow and .mktoFormCol to properly sit with percentages rather than fixed lengths for responsiveness, but I'm assuming you're making a basic form in Forms 2.0 with nothing fancy attached to it based on your example.

      Jason_Raisleger
      Jason_RaislegerAuthor
      New Participant
      March 23, 2017

      Hi Courtney,

      I tried your suggestion but it is still stacked. I created a test landing page (below) do you know what I may be doing wrong? Thanks in advance for your help!

      go.integrativepro.com/css-test.html

      Casey_Grimes2
      Casey_Grimes2Accepted solution
      New Participant
      March 24, 2017

      Hi Jason,

      Ah--I forgot that Marketo forms have the bad habit of wanting to manually set the width on their container (I normally just normalize all that in one go.) As such, it's not allowing you to wrap. Applying the following CSS:

      .mktoForm {width: auto !important;}
      .mktoOffset {display:none}
      .mktoButtonRow {display: inline-block; position: relative; margin-left: 5px !important;vertical-align: top;}

      should get you where you need to be.

        Grégoire_Miche2
        Grégoire_Miche2
        New Participant
        March 21, 2017

        Hi Jason,

        Provide the URL of the page.

        -Greg

        Terms & ConditionsAccessibility statement

        Loading footer...