SOLVED

Re: Form Field and Button Side by Side - Is It Possible

Go to solution
Jason_Raisleger
Level 4

Form Field and Button Side by Side - Is It Possible

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!

inline-button.png

Tags (4)
1 ACCEPTED SOLUTION

Accepted Solutions
Courtney_Grimes
Level 10

Re: Form Field and Button Side by Side - Is It Possible

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.

View solution in original post

8 REPLIES 8
Grégoire_Miche2
Level 10

Re: Form Field and Button Side by Side - Is It Possible

Hi Jason,

Provide the URL of the page.

-Greg

Courtney_Grimes
Level 10

Re: Form Field and Button Side by Side - Is It Possible

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
Level 4

Re: Form Field and Button Side by Side - Is It Possible

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!

http://go.integrativepro.com/css-test.html

Courtney_Grimes
Level 10

Re: Form Field and Button Side by Side - Is It Possible

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.

View solution in original post

Jason_Raisleger
Level 4

Re: Form Field and Button Side by Side - Is It Possible

Thank you so much Courtney! You're the best!

Ryan_Garcia
Level 2

Re: Form Field and Button Side by Side - Is It Possible

Courtney Grimes​ I have tried following your solution and I am not able to get the inline to work. The button is still stacking below the fields. Can you please look at my sample page and let me know what is missing?

http://go.eccu.org/sampleform.html 

Thank you,

-Ryan

Courtney_Grimes
Level 10

Re: Form Field and Button Side by Side - Is It Possible

Right now, your form row is acting as a block element and forcing the button to the next line, so you'll want to add

.mktoFormRow {

    display: inline-block;

}

to your CSS, which will let the button float on the same line.

Ryan_Garcia
Level 2

Re: Form Field and Button Side by Side - Is It Possible

Awesome! Thank you.