සෑම වෙබ් අඩවියකම වගේ Form එකක් අපිට බලා ගන්න පුළුවන්. ඒකට ප්‍රධාන හේතුවක් වෙන්නේ වෙබ් අඩවියට පැමිණෙන අයගේ තොරතුරු ලබා ගැනීමට හොඳම ක්‍රමය එය වීමයි.
WordPress Website එකට ගොඩක් පහසුවෙන් forms එකතු කරන්න පුළුවන්. මේ video එක බැලුවොත් ඒක හරියටම කරන හැටි දැන ගන්න පුළුවන්.
How to Create a Form in WordPress: https://youtu.be/IWbF_q8BtYE
ඔයා හදපු form එක website එකේ design එකට ගැලපෙන්න ලස්සනට හදා ගන්නත් පුළුවන්. ඒකට මේ video එක බලන්න.
How to Style Fluent Forms: https://youtu.be/9OOFRjn4LfM
පහත තියෙන CSS code මගින් බොහොම පහසුවෙන් ඔයාගේ forms style කර ගන්න පුළුවන්. ඒ සඳහා ඉහත video එක උදව් කර ගන්න.
Form Style 1
/*Form Field Styling*/
form.fluent_form_4 .ff-el-form-control{
border-radius: 0px; /*change corner round/ border radius*/
border: 2px solid #6f43d6; /*change border width and color*/
padding: 4px 12px; /*change padding*/
background-color: #6f43d6; /*change background color*/
}
form.fluent_form_4 .ff-el-form-control:focus{
border-radius: 0px; /*change corner round/ border radius*/
border: 2px solid #6f43d6 !important; /*change border width and color*/
background-color: #6f43d6 !important; /*change background color*/
}
form.fluent_form_4 .ff-el-form-control {
font-size: 14px ; /*change font size*/
line-height: 1.5; /*change line height*/
color: #fff !important; /*change font color*/
}
/*Form Lable Styling*/
/*Change label styles*/
form.fluent_form_4 .ff-el-input--label{
font-size:16px; /*change label font size*/
color:#fff; /*change label color*/
}
/*Form Button Styling*/
/* Change button style*/
form.fluent_form_4 .ff-btn-submit {
background-color: #6f43d6 !important; /* change button background color */
color: #ffffff; /*change button font color*/
border-radius: 0px; /*change button round corners*/
}
/*Change button hover style*/
form.fluent_form_4 .ff-btn-submit:hover {
background-color: #ff0606; /*change button background color on hover*/
}
/*Form Error Message Styling*/
/*Error message border color change*/
form.fluent_form_4 .ff-el-is-error .ff-el-form-control{
border-color: #d4c7f3 !important;
}
/*Error message text color change*/
form.fluent_form_4 .ff-el-is-error .text-danger{
color: #fff !important;
}Form Style 2
.fluent_form_5 .ff-el-form-control{
padding: 6px 12px; /*change padding*/
background-color: #fff; /*change background color*/
border-radius: 0px !important; /*change corner round/ border radius*/
border-color: #fff #fff #000 #fff !important; /*change border width and color*/
}