Form Styling

Ehud Blatt

#264842

Hi,

Maybe you could help me with these problems:
1. How do I change the submit button color?
2. How to add an icon to a field?

thanks!

Add New Note to this Reply

Trevor Moderator

#264862

Can you show me one or more annotated screenshot(s) of the design change(s) you want? If you can do that, you would need to upload the screenshot image(s) to a file sharing site (like the WordPress Cloudup site) and share the link with me?

Are you able to send me a live link/URL to your search page so I can take a look?

If you have a page on your site with an example button and also of usage of the icon, please share that with me also.

Add New Note to this Reply

Ehud Blatt

#264936

Hey Trevor,

This is a link to a picture of the current designs and the wanted design:
https://pasteboard.co/Jyvp8Oj.png

this is a link to the form page: https://techmonster.co.il/tech-jobs/

I need help with these following changes:
1. Submit Button – making the corners round (like the other form fields)
2. Submit Button text – should be white & font should be ASSISTANT (400)
3. first field from the right (Hebrew site, all content text is RTL)- should have a search icon on the right side
4. Second field from the right – should have a location icon on the right side

*search icon source – https://www.freepik.com/free-icon/magnifying-glass-simple_706282.htm#page=1&query=SEARCH&position=16
** location icon source – https://www.freepik.com/free-icon/map-pin_881156.htm#page=1&query=LOCATION&position=8
*** the icons in 3 & 4 should look a little like the form on this page: https://authenticjobs.com/

Thanks

Add New Note to this Reply

Trevor Moderator

#265106

This reply has been marked as private.

Add New Note to this Reply

Ehud Blatt

#265112

Thank you very much, I appreciate the update

Add New Note to this Reply

Trevor Moderator

#265238

Your custom CSS:

.searchandfilter[data-sf-form-id="2167"] .sf-field-submit input {
    border-radius: 3px;
    color: #fff;
    font-family: Assistant;
    font-weight: 400;
}

You need to have the icons in the size you need as transparent png images of the correct size on your site. The CSS would be something like this I think:

.searchandfilter[data-sf-form-id="2167"] .sf-field-search input {
    padding-right: 30px;
    background: url(your path to the image);
}

and

.searchandfilter[data-sf-form-id="2167"] .sf-field-taxonomy-job_locations select {
    padding-right: 30px;
    background: url();
}

I think.

Add New Note to this Reply

Ehud Blatt

#265332

Thanks! works great

Add New Note to this Reply

Trevor Moderator

#265334

Thanks for getting back to me. I will close this thread for now.

Add New Note to this Reply

[Author]

Posts