contacts missing css classes

[ragnar76]

i've just tried the contacts plugin. it is missing sime css classes to style it.

[remrem]

@B4rb3rouss , you do it or I take a look ?

[B4rb3rouss]

@remrem go ahead, i've got a lot of work these few days.

[ragnar76]

i could add some too, it's no rocket science to add them but i don't know how to create a pull request :/

[B4rb3rouss]

@ragnar76 : see here? https://github.com/BlogoText/blogotext/wiki/Contributing Even I finally can do it 😊

[B4rb3rouss]

So, what king of classes would you like to see ?

[ragnar76]

dont know. all of them? ;)

really, i dont know. some to style the whole contact form

[remrem]

I think something like that is enough

<div id="contact_form_addon">
  <div class="contact_title">'.addon_get_setting('contact', 'title').'</div>

  <form id="contact" method="POST" action="'.$_SERVER['REQUEST_URI'].'">
    <div class="contact_content">
      <label for="a_contact_message"></label>
      <textarea ></textarea></div>
    <div class="contact_email">
      <label for="email"></label>
      <input /></div>
    <div class="contact_captcha">
      <label>3+2</label>
      <input type="number" />
    </div>
   <div class="contact_submit">
      <input type="submit" />
   </div>
  </form>
</div>

And css selectors like

/* all labels */
#contact_form_addon label{}
/* all input (- submit)+ textarea */
#contact_form_addon input:not([type="submit"]),
#contact_form_addon textarea{}
/* submit button */
#contact_form_addon .contact_submit input {}
/* target one specific label */
#contact_form_addon .contact_email label {}

and I suggest removing all the elements that are formatted directly in html, like the <h3>, <b> ... it can be done by css and it will avoid that the h3 impacts the SEO. And swicht the <p> to <div>.

What do you think ?

Edit 2018/02/27 17:20 for the CSS selector, about :not(), for IE < 11, maybe use

/* all input (- submit)+ textarea */
#contact_form_addon .contact_content input,
#contact_form_addon .contact_email input,
#contact_form_addon .contact_captcha input,
#contact_form_addon textarea{}

[B4rb3rouss]

ok, I did some changes here, but I don't claim to be an expert with css. It might be good to hack defaults.

See here : https://github.com/BlogoText/blogotext-addons/pull/57

[remrem]

I take a look ASAP :)

[remrem]

@B4rb3rouss , I push to you a new version (today) allowing multiple use of the tag inside the same page (without using HTML/CSS #id) and some css improvements ;)

[B4rb3rouss]

@remrem : I don't see any push (be hey, me and git...)

[remrem]

my bad for the timing, take a look and tell me what you think of @B4rb3rouss PR https://github.com/BlogoText/blogotext-addons/pull/57

I think this is good, you can customize as you want.

[B4rb3rouss]

nice cleanup, thanks. Nothing to add for me ;)