Hi,
I’ve been messing around with the form element and can’t get it to cooperate. I’m trying to build a single-line form with the submit button inside the email input like the pic above. Is there a way to manipulate the form or will I have to use the code element and write the html/css for it? Any help would be appreciated.
-Thanks
I can’t think of a way to do this with the included form builder natively, although anyone can chime in if I’m wrong, but I could see completing this with a bit of custom css…
You could define a height on the input field, and I’m just going to shoot out some number that likely won’t reflect your site entirely, but will hopefully give you a starting point…
CSS:
input-field {
border: 1px solid #000;
border-radius: 50px;
height: 50px;
padding: 5px 150px 5px 20px;
}
submit-button {
position: relative;
height: 46px;
top: -48px;
right: 2px;
background: red;
border-radius: 50px;
color: white;
}
You may have to target a couple of specific elements to control some additional padding/margins between the elements, but with that css it would lay your submit button over the top of your field, you will still need to align the button to the right, and position it 2px from all the sides, while making sure that the right side padding of the input element prevents any text from going underneath the submit button…
Thanks! This worked for the most part. I’m messing around with the positioning & the mobile view isn’t cooperating but I’m on the right path.