Form Field and Button Side by Side - Is It Possible | Community
Skip to main content
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
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
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
New Participant
March 21, 2017

Hi Jason,

Provide the URL of the page.

-Greg