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:
And here is the mess I have made of the Form Block styling:
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! ;)
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>
Viewing 15 lines of 16 lines. View entire code block.
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>
Viewing 15 lines of 64 lines. View entire code block.
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! ;)
@StevieB If you found out how to insert placeholders into the C5 form fields could you post your findings?
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,
<script>
$(function () {
$('#input_20').val("EMAIL");
});
</script>
The documentation for custom forms is less than adequate,
I still need to style the inside of the input field and alter the width.