# Creating a form

**URL:** <https://community.hubspot.com/t/creating-a-form/59988>\
**Category:** CMS Development\
**Created:** [June 28, 2022, 10:15pm UTC](https://community.hubspot.com/t/creating-a-form/59988 "2022-06-28T22:15:09Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![LKanter](https://avatars.discourse-cdn.com/v4/letter/l/91b2a8/32.png) [@LKanter](https://community.hubspot.com/u/LKanter)\
**Post date:** [June 28, 2022, 10:15pm UTC](https://community.hubspot.com/t/creating-a-form/59988/1 "2022-06-28T22:15:09Z")

</div>

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!

 ![Screen Shot 2022-06-28 at 4.17.34 PM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/f/6f4ac2399cf589d3051956ad24f4e75638f531b4.png)

---

<div class="post-metadata">

**Author:** ![Indra](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/indra/32/98381_2.png) [@Indra](https://community.hubspot.com/u/Indra)\
**Post date:** [June 29, 2022, 2:24pm UTC](https://community.hubspot.com/t/creating-a-form/59988/2 "2022-06-29T14:24:55Z")

</div>

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](https://codepen.io/ind88/pen/KKoKLVO)

HTML code:

```lia-code-sample
<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:

```lia-code-sample
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;
}

```