BP Profile Search › Modify Form Style
-
Post
-
Hi Andrea,
Thank you so much for your help so far. I would like to know how to modify the form such that it looks like the one here: https://seventhqueen.com/themes/kleo/get-connected/If you check out the link, the form used is also BP Search Form, somehow the creator modified the code.
With regards to CSS, understand you aren’t able to advise that, but I would like to know how to add placeholders such that the label name is inside the field box rather than outside, and how do I add classes to the code.
Thank you!
Hi Marilyn,
The Kleo team developed a custom form template, changing both the HTML and the CSS code of the search form.
If you wish to do something similar, you could edit the form template you are using (the templates are in wp-content/plugins/bp-profile-search/templates/members) and add the new CSS to your theme’s style.css file.
For instance, to add a CSS class to an input box in the ‘bps-form-legacy’ template, open the template file, locate the line:
echo "<input type='text' name='$f->code' id='$f->code' value='$f->value'>\n";and replace it with the line:
echo "<input type='text' class='name-of-your-class' name='$f->code' id='$f->code' value='$f->value'>\n";Same thing for placeholders. By the way, you can try the ‘bps-form-sample-1’ template, which uses placeholders instead of labels.
Thanks for this Andrea! Will try it out and post any updates.
