Hi I have the following form on the website, how can I make this mobile friendly so it goes with the rest of the theme? Thanks http://techinstalls.co.uk/wordpress/contact-2
Hello, To create responsive table you need to provide width of label, textbox and text area in percentage. Copy the following code and paste in the text editor of page in which you want to create table. Code: <table border="0" cellspacing="0" cellpadding="6" width="100%" style="background-color:white;color:#eb8d1a"> <input type="hidden" name="zc_gad" id="zc_gad" value=""> <tbody><tr> <td colspan="2" align="left" style="color:#eb8d1a;font-family:Arial;font-size:14px;"><strong>Contact Us!</strong></td> </tr> <tr> <td nowrap="nowrap" align="left" style="font-size:12px;font-family:Arial;width:25%;">First Name </td> <td style="width:250px;"><input type="text" style="width:80%;" maxlength="40" name="First Name"> </td> </tr> <tr> <td nowrap="nowrap" align="left" style="font-size:12px;font-family:Arial;width:25%;">Last Name<span style="color:red;">*</span> </td> <td style="width:250px;"><input type="text" style="width:80%;" maxlength="80" name="Last Name"> </td> </tr> <tr> <td nowrap="nowrap" align="left" style="font-size:12px;font-family:Arial;width:25%;">Email </td> <td style="width:250px;"><input type="text" style="width:80%;" maxlength="100" name="Email"> </td> </tr> <tr> <td nowrap="nowrap" align="left" style="font-size:12px;font-family:Arial;width:25%;">Phone </td> <td style="width:250px;"><input type="text" style="width:80%;" maxlength="30" name="Phone"> </td> </tr> <tr> <td nowrap="nowrap" align="left" style="font-size:12px;font-family:Arial;width:25%;">Message<span style="color:red;">*</span> </td> <td style="width:80%;"> <textarea style="width:50%;" name="Description" maxlength="1000" height="250"></textarea></td> </tr> <tr> <td colspan="2" align="center" style="padding-top: 15px;"><input style="font-size:12px;color:#eb8d1a" type="submit" value="Send"> <input type="reset" style="font-size:12px;color:#eb8d1a" value="Clear"> </td> </tr> </tbody></table> You can adjust the width in percentage as per your requirement.
The JS does then not work for the form, How can I integrate the above with the below? <div id='crmWebToEntityForm' align='center'><META HTTP-EQUIV ='content-type' CONTENT='text/html;charset = UTF-8'> <form action='https://crm.zoho.com/crm/WebToLeadForm' name=WebToLeads974006000000068004 method='POST' onSubmit='javascript:document.charset="UTF-8"; return checkMandatery()' accept-charset='UTF-8'><table border=0 cellspacing=0 cellpadding='6' width=600 style='background-color:white;color:#eb8d1a'> <input type='text' style='display:none;' name='xnQsjsdp' value='7BJCT@0BUd5thYo@kRl79w$$'/> <input type='hidden' name='zc_gad' id='zc_gad' value=''/> <input type='text' style='display:none;' name='xmIwtLD' value='y9-5gIgwFBIzdy22uhK3qmGh5LqguCvg'/> <input type='text' style='display:none;' name='actionType' value='TGVhZHM='/> <input type='text' style='display:none;' name='returnURL' value='http://techinstalls.co.uk/wordpress/?page_id=130' /> <br><tr><td colspan='2' align='left' style='color:#eb8d1a;font-family:Arial;font-size:12px;'><strong>Web To Lead Form</strong></td></tr> <br><tr><td nowrap='nowrap' align='left' style='font-size:12px;font-family:Arial;width:25%;'>First Name </td><td style='width:25%;' ><input type='text' style='width:25%;' maxlength='40' name='First Name' /></div> </td></tr><tr><td nowrap='nowrap' align='left' style='font-size:12px;font-family:Arial;width:25%;'>Last Name<span style='color:red;'>*</span> </td><td style='width:25%;' ><input type='text' style='width:25%;' maxlength='80' name='Last Name' /></div> </td></tr><tr><td nowrap='nowrap' align='left' style='font-size:12px;font-family:Arial;width:25%;'>Email </td><td style='width:25%;' ><input type='text' style='width:25%;' maxlength='100' name='Email' /></div> </td></tr><tr><td nowrap='nowrap' align='left' style='font-size:12px;font-family:Arial;width:25%;'>Phone </td><td style='width:25%;' ><input type='text' style='width:25%;' maxlength='30' name='Phone' /></div> </td></tr><tr><td nowrap='nowrap' align='left' style='font-size:12px;font-family:Arial;width:25%;'>Message<span style='color:red;'>*</span> </td><td style='width:25%;' > <textarea style='width:25%;' name='Description' maxlength='1000' width='250' height='250'></textarea></td></tr><tr><td colspan='2' align='center' style='padding-top: 25%;' ><input style='font-size:12px;color:#eb8d1a' type='submit' value='Send' /> <input type='reset' style='font-size:12px;color:#eb8d1a' value='Clear' /> </td></tr></table><script> var mndFileds=new Array('Last Name','Description');var fldLangVal=new Array('Last Name','Message');function reloadImg(){document.getElementById('imgid').src = document.getElementById('imgid').src;} function checkMandatery(){for(i=0;i<mndFileds.length;i++){ var fieldObj=document.forms['WebToLeads974006000000068004'][mndFileds];if(fieldObj) {if(((fieldObj.value).replace(/^\s+|\s+$/g, '')).length==0){alert(fldLangVal +' cannot be empty'); fieldObj.focus(); return false;}else if(fieldObj.nodeName=='SELECT'){if(fieldObj.options[fieldObj.selectedIndex].value=='-None-'){alert(fldLangVal +' cannot be none'); fieldObj.focus(); return false;}} else if(fieldObj.type =='checkbox' && fieldObj.checked == false){alert('Please accept '+fldLangVal);fieldObj.focus();return false;}}}}</script> </form></div>
Hello, This is not the issue of our theme. You can contact with the your form related support form. Or You can search any alternative plugin for responsive form on WordPress.org site.
