SIGN UP

Embed Submit Button in Field

By: Asheley Bailey | Asked: 09/11/2022
Forums › Category: Code Help › Embed Submit Button in Field
0 Vote Up Vote Down
Asheley Bailey asked 2 years ago
I'm using a one input field form as a site search. I'd like to embed the submit button in the input field. It should be similar to when you add a glyphicon after input.  I feel like this is simple enough but I can't seem to figure it out. None of the code I add has any impact on the button placement.
2 Answers
0 Vote Up Vote Down
Victor Font answered 2 years ago
You won't be able to embed the submit button in an input field. You could use an icon that when clicked triggers a form.submit() with jQuery or JavaScript when clicked. You'll also have to hide the standard submit button so it doesn't display on the screen.
Larry Kolinek replied 2 years ago

@Victor Font

Is there an example of doing this?

@Asheley Bailey

so you have a dropdown with icon like this:
https://www.zillow.com/

that is what I need 🙂

thanks!!!

Victor Font replied 2 years ago

@Asheley Bailey

If you examine the Zillow source code in your browser's inspection tool. The search icon is not embedded in the search field. The search icon is an SVG image wrapped in a button selector. The button abuts the right side of the field so it looks like a single element.

Larry Kolinek replied 2 years ago

@Victor Font 🙂
I posted the last comment... either way, is there an example of FF with any type of button that can submit a form (even it just one search field)... that looks like zillow example?

If there way an example of doing that, that would be REALLY great!!!

thank you

0 Vote Up Vote Down
Bobby Clapp answered 2 years ago
Do you mean inline with fields? https://formidableforms.com/knowledgebase/general-form-settings/#kb-submit-button-position
Asheley Bailey replied 2 years ago

Hi Bobby,

Unfortunately no. That is what I'm currently using and it doesn't stay inline when browser screen sizes are change or when accessing on a mobile device. It just doesn't look right at all. Victor Font picked up on exactly what I was looking for.

Bobby Clapp replied 2 years ago

Ah yes. It's responsive so it fits more aesthetically with many types of configurations. A custom solution sounds like the way to go then.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right