首页 文章

编辑联系表格7位置持有人

提问于
浏览
0

我在我的网站上使用联系form7插件用于所有表格的wordpress .

表格的链接

现在我想在表单的字段中添加一些字体图标,如highercodetechnolabs dot com / test-contact

尽快帮助我 .

以下是我为表单自定义编写的代码


<style>
 .wpcf7-form {
 background:#D8D8D8;
  border-radius:3px; 
  width:650px;
  padding: 8px 8px; 
   margin-
bottom:5px; 

 }

 </style>



 <style>
 #textarea {
   height: 40px;
    width: 270px;
   background:#FFFFFF;  moon-user; 
   border: medium none #089AE6;
  text-transform: uppercase;
  placeholder: moon-user;
 }

</style>

 <style>
 #textarea1 {
    height: 180px;
    width:600px;
   background:#FFFFFF
 }

 </style>
 <style>
 .wpcf7-submit { 
    background:#FA5858;

     border-top: none;
     border-bottom: none;
     border-left: none;
     border-right: none;
 border-radius: 0px; 
 width:220px;
    height:250px
 margin:7px 0;
 padding: 8px 8px;
 color:#fff; 
 font-size:20px
 }
 </style>

<style>
 table {border: none;}
 </style>

 <style>
 table, tr, td {
background: transparent;
 color: #000;

}
</style>

<style>

i
{
padding: 5px 10px;
display: inline-block;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: 0px 0px 2px #888;
-webkit-box-shadow: 0px 0px 2px #888;
box-shadow: 0px 0px 2px #888;
}


</style>

<font color="#000000"  face="verdana" size="5">Your Contact Information</font>
<table>
<tr>
<td>[text* name id:textarea class:wpcf7-form placeholder   "* Your Name"]</td>

<td>[email* email id:textarea class:wpcf7-form placeholder "* Your Email"]</td>
</tr>

<table>
<tr>
<td>[tel* telephone id:textarea class:wpcf7-form placeholder "* Your Phone"]</td>
<td>[text companyname id:textarea class:wpcf7-form placeholder "Company Name"]</td>
</tr>
</table>

<table>
<tr>
 <td>
 [select* country id:textarea class:wpcf7-form "*Please Select Your Country" "Afghanistan" "Aland      
 Islands" "Albania" "Algeria" "American Samoa" "Andorra" "Angola" "Anguilla" "Antarctica"    
 "Antigua And Barbuda" "Argentina" "Armenia" "Aruba" "Australia" "Austria" "Azerbaijan" "Bahamas" 
 "Bahrain" "Bangladesh" "Barbados" "Belarus" "Belgium" "Belize" "Benin" "Bermuda" "Bhutan" 
 "Bolivia" "Bosnia And Herzegovina" "Botswana" "Bouvet Island" "Brazil" "British Indian Ocean 
 Territory" "Brunei Darussalam" "Bulgaria" "Burkina Faso" "Burundi" "Cambodia" "Cameroon" 
 "Canada" "Cape Verde" "Cayman Islands" "Central African Republic" "Chad" "Chile" "China"    
 "Christmas Island" "Cocos (Keeling) Islands" "Colombia" "Comoros" "Congo" "Congo, The Democratic 
 Republic Of The" "Cook Islands" "Costa Rica" "Cote D'Ivoire" "Croatia" "Cuba" "Cyprus" "Czech 
 Republic" "Denmark" "Djibouti" "Dominica" "Dominican Republic" "Ecuador" "Egypt" "El Salvador" 
 "Equatorial Guinea" "Eritrea" "Estonia" "Ethiopia" "Falkland Islands (Malvinas)" "Faroe Islands" 
 "Fiji" "Finland" "France" "French Guiana" "French Polynesia" "French Southern Territories" 
 "Gabon" "Gambia" "Georgia" "Germany" "Ghana" "Gibraltar" "Greece" "Greenland" "Grenada" 
"Guadeloupe" "Guam" "Guatemala" "Guernsey" "Guinea" "Guinea-Bissau" "Guyana" "Haiti" "Heard  
 Island And Mcdonald Islands" "Holy See (Vatican City State)" "Honduras" "Hong Kong" "Hungary" 
"Iceland" "India" "Indonesia" "Iran, Islamic Republic Of" "Iraq" "Ireland" "Isle Of Man" "Israel" 
"Italy" "Jamaica" "Japan" "Jersey" "Jordan" "Kazakhstan" "Kenya" "Kiribati" "Korea, Democratic 
 People'S Republic Of" "Korea, Republic Of" "Kuwait" "Kyrgyzstan" "Lao People'S Democratic 
 Republic" "Latvia" "Lebanon" "Lesotho" "Liberia" "Libyan Arab Jamahiriya" "Liechtenstein" 
  "Lithuania" 
 "Luxembourg" "Macao" "Macedonia, The Former Yugoslav Republic Of" "Madagascar" "Malawi" 
 "Malaysia" 

"Maldives" "Mali" "Malta" "Marshall Islands" "Martinique" "Mauritania" "Mauritius" "Mayotte"    
"Mexico" 
 "Micronesia, Federated States Of" "Moldova, Republic Of" "Monaco" "Mongolia" "Montserrat" 
"Morocco" 
 "Mozambique" "Myanmar" "Namibia" "Nauru" "Nepal" "Netherlands" "Netherlands Antilles" "New    
  Caledonia" 
  "New Zealand" "Nicaragua" "Niger" "Nigeria" "Niue" "Norfolk Island" "Northern Mariana Islands" 

  "Norway" "Oman" "Pakistan" "Palau" "Palestinian Territory, Occupied" "Panama" "Papua New   
  Guinea" 
  "Paraguay" "Peru" "Philippines" "Pitcairn" "Poland" "Portugal" "Puerto Rico" "Qatar" "Reunion" 
 "Romania" "Russian Federation" "Rwanda" "Saint Helena" "Saint Kitts And Nevis" "Saint Lucia" 
 "Saint Pierre And Miquelon" "Saint Vincent And The Grenadines" "Samoa" "San Marino" "Sao Tome 
 And Principe" "Saudi Arabia" "Senegal" "Serbia And Montenegro" "Seychelles" "Sierra Leone" 
 "Singapore" "Slovakia" "Slovenia" "Solomon Islands" "Somalia" "South Africa" "South Georgia And 
 The South Sandwich Islands" "Spain" "Sri Lanka" "Sudan" "Suriname" "Svalbard And Jan Mayen" 
 "Swaziland" "Sweden" "Switzerland" "Syrian Arab Republic" "Taiwan, Province Of China" 
 "Tajikistan" "Tanzania, United Republic Of" "Thailand" "Timor-Leste" "Togo" "Tokelau" "Tonga" 
 "Trinidad And Tobago" "Tunisia" "Turkey" "Turkmenistan" "Turks And Caicos Islands" "Tuvalu" 
 "Uganda" "Ukraine" "United Arab Emirates" "United Kingdom" "United States" "United States Minor 
 Outlying Islands" "Uruguay" "Uzbekistan" "Vanuatu" "Venezuela" "Viet Nam" "Virgin Islands, 
 British" "Virgin Islands, U.S." "Wallis And Futuna" "Western Sahara" "Yemen" "Zambia" 
 "Zimbabwe"]
  </td></tr>
  </table>

 <font color="#000000" face="verdana" size="5">Brief Project Description</font>
 [textarea* requirement 20x20 id:textarea1 class:wpcf7-form]


 [submit class:wpcf7-submit "SUBMIT INQUIRY"]</a>

 <img src="http://highercodetechnolabs.com/hct/1401538223_MB__LOCK.png" height="42" width="42"    
 align="middle"><font color="#000000" size="4">&nbsp;<b>WE GUARANTEE 100% SECURITY OF YOUR   
 INFORMATION</font></b>

 <font color="#000000" size="2">We will not share the details you provide above with anyone. Your        
 email won't be used for spamming.

请帮帮我@ info@highercodetechnolabs.com

1 回答

  • 0

    Solution 1: absolute positioning hack

    您可以在输入字段之前加载自定义字体,然后将其强制向右,然后使用填充将内部文本正确放置在内部 .

    在树屋上看到这个答案https://teamtreehouse.com/forum/how-do-i-put-icons-inside-of-input-fields,它可能会为您找到适合您问题的解决方案的一些好线索 .

    http://jsbin.com/xexuwi/1/edit为一个工作的例子!

    Solution 2: replace with background images

    您正在使用一些自定义字体来尝试获取图标,但如果它不适合您,可能会尝试将图标设置为背景图像 .

    有关工作示例,请参阅我的http://jsbin.com/gakaye/3/edit解决方案 .

    我将图标图像分割,上传,然后将其设置为具有特定定位的背景图像 . 您可以将其设置为您需要的任何元素(为不同的字段设置不同的背景) .

相关问题