Inline Signups

[Shaykoo]

Hi, I am working on hubspot form and want to make input feild and the submit button inline to each other, tried using CSS transform: translate(290px, -83px); and the submit button gets inline with the input but whenever I click in the input feild and then click outside of it without typing any email address in the input , the submit button gets a shift of Y-axis downwards. Please help with this one.

Thanks In Advance

[Jsum · Accepted solution]

@Shaykoo,

The default Hubspot subscription form consists of a form containing 3 divs wrapping inputs and a div.actions wrapping the submit button. 2 of the divs wrapping inputs are for hidden inputs.

To make the submit button go inline with the text field you have to do what you would do any time you want to make this happen. play off the parent container and force the child items' width in percentages. Choose one of the following:

1. Floats

.subscription_wrap form.hs-form:after {
    content: "";
    display: table;
    clear: both;
}

.subscription_wrap form.hs-form div:first-of-type,
.subscription_wrap form.hs-form div.actions {
    float: left;
    box-sizing: border-box;
}

.subscription_wrap form.hs-form div:first-of-type {
    width: 60%;
}

.subscription_wrap form.hs-form div.actions {
    width: 40%;
}

1. Inline-block

.subscription_wrap form.hs-form div,
.subscription_wrap form.hs-form div.actions {
    display: inline-block;
    box-sizing:border-box;
}

.subscription_wrap form.hs-form div:first-of-type {
    width: 60%;
}

.subscription_wrap form.hs-form div.actions {
    width: 35%;
}

Inline-block adds extra space (white space) between inline-block elements from your code. if you remove all white space around the elements in your code that are set to "inline-block" then you can set the elements to equal 100% of the parent container, otherwise you have to leave some buffer room to allow for the fixed pixel spacing caused by the white space between the elements. 

3. Flexbox

.subscription_wrap form.hs-form:after {
    content: "";
    display: table;
    clear: both;
}

.subscription_wrap form.hs-form div:first-of-type,
.subscription_wrap form.hs-form div.actions {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
}

.subscription_wrap form.hs-form div:first-of-type {
    flex: 2;
    -webkit-flex: 2;
    -moz-flex: 2;
    -ms-flex: 2;
    -o-flex: 2;
}

.subscription_wrap form.hs-form div.actions {
    flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
}

You'll most likely need to manipulate the email input and submit button width after this. This is structuring the containers not styling the elements themselves.

In all of these examples .subscription_wrap is a fictitious class for a wrapper to your subscription module.

Need help? Hire Us Here

[Daystar]

Hi, I have a question on the same type of issue, but I want my form fields and submit button to appear all on one line. However, it seems like the styling of the form fields is set to stack the submit button below the form fields, please help.

Here is the page

[JThibeault]

I came across this thread looking for a way to make a simple one-field Hubspot form inline: Label --> Field --> Submit button. But when I try the solution explained in this thread, it doesn't work. Can someone take a look and let me know what I'm doing wrong?

https://datatecture.datazoom.io/

The form is at the bottom of the page above the footer.

Thanks,

Jason

[tjoyce · Accepted solution]

@JThibeault - Your form is in an iframe so, it's not going to be able to be styled. Depending on your HS plan, you could take it out of the iframe by choosing to remove the default HS styling on the form

[Jsum · Accepted solution]

@Shaykoo,

The default Hubspot subscription form consists of a form containing 3 divs wrapping inputs and a div.actions wrapping the submit button. 2 of the divs wrapping inputs are for hidden inputs.

To make the submit button go inline with the text field you have to do what you would do any time you want to make this happen. play off the parent container and force the child items' width in percentages. Choose one of the following:

1. Floats

.subscription_wrap form.hs-form:after {
    content: "";
    display: table;
    clear: both;
}

.subscription_wrap form.hs-form div:first-of-type,
.subscription_wrap form.hs-form div.actions {
    float: left;
    box-sizing: border-box;
}

.subscription_wrap form.hs-form div:first-of-type {
    width: 60%;
}

.subscription_wrap form.hs-form div.actions {
    width: 40%;
}

1. Inline-block

.subscription_wrap form.hs-form div,
.subscription_wrap form.hs-form div.actions {
    display: inline-block;
    box-sizing:border-box;
}

.subscription_wrap form.hs-form div:first-of-type {
    width: 60%;
}

.subscription_wrap form.hs-form div.actions {
    width: 35%;
}

Inline-block adds extra space (white space) between inline-block elements from your code. if you remove all white space around the elements in your code that are set to "inline-block" then you can set the elements to equal 100% of the parent container, otherwise you have to leave some buffer room to allow for the fixed pixel spacing caused by the white space between the elements. 

3. Flexbox

.subscription_wrap form.hs-form:after {
    content: "";
    display: table;
    clear: both;
}

.subscription_wrap form.hs-form div:first-of-type,
.subscription_wrap form.hs-form div.actions {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
}

.subscription_wrap form.hs-form div:first-of-type {
    flex: 2;
    -webkit-flex: 2;
    -moz-flex: 2;
    -ms-flex: 2;
    -o-flex: 2;
}

.subscription_wrap form.hs-form div.actions {
    flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
}

You'll most likely need to manipulate the email input and submit button width after this. This is structuring the containers not styling the elements themselves.

In all of these examples .subscription_wrap is a fictitious class for a wrapper to your subscription module.

Need help? Hire Us Here

[MMoe]

I'm here with the same question, and having trouble using the code provided. I took two actions and need help with a third action item in hopes to make it work on my site:

1. In order to embed everything on my CMS (Webflow), the code needs to live in an HTML embed element, so I dropped the provided float code into a <style> tag, and also included the <script> from HubSpot with the form info.
2. The form itself has the Raw HTML option enabled in HubSpot.
3. This is where I need some guidance—In the comment, you said, ".subscription_wrap is a fictitious class for a wrapper to your subscription module," but I'm newer to code and I don't know what I should be changing the class to? I'm seeing the form appear on my site, but still having trouble making the Submit button sit inline. I'm thinking once I change this class that it would work, but I don't know what I need to be targeting.

Thanks in advance!

[Shaykoo]

Thanks alot it's working. I didn't want the white space so I have removed tge inline-block section. There is just one problem the submit button is in-line with the input feild but the button is bit downwards like 2-3px . Tried using the classes .action....hs-button primary large, but it's not shifting to the level of input. How could we do it?

[Jsum]

Hey @Shaykoo, make sure you only choose one of the above options. If you don't want to use the inline-block option then go with flexbox or floats.

You should use your browser's inspector tool to check the button for a margin, or the div.action container for a padding that is causing the space. If you share a shareable preview of the page I can look at it.

If I answered your original question please mark the solution.

**Edit: I see that you solved the spacing issue with 'transform: translateY(9px)'. There is a top and bottom margin on the submit button, and top padding on wrappers around the email input. This fixes it also:

form div.actions input.hs-button {
    margin-top: 0;
    margin-bottom: 0;
}

form  div.hs-form-field,
 form  div.hs-form-field div.input {
    padding-top: 0;
}

Need help? Hire Us Here

[tjoyce]

@Shaykoo - give us a preview link, we can probably give you some code. I find it easier to use jquery to move the form fields next to each other.

[Shaykoo]

https://app.hubspot.com/design-previewer/3906991/templates/6186383412

This is the preview link, please help with putting the submit button in line with input .

[Anton]

unfortunatly this is a preview link which is only accessible by users, which are linked to the project/hub.

To "generate"/get a public preview link you'll have to do following:

In the (new) design manager:

- click on "preview" and select "preview without display options"

In the "page builder":

- click on the eye symbol in the top left corner and copy the link

regards

Anton

[Shaykoo]

https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

would this works?