Creating a form

[LKanter]

Hello! Does anyone have experience creating a custom form where the "Submit" box is inline with the fillable portion of the form? In addition, creating a secondary button option? See picture!

[Indra · Accepted solution]

Hi @LKanter,

Yes this is possible. But the submit button needs to be positioned by absolute.

I have made a example codepen doe demo purpose and added the code in here.

https://codepen.io/ind88/pen/KKoKLVO 

 HTML code:

<form class="hs-form">
  <div class="hs_email hs-email field hs-form-field">
    <label class="" placeholder="Enter your E-mailadres">
      <span>E-mailadres</span><span class="hs-form-required">*</span>
    </label>
    <div class="input">
      <input class="hs-input" type="email" name="email" required="" placeholder="E-mailadres" value="sample@email.com">
    </div>
  </div>
  <div class="hs_html hs-html field hs-form-field">
    <label class="" placeholder="No spam">
      <span>No spam</span><span class="hs-form-required">*</span>
    </label>
    <div class="input">
      <a class="custom-button" href="#no-thanks">No, thanks. I don't like sales!</a>
    </div>
  </div>
  <div class="legal-consent-container">
    <div class="hs-richtext">
      <p>[Company] needs the contact details you provide to contact you about our products and services. You can unsubscribe from these messages at any time. See our privacy policy for more information about how to unsubscribe, our privacy practices and how we are committed to protecting and respecting your privacy.</p>
    </div>
  </div>
  <div class="hs_submit hs-submit">
    <div class="actions">
      <input type="submit" value="Subscribe" class="hs-button primary large" >
    </div>
  </div>
</form>

CSS code:

body{
  margin:50px 0;
  font: 18px/1.8 sans-serif;
}

*{
  box-sizing:border-box;
}

input:not([type="submit"]){
  display: block;
  width: 100%;
  margin:0;
  padding:10px 20px;
  font-size: 18px;
  line-height: 1.8;
  background: #fff;
  border-radius: 5px;
  border:1px solid #000;
}
  
.hs-form{
  border: 1px solid #000;
  max-width: 500px;
  margin:0 auto;
  position: relative;
  padding: 20px;
}

.hs-form .custom-button{
  display:block;
  width: 100%;
  background:#000;
  color:#fff;
  padding: 10px 20px;
  text-align: center;
  text-decoration:none;
  border-radius: 5px;
}

.hs-form .field +  .field{
   margin-top: 20px;  
}

.hs-form .field > label{
  display:none;
}

.hs-form .legal-consent-container{
  margin-top: 20px;
  font-size: 12px;
}
.hs-form input[type="submit"]{
  position: absolute;
  top:20px;
  right: 20px;
  padding:10px 20px;
  font-size: 18px;
  line-height: 1.8;
  background: #000;
  color:#fff;
  border-radius: 0 5px 5px 0;
  border:1px solid #000;
  cursor:pointer;
}