Inline field and submit button
-
Hello Sir,
I used Forminator to create a Newsletter Form.
The thing is, I want the Form to really look like a Newsletter Form— where the Email field and the Submit button will be arranged side by side, which technically we say “inline“.
Please, how can I achieve that ?
Regards.
-
Please note that by default, this is not possible, and this will be outside the scope of support to provide such a thing. For that, you’ll need to hire a developer to provide the required custom code for you. WordPress provides a jobs directory here https://jobs.wordpress.net/, if you need further advice about it, feel free to email
[email protected].– Subject: ATTN: WPMU DEV support – wp.org
– Link back to this thread for reference (https://ww.wp.xz.cn/support/topic/inline-field-and-submit-button/)Kind Regards,
KrisWhat I am asking for, is just a simple CSS Code that will fix everything, and give me the simple solution that I need.
I have gone through your Forum and copied and applied all the CSS codes that were supplied to other people, for the same problem: this one especially — https://wpmudev.com/forums/topic/forminator-display-submit-button-inline/
But they all still didn’t work.
This matter is not something I need to hire a developer for.
Rather than hire a developer, I will just use the MailChimp for WordPress plugin (https://ww.wp.xz.cn/plugins/mailchimp-for-wp ) — and the issue will be solved.
The thing there is that, since you already offer a Form that does Newsletter, I just felt that I shouldn’t add another plugin to my website.
But if you can’t assist me with the CSS code to simply align my Email field with the Submit button on the same line in an inline arrangement, then I will just go for that plugin.
Nonetheless, it will be painful to me, that you couldn’t help with this small thing.
Regards.
I understand your frustration.
We modified the support scope and any custom coding is now out of scope: https://wpmudev.com/docs/getting-started/getting-support/#custom-development
With that said, we have plans to implement a flexible button position for Forminator 1.46, we can’t yet give an estimated time for that feature but you can subscribe to https://wpmudev.com/roadmap/#dev-subscribe
A possible workaround here is via the HTML field.
Note, similar to CSS what I can provide in term of code is limited, but I achieved similar style by:
– Create a HTML field
– Place it side by side, example https://monosnap.com/file/asNVvGrORMltc7pGpKaYvuHXitoE2a
– Add a custom button, make sure it is type submit https://www.w3schools.com/tags/tag_button.asp
– Hide the native button with a conditional that you know it won’t happen https://monosnap.com/file/ZttSuhQMUfraHBAx04bnCxtjOdUOyh
– In end you will have something similar to https://monosnap.com/file/GhhODx6HuDhzaeluxjdxRlE5mmrkrSBest Regards
Patrick FreitasI understand this.
But will the HTML Button of Type =”submit“, function in equal capacity, like the Forminator Submit button ?
2.) Scope of Support or no scope of Support, I’m actually shocked 😲 that Forminator doesn’t even have a simple native way of having field and submit button, inline.
It’s so surprising to me: and I can now see why you made a big deal out of it.
Nonetheless, this shouldn’t be a big deal: Please try to implement it soon.
Regards.
Hello @pressonforlife,
But will the HTML Button of Type =”submit“, function in equal capacity, like the Forminator Submit button ?
You will also need to use the same CSS classes as in the original button:
https://prnt.sc/F2TpzOHZ5pKMYou may check the original code in the browser inspector as explained here:
https://appuals.com/open-browser-console/Nonetheless, this shouldn’t be a big deal: Please try to implement it soon.
Thanks for your feedback, we’ve forwarded it to the plugin developers.
Best Regards,
DmytroThis is what I am trying to mean: the Form field and inline submit button, should not be a big deal.
You see, I tried WPForms ( https://ww.wp.xz.cn/plugins/wpforms-lite ) and I had issue — because I had inline Form field and Submit button, but the field and submit button were miles apart.
When I spoke to them, ordinary CSS solved the issue, as you can see here — https://ww.wp.xz.cn/support/topic/inline-newsletter-form/#post-18506332
This is the same thing that I am asking of Forminator, but then, it required a big hack for it to happen.
That’s an indication that there needs to be a big refactoring of the Forminator Codebase for this functionality to become an in-built feature, OR for this functionality to be something that CSS can easily fix (when users need it).
That your hacky way of HTML field, will be highly prone to errors and problems.
Please, make it as simple and as straight forward as it is, on WPForms.
Regards.
Hello @pressonforlife
Thank you for your feedback, we really appreciate it. I will pass your feedback internally with the Forminator team for their review. However, as mentioned previously, we are already planning to address the button position issue and the team is working on the improvement.
Regarding the CSS, as explained by Patrick in his response, we are bound with the scope of support – hence I am afraid not much we can do and hence the workaround using HTML 🙂
That your hacky way of HTML field, will be highly prone to errors and problems.
I can understand your concern, in this case, it will be a good idea to test it on a staging/dev site before implementing on the live site to check if it works as expected. If so, you can use it on the live site.
Once again, thank you for your feedback. It means a lot to us.
Kind Regards,
SaurabhHello @pressonforlife,
Regarding the above response. The request has already been shared with the Forminator Development Team in their internal task list. Additionally, the team plans to implement this feature in an upcoming update. At the moment, I have no ETA to share with you. However, in future updates, you’ll see the improvement for this feature.
I also suggest subscribing to our roadmap and receiving updates about our products https://wpmudev.com/roadmap.
That said, this was already forwarded to our developers, and I am marking this thread as resolved, but if you have any additional questions, feel free to let us know.
–
Kind Regards,
Imran Khan1.) Forminator has MailChimp integration for free.
2.) Forminator has Post Data that enables us to submit Custom Post Type through a Frontend Posts submission Form: this it does for free.
These free features, are attractions that makes me kinda stuck with Forminator.
But this does not mean, that it should preclude us from wanting Forminator to still get better.
On this issue of inline submit button, I have studied what is done in WPForms, and in Fluent Forms: what I realized is that they have a Column Field.
This Column field can be split into 1 to 3 Columns, and you can insert any field like Text, Textarea, Radio, Select, Submit button, and whatever else inside any of the Columns.
So it occurred to me that if Forminator has a Column field where each Column can accept any field type, then I can have a two Column field where the first column is the Input field, and the second column is the Submit button.
MOVING FORWARD Can Forminator come up with a Column field that can enable us have multiple Columns which accepts any field type — where we can then place any field we like into each column ?
2.) Can You provide me with CSS that can enable me achieve this Inline Input Field and Submit button ?
If You are talking of being outside support scope, can you provide me the class names that I need to target, so that I can do it myself through CSS flexbox ?
3.) Does Forminator have OTP Functionality — where we send a Code to the User on Registration, and when they come back to enter the Code they received, they get registered ?
Needing to hear from You soon.
Regards.Hello @pressonforlife
I’m sorry to hear you’re having difficulties on configuring Forminator in order to have a layout you desire.
Forminator already allows you to have up to 4 columns where you can place fields horizontally. The issue is that, by design, the submit button can’t be moved in the grid of fields. As mentioned, we are currently working to improve this behavior to allow users to create a fully horizontal form, although I don’t have information about how it will be implement by our development team.
Regarding the CSS classes, a Forminator form starts with a <form> element, which inside there are a list of container elements using the “forminator-row” class. The last container contains that class and also the “forminator-row-last” class. Usually, this last container is the one that contains the submit button.
Looking at your case, I may suggest another workaround. Although Forminator doesn’t have a proper way to create an horizontal aligned form, we have a similar plugin named Hustle, which is used for pop-ups, slide-ins and embed, aimed to have “Call to action” buttons or simple forms that are aimed to get leads or send contact information to other services. If you create a Hustle “Opt-in email” Embed, without any template, by default, the result will be an element that contain an horizontal form, which you can add anywhere using a shortcode. Hustle can also integrate to Mailchimp, so I suggest you to give it a look.
Kind regards,
Jair.Hi @pressonforlife,
Since we haven’t heard from you for a while. I’ll mark this thread as resolved for now. Please feel free to re-open this thread if you need any further assistance.
Kind Regards,
Nithin
This is me doing a reminder ⁉
Have you started working on the possibility of us being able to have a “flexible submit button” that can enable us have an inline Form ?
Regards.We usually close the topics after 1 week with no response.
Your request has already been brought to our forminator team’s attention, however as mentioned above by my colleague, we can’t provide an ETA.I hope we can implement it soon.
Best Regards
Amin
The topic ‘Inline field and submit button’ is closed to new replies.
