How to put a form field next to a button?

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.
Best Answer
-
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.
1
Answers
-
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.
1 -
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...
- Add a new contact form to your website
- Modify the fields so you only have one field (email, for example)
- Instead of making a label, add a placeholder text
- Right-click and select Edit HTML/CSS <>
- 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.
- Modify the
<form>
tag and add the classcustom-wrapper-single-line
as you see in this example code on the second line. - Find the
div
tag for the email address field and add a custom class. In this example, it iscustom-single-line-input
- Find the
input
tag for the same field and add a class. In the example below, it iscustom-input-radius
. - Finally, find the
div
tag for the submit button and add a class. In this example, it iscustom-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>
- 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; }
- Stylize the button using the design editor.
0
Categories
- 670 All Categories
- 2 Getting Started
- 48 Announcements
- 590 Ask a Question
- 15 Going Live & Publishing
- 84 Website Builder
- 5 App Store
- Custom Branding & Client Management
- 4 Team Collaboration
- 14 eCommerce
- 37 Conversations
- 3 Industry News
- 3 Website Design Feedback
- 2 Random
- 7 Idea Board
- Duda Experts
- 4 Events