topic Re: Form customizations - adjusting submit button position in CMS Development

Form customizations - adjusting submit button position

Chandler — Tue, 12 Dec 2017 20:40:46 GMT

Hi – Wondering if anyone has had any luck positioning the submit button in a form inline with the rest of the colums. Inside of the form builder, you have the option to position fields to the side of each other, but not the submit button.

I'm assuming this can be done using css, targeting:

body .hs-button.primary,
body input[type="submit"],
body input[type="button"] {}

display: inline-block; doesn't seem to do the trick.

Any input?

Thanks!

Re: Form customizations - adjusting submit button position

TRooInbound — Wed, 13 Dec 2017 06:32:51 GMT

Hi @Chandler,

Follow our video tutorial and add below CSS to your stylesheet.

form > div {
     width:48%;
     margin-right:4%;
     display:inline-block;
     vertical-align:top;
     margin-bottom:20px;
}

form > div:nth-of-type(2n) {
    margin-right:0;
}

form > div.hs_submit {
     vertical-align:bottom;
}

and here is a video tutorial link,

Video link

Did my post help answer your query? Help the Community by marking it as a solution.

Team TRooInbound

Re: Form customizations - adjusting submit button position

Chandler — Wed, 13 Dec 2017 14:12:04 GMT

Thanks for the thoughtful response. I'm afraid I am building the whole site with pure HTML / CSS / JS

When I implemented your CSS it moved the submit button to the right, but it is still not inline with the other form fields. Let me see if I can provide you with some useful assets...

Above is what I am trying to achieve, below is where I am at.

Form section HTML:

<section class="blue-bg light-typo">

<div class="container">

<div class="row padding-top-md padding-bottom-sm">

<div class="col-md-4">

<h2>Get us in your inbox</h2>

</div>

<div class="col-md-6">


<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '697792',
formId: '026cd40c-7df8-4b9e-86d7-4df3029cb5d6',
css: ''
});
</script>

</div>

</div>

</div>

</section>

CSS:

/* Submit buttons (selectors for all non-CTA buttons)
========================================================================== */

body .hs-button.primary,
body input[type="submit"],
body input[type="button"] {

display:inline-block; margin:0;
color:white;
border:none;
float:right;
}

body .hs-button.primary:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover {

display:inline-block; margin:0;
color:white;
border:none;
}

body .hs-button.primary:focus,
body input[type="submit"]:focus,
body input[type="button"]:focus {border:none;}

form > div {
width:100%;
margin-right:4%;
display:inline-block;
vertical-align:top;
margin-bottom:20px;
}

form > div:nth-of-type(2n) {
margin-right:0;
}

form > div.hs_submit {
vertical-align:bottom;
}

Sorry for lengthy post,

Cheers!

Re: Form customizations - adjusting submit button position

TRooInbound — Fri, 15 Dec 2017 06:31:02 GMT

Hi @Chandler,

remove above only my CSS and add my new CSS,

fieldset {
       max-width:100% !important;
       width:66.666%;
       display:inline-block;
       vertical-align:bottom;
}

input { 
     width:100%;
}

.hs_submit {
      width:33.33%;
      display:inline-block;
}

Did my post help answer your query? Help the Community by marking it as a solution.

Team TRooInbound

Re: Form customizations - adjusting submit button position

CHK613 — Sun, 12 Aug 2018 06:58:11 GMT

Hi! I am still having issue with this! We want the sign up form of our newsletter to look like the landing page of Finimize -including the inline submit button.

Inspired by FinimiseI've tried pretty much every css and html header trick but I keep running into difficulties.

1) With the new GDPR, Hubspot places the privacy text between the field and the submit button. So coding tricks to wrap next line around field don't work as it just wraps the privacy text around it to.

Our clients are not EU so we really don't need GDPR text but we need to put if we want to subscribe people.

2) It work only in desktop; one method we tried (without GDPR) worked only in desktop by making email field very small. However for mobiile the text on the button went vertical.

If some could help us with this - we'd greatly apperciate it!

Thanks

Re: Form customizations - adjusting submit button position

warnerjm — Mon, 04 Feb 2019 16:17:08 GMT

@TRooInbound

So, I have applied this to my stylesheet but now I'm getting a space between the email field and the submit button.

Re: Form customizations - adjusting submit button position

DevonC — Sat, 06 Jul 2019 21:12:11 GMT

Anybody solve this? This is marked as "solved" but doesn't seem to be...

Re: Form customizations - adjusting submit button position

paulopes — Mon, 29 Jun 2020 10:30:21 GMT

Actually, I'd like to do the same but just with the normal form (adding it to Wordpress)
Apparently, HubSpot now has the possibility to change the width in style but is for the whole form and not the button and other fields only.

Would be really valuable to have that feature for cases where there is only one field as a newsletter.

Someone know this or has similar problem?

Re: Form customizations - adjusting submit button position

TRooInbound — Mon, 29 Jun 2020 13:28:54 GMT

Hi @paulopes - can you please share your page link here? I will check and let you know

Re: Form customizations - adjusting submit button position

VMarketer — Mon, 28 Oct 2024 00:39:46 GMT

I would like to be able to do this also. Our current site, using Constant Contact forms, allows for this (see image).