CMS Development

Chandler
Mitglied

Form customizations - adjusting submit button position

lösung

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 Akzeptierte Lösung
TRooInbound
Lösung
Autorität

Form customizations - adjusting submit button position

lösung

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

Lösung in ursprünglichem Beitrag anzeigen

0 Upvotes
8 Antworten
TRooInbound
Autorität

Form customizations - adjusting submit button position

lösung

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
Teilnehmer/-in

Form customizations - adjusting submit button position

lösung

@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
Teilnehmer/-in

Form customizations - adjusting submit button position

lösung

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

0 Upvotes
paulopes
Teilnehmer/-in

Form customizations - adjusting submit button position

lösung

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
Autorität

Form customizations - adjusting submit button position

lösung

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

0 Upvotes
Chandler
Mitglied

Form customizations - adjusting submit button position

lösung

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
Lösung
Autorität

Form customizations - adjusting submit button position

lösung

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
Teilnehmer/-in

Form customizations - adjusting submit button position

lösung

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