[Support request] Including Icon Inside Input Text Field As Submit Button

[Maynard]

Hi,

On my site I have a standard text input field with a submit button alongside it to capture emails for a newsletter.

The layout looks clumsy, and I wonder if the submit button can be included as an ‘envelope’ icon inside the email input field. A good example is https://wpjohnny.com/ –> see down in the footer on the right. Looks quite elegant.

Is there a way of achieving this in GP? I just want the submit buttons relating to the newsletter to change to the ‘envelope’. Any help appreciated.

Thanks

[Leo]

Hi there,

On my site I have a standard text input field with a submit button alongside it to capture emails for a newsletter.

I’d assume the newsletter and the submit button is coming from a plugin?

If so you will need to check with the plugin’s support team to see if you can modify the output of the submit button.

Let me know if I’m missing something here 🙂

[Maynard]

Hi Leo

Sorry, I should have been more specific. I am using a simple HTML form, not a plugin.

Have now been using this (the “Use a Flexbox, and put the border on the form” answer)
https://stackoverflow.com/questions/15314407/how-to-add-button-inside-input

…and copying some GP icon/button HTML and have got almost to where I want. See webpage in private information.

Have now got stuck on two things:

1) I now wish to enlarge the ‘envelope’ icon, but keep the dimensions of the blue box and entry form the same. Not sure how to do that, or if it is even possible.

2) When putting the same custom HTML in the right widget area, the blue box does not fit in the form. Not sure how to widen the entry field and shuffle the blue box left into the form box. (See screenshot)

Any ideas? Some help to finish this off would be very welcome!

[Leo]

If you are using custom HTML and you shouldn’t involve GB.

Simply grab the SVG code and add it to your custom HTML button.

To enlarge the without increasing the button size, you would need to reduce the padding around the button.

[Author]

Posts