CMS Development

Chandler
Member

Form customizations - adjusting submit button position

SOLVE

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!

1 Accepted solution
TRooInbound
Solution
Key Advisor | Partner
Key Advisor | Partner

Form customizations - adjusting submit button position

SOLVE

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

View solution in original post

0 Upvotes
9 Replies 9
VMarketer
Participant

Form customizations - adjusting submit button position

SOLVE

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

VMarketer_0-1730075972113.png

 

0 Upvotes
TRooInbound
Key Advisor | Partner
Key Advisor | Partner

Form customizations - adjusting submit button position

SOLVE

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

warnerjm
Participant

Form customizations - adjusting submit button position

SOLVE

@TRooInbound 

 

So, I have applied this to my stylesheet but now I'm getting a space between the email field and the submit button. Screen Shot 2019-02-04 at 11.15.43 AM.png

0 Upvotes
DevonC
Participant

Form customizations - adjusting submit button position

SOLVE

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

0 Upvotes
paulopes
Participant

Form customizations - adjusting submit button position

SOLVE

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?

0 Upvotes
TRooInbound
Key Advisor | Partner
Key Advisor | Partner

Form customizations - adjusting submit button position

SOLVE

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

0 Upvotes
Chandler
Member

Form customizations - adjusting submit button position

SOLVE

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...

Screen Shot 2017-12-13 at 9.08.26 AM.png

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

Screen Shot 2017-12-13 at 9.09.33 AM.png

 

Form section HTML:

<!-- ==============================================
Inbox CTA
=============================================== -->
<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">

<!-- [if lte IE 8] -->
<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!

0 Upvotes
TRooInbound
Solution
Key Advisor | Partner
Key Advisor | Partner

Form customizations - adjusting submit button position

SOLVE

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

0 Upvotes
CHK613
Participant

Form customizations - adjusting submit button position

SOLVE

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 FinimiseInspired 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