$25
Require help for coding and Styling
Hi,
I've the following requirements and my knowledge of css and php isn't very deep. If you could help me out, it'll be great, thanks!
1. With regard to the theme I have uploaded at http://www.publishio.com , at the registration page I would like to know what php code I need to add in order to make the Phone Number to be a Mobile Number that is a mandatory field when a person registers for the first time at Publishio.com.
Is it possible to change that field into two boxes to look something like the file I have attached? Basically all mobile phone numbers in my country have +971 (0)5 compulsorily and the next digit is either 0, 5 or 6 and then followed by 7 digit number. so a typical mobile number would be +971 (0)50 9199615 or +971 (0) 55 9199615 or +971 (0)56 9199615.
-------------------
2. Where can I find the code in the style.css file for the input button? For example, if you go to http://publishio.com/?page_id=54
you can see that the contact form's send button (main content) and the Translate button (as widget) are both Small grey cells which don't even Change the Cursor (to clickable) when you hover over it.
It would be great if you could provide the code to modify it into a button like clickable version. :)
Cheers,
Kaavs
I've the following requirements and my knowledge of css and php isn't very deep. If you could help me out, it'll be great, thanks!
1. With regard to the theme I have uploaded at http://www.publishio.com , at the registration page I would like to know what php code I need to add in order to make the Phone Number to be a Mobile Number that is a mandatory field when a person registers for the first time at Publishio.com.
Is it possible to change that field into two boxes to look something like the file I have attached? Basically all mobile phone numbers in my country have +971 (0)5 compulsorily and the next digit is either 0, 5 or 6 and then followed by 7 digit number. so a typical mobile number would be +971 (0)50 9199615 or +971 (0) 55 9199615 or +971 (0)56 9199615.
-------------------
2. Where can I find the code in the style.css file for the input button? For example, if you go to http://publishio.com/?page_id=54
you can see that the contact form's send button (main content) and the Translate button (as widget) are both Small grey cells which don't even Change the Cursor (to clickable) when you hover over it.
It would be great if you could provide the code to modify it into a button like clickable version. :)
Cheers,
Kaavs
Kaavs | 08/29/10 at 9:30am
| Edit
(3) Possible Answers Submitted...
-
Last edited:
08/30/10
6:54amMonster Coder says:the first problem:
The page looks like it is a custom page! to make the phone field mandatory, you have to edit the file and put something like this:
<?php
if(!$_POST['user_phone'] OR strlen($_POST['user_phone']) < 10){
echo '<div class="fade error">Your mobile number is invalid</a>';
//now die or break or do as per your template coding
}
?>
in the same way, you can break it into two fields and in PHP you can verify the both field! I am sorry, I can't say further without seeing the source code of your page!
2nd issue:
the button is clickable here! for hover effect, you have to stylize it! the following will make it bigger at least :D
<input type="submit" class="wpcf7-submit" value="Send" style="width: 100px; height: 40px; font-weight: bold; font-size: 16pt;">
- 08/30/10 2:42am
Kaavs says:Hi MC,
As for the button for which you've mentioned the styling, could you please let me know if I'm supposed to change the plugin (Contact form-7)'s style.css with the code you've sent? I'm actually trying to change the way it looks from the present style to something like the attachment.
If it's a plugin style.css change, I'll need to do the same for the google translate plugin as well, I reckon.
Cheers,
Kaavs - 08/30/10 6:54am
Monster Coder says:Solution provided privately :).
- 08/30/10 2:42am
-
Last edited:
08/29/10
11:09amBingu Zhong says:2. You can add below css code to style.css to make submit input like clickable:
input[type='submit'] { cursor: pointer; } -
Last edited:
08/29/10
11:33amTodd Stowell says:Here is how to make the field validated:
Edit: /wp-content/themes/Classifieds/library/js/reg_validation.js
Change what is there with this:
$(document).ready(function(){
////////////LOGIN FORM START
//global vars
var loginform = $("#loginform");
var user_login = $("#user_login");
var user_loginInfo = $("#user_loginInfo");
var user_pass = $("#user_pass");
var user_passInfo = $("#user_passInfo");
//On blur
user_login.blur(validate_user_login);
user_pass.blur(validate_user_pass);
//On key press
user_login.keyup(validate_user_login);
user_pass.keyup(validate_user_pass);
//On Submitting
loginform.submit(function(){
if(validate_user_login() & validate_user_pass())
return true
else
return false;
});
////////////LOGIN FORM END
////////////REGISTRATION FORM START
var registerform = $("#registerform");
var user_login1reg = $("#user_login1reg");
var user_login1regInfo = $("#user_login1regInfo");
var user_email = $("#user_email");
var user_emailInfo = $("#user_emailInfo");
var user_fname = $("#user_fname");
var user_fnameInfo = $("#user_fnameInfo");
var user_phone = $("#user_phone");
//On blur
user_login1reg.blur(validate_user_login1reg);
user_email.blur(validate_user_email);
user_fname.blur(validate_user_fname);
user_phone.blur(validate_user_phone);
//On key press
user_login1reg.keyup(validate_user_login1reg);
user_email.keyup(validate_user_email);
user_fname.keyup(validate_user_fname);
user_phone.keyup(validate_user_phone);
//On Submitting
registerform.submit(function(){
if(validate_user_login1reg() & validate_user_email() & validate_user_fname() & validate_user_phone())
return true
else
return false;
});
////////////REGISTRATION FORM END
//validation functions
function validate_user_login()
{
if($("#user_login").val() == '')
{
user_login.addClass("error");
user_loginInfo.text("Please Enter Username");
user_loginInfo.addClass("message_error2");
return false;
}
else{
user_login.removeClass("error");
user_loginInfo.text("");
user_loginInfo.removeClass("message_error2");
return true;
}
}
function validate_user_pass()
{
if($("#user_pass").val() == '')
{
user_pass.addClass("error");
user_passInfo.text("Please Enter Password");
user_passInfo.addClass("message_error2");
return false;
}
else{
user_pass.removeClass("error");
user_passInfo.text("");
user_passInfo.removeClass("message_error2");
return true;
}
}
function validate_user_login1reg()
{
if($("#user_login1reg").val() == '')
{
user_login1reg.addClass("error");
user_login1regInfo.text("Please Enter Username");
user_login1regInfo.addClass("message_error2");
return false;
}
else{
user_login1reg.removeClass("error");
user_login1regInfo.text("");
user_login1regInfo.removeClass("message_error2");
return true;
}
}
function validate_user_fname()
{
if($("#user_fname").val() == '')
{
user_fname.addClass("error");
user_fnameInfo.text("Please Enter First Name");
user_fnameInfo.addClass("message_error2");
return false;
}
else{
user_fname.removeClass("error");
user_fnameInfo.text("");
user_fnameInfo.removeClass("message_error2");
return true;
}
}
function validate_user_email()
{
var isvalidemailflag = 0;
if($("#user_email").val() == '')
{
isvalidemailflag = 1;
}
else if($("#user_email").val() != '')
{
var a = $("#user_email").val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
//if it's valid email
if(filter.test(a)){
isvalidemailflag = 0;
}else{
isvalidemailflag = 1;
}
}
if(isvalidemailflag)
{
user_email.addClass("error");
user_emailInfo.text("Please Enter valid E-mail");
user_emailInfo.addClass("message_error2");
return false;
}
else
{
user_email.removeClass("error");
user_emailInfo.text("");
user_emailInfo.removeClass("message_error");
return true;
}
}
function validate_user_phone()
{
var isvalidphoneflag = 0;
if($("#user_phone").val() == '')
{
isvalidphoneflag = 1;
}
else if($("#isvalidphoneflag").val() != '')
{
var a = $("#user_phone").val();
var filter = /^(1-?)-?[2-9]\d{2}?(\([0-9]\d{2}\)|[0-9]\d{2})-?\d{7}$/;
//if it's valid phone
if(filter.test(a)) {
isvalidphoneflag = 0;
}
else
{
isvalidphoneflag = 1;
}
}
if(isvalidphoneflag)
{
user_phone.addClass("error");
user_phoneInfo.text("Please Enter valid Phone");
user_phoneInfo.addClass("message_error2");
return false;
}
else
{
user_phone.removeClass("error");
user_phoneInfo.text("");
user_phoneInfo.removeClass("message_error");
return true;
}
}
});
Essentially, the javascript is what is making your form run validation. I'm no regex guru, but I am pretty sure what I listed for the function will validate against a number for dubai.
For your other issue, paste this css into your style.css file:
input.wpcf7-text {
border: 1px solid #ccc;
padding: 3px;
}
- 08/30/10 2:36am
Kaavs says:Hi Todd,
1. I did replace the contents of the reg_validation.js It's still not a mandatory field though (*). What Code do I have to add to this to make it compulsory for the registering user to type in their mobile number in order to register?
2. I did add the snippet to style.css of the plugin. No luck.. am I supposed to replace some other code with the one you mentioned or am I making a mistake somewhere?
Cheers,
Kaavs
- 08/30/10 2:36am
This question has expired.
Current status of this question: Completed
