How to put a form field next to a button?

alexevans

Hey all! I can't figure this out, and it seems pretty traditional. I want to put a form field directly to the left of a button, and I can't make this happen with any Duda tools. Is this possible, or am I beating my head against a wall? Example attached; this is kind of sophisticated, I really can just have an independent input box next to a button.

Aj_Cre8

So with the native Duda Forms, this is only possible with Custom CSS.. If you are familiar with how to code its fairly easy.. If you need some help, you can reach out to an agency that Duda Recommends for assistance.

alexevans

Thanks AJ! We can have our devs do this, though I've been on strict orders to build our site with as little dev help as possible, hah! Time for me to get out of Figma and learn CSS I suppose.

Elizabeth_Fedak

I wrote this a WHILE ago so it might be out of date, but here's something I put in my notes to myself for this type of form layout! Sorry the formatting is funky...

1. Add a new contact form to your website
2. Modify the fields so you only have one field (email, for example)
   1. Instead of making a label, add a placeholder text
3. Right-click and select Edit HTML/CSS <>
4. In the HTML tab, locate the code snippet that you see below. You will have different id numbers, but the rest should be very similar.
5. Modify the <form> tag and add the class custom-wrapper-single-line as you see in this example code on the second line.
6. Find the div tag for the email address field and add a custom class. In this example, it is custom-single-line-input
7. Find the input tag for the same field and add a class. In the example below, it is custom-input-radius.
8. Finally, find the div tag for the submit button and add a class. In this example, it is custom-submit-button.

<div class="dmform-wrapper " preserve_css="true" id="1760007438">
  <form method="post" class="dmRespDesignRow custom-wrapper-single-line" locale="ENGLISH" id="1739348746">
   <div class="dmforminput required  small-12 medium-4 large-4  dmRespDesignCol custom-single-line-input" id="1755949905">
    <label for="dmform-0" id="1847979794" class="" hide="true">
     Field label
    </label>
    <input type="email" name="dmform-0" placeholder="Enter your email address" id="1710326744" class="custom-input-radius"/>
    <input type="hidden" name="label-dmform-0" value="Field label" id="1794421327" class=""/>
   </div>
   <span id="1755949905_clear" class="dmWidgetClear" dmle_clear="true">
   </span>
   <span id="1755949905_clear_clear" class="dmWidgetClear" dmle_clear="true">
   </span>
   <div class="dmformsubmit dmWidget R custom-submit-button" preserve_css="true" id="1134335132">
    <input class="" name="submit" type="submit" value="Start Now" id="1669919425"/>
   </div>

1. Switch to the CSS tab. Paste this in.

/* ADD CUSTOM CSS TO THE PAGE - THIS AFFECTS ALL DEVICES */
.custom-wrapper-single-line
{
	display:flex !important;
	flex-direction:row !important;
	justify-content:center !important;
	align-items:center !important;
	padding:0 !important;
	margin:0 !important;
	margin-top:0 !important;
}
.custom-single-line-input
{
	width:100% !important;
	min-width:100px !important;
	border-radius:25px !important;
	margin-top:0 !important;
}
.custom-submit-button
{
	height:65px !important;
	min-width:80px !important;
	background-color:#AA00AA !important;
}
.custom-input-radius
{
	border-radius:25px !important;
	background-color:#fff !important;
	border:1px black solid !important;
}
input:focus{
    outline: none;
}

1. Stylize the button using the design editor.