Custom Styling the Form Block

Permalink
Hi there, I really could do with some help! I have been working all day to custom style the form block to fit in with my site style. Attached to this post is a side by side screenshot of the html original and the concrete5 form after my attempts at styling… not bad considering I really don't know very much about this!

However, there is still a couple of things wrong that I just cannot figure out so was wondering if anyone might be able to help with this last hurdle?

BTW, I am working in Concrete5.7.5.2.

1.) As you can see from the original (see attached image), I need to style the inside of the input field, but just cannot figure out where and how to apply that styling.

2.)I need to remove the label from outside the input box and instead, apply it as a place holder inside the input field. Is this possible and how?

3.) And last, where so I control the width of the input field so it fills the form block?

If it helps any, here is the html for the original form styling:
<div class="nicdark_archive1 nicdark_bg_grey nicdark_radius nicdark_shadow">
                <div class="nicdark_textevidence nicdark_bg_orange nicdark_radius_top">
                    <h4 class="white nicdark_margin20">CONTACT US</h4>
                    <i class="icon-mail nicdark_iconbg right medium orange"></i>
                </div>
                <div class="nicdark_margin20">
                    <input class="nicdark_bg_grey2 nicdark_radius nicdark_shadow grey small subtitle" type="text" value="" placeholder="NAME">
                    <div class="nicdark_space20"></div>
                    <input class="nicdark_bg_grey2 nicdark_radius nicdark_shadow grey small subtitle" type="text" value="" placeholder="EMAIL">
                    <div class="nicdark_space20"></div>
                    <textarea class="nicdark_bg_grey2 nicdark_radius nicdark_shadow grey small subtitle" placeholder="MESSAGE" rows="7"></textarea>
                    <div class="nicdark_space20"></div>
                    <!--<input class="nicdark_btn nicdark_bg_orange medium nicdark_shadow nicdark_radius white" type="submit" value="SEND">-->
                    <a href="submit-message.html" class="nicdark_mpopup_ajax nicdark_btn nicdark_bg_orange medium nicdark_shadow nicdark_radius white nicdark_press">SEND</a>
                </div>


And here is the mess I have made of the Form Block styling:
/******************************************************************************
* DESIGNERS: CUSTOMIZE THE FORM HTML STARTING HERE...
*/?>
<div id="formblock<?php  echo $bID; ?>" class="nicdark_archive1 nicdark_bg_grey nicdark_radius nicdark_shadow">
                <div class="nicdark_textevidence nicdark_bg_orange nicdark_radius_top">
                    <h4 class="white nicdark_margin20">CONTACT US</h4>
                    <i class="icon-mail nicdark_iconbg right medium orange"></i>
                </div>
                                <div class="nicdark_margin20">
<form enctype="multipart/form-data" class="ccm-block-type-form" id="miniSurveyView<?php  echo $bID; ?>" method="post" action="<?php  echo $formAction ?>">
   <?php  if ($success): ?>
      <div class="nicdark_alerts nicdark_bg_green nicdark_radius nicdark_shadow">
         <p class="white nicdark_size_medium"><i class="icon-cancel-circled-outline iconclose"></i>
            <?php  echo h($thanksMsg); ?>
         </p>


Thanks for any help, I look forward to calling someone my hero!

Steve.

P.S.
The Captcha still looks like a dogs dinner, if anyone has any suggestions about that as well it would be most appreciated! ;)

1 Attachment

View Replies:
StevieB replied on at Permalink Reply
I just read that adding the label as a placeholder requires some java script, anyone know the best way to implement this or where to find it?

I still need to style the inside of the input field and alter the width.
ricknfa replied on at Permalink Reply
ricknfa
@StevieB If you found out how to insert placeholders into the C5 form fields could you post your findings?
felixb101 replied on at Permalink Reply
felixb101
Since no one could find an answer to this I had to do in with javascript:

<script>
$(function () {
$('#input_20').val("EMAIL");
});
</script>

The documentation for custom forms is less than adequate,