mercredi 22 juin 2016

Styling up hidden input


I'm trying to style up a hidden input field, but I'm not getting it quite right.

It may sound strange trying to style up an input box that's hidden - reason being is that the text in those fields are shown upon clicking the submit button, and I'd like to change the font and colour so it matches the rest of the page.

Code below (I have just removed the company details in URLs)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/base-asbestos.css">
<link rel="stylesheet" href="css/responsive-widths.css">
<link rel="stylesheet" href="css/form.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/responsive-layout-asbestos.css">
<script language="JavaScript">
function updateAuthor(theForm){
if(theForm.extensionField_Name){
if(theForm.extensionField_Name.value!=""){
theForm.author.value=theForm.extensionField_Name.value;
theForm.extensionField_Name.name='extensionField_h_Name';
return(true);}}
if(theForm.extensionField_Email){
if(theForm.extensionField_Email.value!=""){
theForm.author.value=theForm.extensionField_Email.value;
theForm.extensionField_Email.name='extensionField_h_Email';
return(true);}}
return(true);}
</script>

<link href='//fonts.googleapis.com/css?family=Signika:400,300,600,700' rel='stylesheet' type='text/css'>
<style type="text/css">
.chat {
color: #404040;
    font-weight: 700;
font-size: 1.2em;
font-family: 'Signika', sans-serif;
} 


input[type=submit] { 
color: #404040;
    font-weight: 700;
font-size: 0.95em;
font-family: 'Signika', sans-serif;
}

chat2 { 
color:#25ab9a;
    font-weight: 700;
font-size: 0.95em;
font-family: 'Signika', sans-serif;
}

</style>
</head>
<body class="intenal standard_colours" style="position: relative;  top: 0;">
<div class="chat">

<form action="https://test.uk/ccp/chat/form/100000" method="post" onSubmit="return updateAuthor(this)">
<style type="text/css">span { display: inline-block; width: 120px; }</style>
<span>Name:</span><input type="text" name="extensionField_Name" /><br/><br>
<span>Email:</span><input type="text" name="extensionField_Email" /><br/>            <br>
<span>Phone number:</span><input type="text" name="extensionField_PhoneNumber" /><br/><br>
<span>Category:</span>
<select name="extensionField_ccxqueuetag"><br/>
    <option value="Chat_Csq7">General</option>
</select><br><br/>
<input type="submit" value="Submit"/><input type="hidden" name="author" value="Customer"/><br/>

<input type="hidden" name="title" value="ccx chat"/><br/>
<input type="hidden" name="extensionField_h_widgetName" value="ChatGeneral"/><br/>
<!-- The following optional, hidden fields are available in order to customize the Customer Chat user interface.
Unlike other extension fields, these are not added to the social contact, and therefore do not display in the Agent Chat user interface.-->
<input type="hidden" name="extensionField_chatLogo" value="https://tes.t/blank.jpg"><br/>
<input type="hidden" name="extensionField_chatWaiting" value="Welcome.         Please wait while we connect you to a customer care representative.">
<input type="hidden" name="extensionField_chatAgentJoinTimeOut" value="All customer care representatives are busy. Please wait or try again later.">
<input type="hidden" name="extensionField_chatError" value="Sorry, the chat service is currently not available. Please try again later."></div>
</form></body>
</html>

Aucun commentaire:

Enregistrer un commentaire