Keep opt in form on one line

Support
#1

Hi there -

I’m using Drip for my email opt ins. I pasted the code for the form on the website, but I can’t figure out how to make everything inline horizontally. Right now, it’s vertical and I want the name, email, and button all on the same horizontal line.

http://box5270.temp.domains/~vitamode/shop/

Thanks!

#2

Hi There,

Thanks for writing in!

I found out some errors in your page. There are several JS code showing up in your site.
Please confirm if this is something due to Drip code or anything else.

If you are using text module for the code, instead of that please use raw content module so that the code will work fine. After fix this issue please give us a screenshot what exactly you want to achieve in the page and your login details in a secure note so that we can suggest you!

Hope this is clear to you.

Thanks

#3

Hi there -

That code is actually from Shopstyle. I want to show the shopping carousel but not that code above it! I’ve updated the text e lements to be content area elements.

The drip code is for the section “Never miss a post!” Right now it looks like this:

But I want it to look like this: (one line)

I’ll send log in info in private message.

#4

Hello There,

The input fields are not displaying because you are inserting a custom html code in a text element. Please use raw content element and insert your code:

<form action="https://www.getdrip.com/forms/189773227/submissions" method="post" data-drip-embedded-form="189773227">
	<h3 data-drip-attribute="headline">Stay Inspired</h3>
	<div data-drip-attribute="description"></div>
	<div class="x-container">
	    <div class="x-column x-sm x-1-3">
	        <label for="drip-first-name">First Name</label><br />
	        <input type="text" id="drip-first-name" name="fields[first_name]" value="" />
	    </div>
	    <div class="x-column x-sm x-1-3">
	        <label for="drip-email">Email Address</label><br />
	        <input type="email" id="drip-email" name="fields[email]" value="" />
	    </div>
	    <div class="x-column x-sm x-1-3 last">
	        <input type="submit" value="Sign Me Up!" data-drip-attribute="sign-up-button" />
	    </div>
	</div>    
</form>

The code above is already formatted to display a three column row.

Hope this helps. Kindly let us know.

#5

Hi, that worked thank you!

The only problem is, the button is not aligned with the input forms. Can we have them all horizontally aligned together? Right now the button is higher up than the input fields.

http://box5270.temp.domains/~vitamode/shop/

Thank you!

#6

Hi there,

Unfortunately, I cannot see any input boxes nor a button, the form only has labels:

Please, make sure that you do not have any other problems or errors that cause this issue and you have the form actually added correctly so that we can then give you proper CSS suggestion regarding the vertical centering of the input boxes with the button.

Thank you.

#7

That’s really weird… it’s showing on mine.

https://vita-mode.com/shop/

This is the code I am using in the "content area’ element:

<div data-drip-attribute="description"></div>
<div class="x-container">
    <div class="x-column x-sm x-1-3">
        <label for="drip-first-name">First Name</label><br />
        <input type="text" id="drip-first-name" name="fields[first_name]" value="" />
    </div>
    <div class="x-column x-sm x-1-3">
        <label for="drip-email">Email Address</label><br />
        <input type="email" id="drip-email" name="fields[email]" value="" />
    </div>
    <div class="x-column x-sm x-1-3 last">
        <input type="submit" value="Sign Me Up!" data-drip-attribute="sign-up-button" />
    </div>
</div>
#8

Hi there,

The problem seems to be the usage of the Content Area element. It seems that the element strips out the form elements. You need to use the Classic Raw Content element to add the code.

That element will not strip out the form elements and we will be able to see the form to help you out with the layout.

Thank you.

#9

Hi, I updated it to the classic raw content. Can you help me center the submit button?

#10

Hi there,

Please kindly add the code below to X > Launch > Options > CSS:

@media (min-width: 767px) {
	.page-id-10 .x-raw-content form .x-container {
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.page-id-10 .x-raw-content form .x-container input {
		margin-bottom: 0;
	}    
}

Thank you.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.