Make form on traffica mobile friendly?

Discussion in 'Traffica WordPress Theme' started by techinstalls, Oct 21, 2013.

  1. techinstalls

    techinstalls New Member

    Joined:
    Oct 7, 2013
    Messages:
    7
    Likes Received:
    0
  2. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    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.
     
  3. techinstalls

    techinstalls New Member

    Joined:
    Oct 7, 2013
    Messages:
    7
    Likes Received:
    0
    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='[email protected]@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&#x3a;&#x2f;&#x2f;techinstalls.co.uk&#x2f;wordpress&#x2f;&#x3f;page_id&#x3d;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>
     
  4. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    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.
     

Share This Page