ફોર્મ સ્ટાઇલિંગ
ઓટો ફોર્મ બિલ્ડર તમને ફોર્મ સ્ટાઇલ પર સંપૂર્ણ નિયંત્રણ આપે છે. તમારા બ્રાન્ડ રંગો સાથે મેળ કરો, તમારા ફોન્ટ્સનો ઉપયોગ કરો, અંતર સમાયોજિત કરો અને તમારી સાઇટના કુદરતી ભાગ જેવા દેખાતા ફોર્મ્સ ડિઝાઇન કરો.
ફોર્મ સ્ટાઇલ શા માટે મહત્વપૂર્ણ છે
તમારી વેબસાઇટનો એક બ્રાન્ડ છે. તમારા ફોર્મ્સ તેને પ્રતિબિંબિત કરવા જોઈએ.
જ્યારે ફોર્મ્સ તમારી સાઇટના બાકીના ભાગોથી અલગ દેખાય છે, ત્યારે મુલાકાતીઓ અચકાય છે. તેઓ આશ્ચર્ય પામે છે કે શું તેઓ હજી પણ એ જ વેબસાઇટ પર છે. તે ખચકાટ રૂપાંતરણોનો ખર્ચ કરે છે.
સ્ટાઇલવાળા ફોર્મ્સ વ્યાવસાયીકરણનો પણ સંદેશ આપે છે. એક પોલિશ્ડ ફોર્મ મુલાકાતીઓને જણાવે છે કે તમને વિગતોની કાળજી છે - અને જો તમે ફોર્મ ડિઝાઇનની કાળજી લો છો, તો તમને કદાચ તેમના ડેટાની પણ કાળજી હશે.
ફોર્મ સ્ટાઇલ કેવી રીતે કાર્ય કરે છે
ઓટો ફોર્મ બિલ્ડરમાં ફોર્મ બિલ્ડર ઇન્ટરફેસમાં બનેલ વિઝ્યુઅલ સ્ટાઇલ એડિટરનો સમાવેશ થાય છે.
- શું સ્ટાઇલ કરવું તે પસંદ કરો. ફોર્મ કન્ટેનર, ફીલ્ડ લેબલ્સ, ઇનપુટ ફીલ્ડ્સ, બટન્સ અથવા ભૂલ સંદેશાઓમાંથી પસંદ કરો.
- સેટિંગ્સ સમાયોજિત કરો. મૂલ્યો બદલવા માટે રંગ પીકર, સ્લાઇડર્સ અને ડ્રોપડાઉનનો ઉપયોગ કરો. શીખવા કે યાદ રાખવા માટે કોઈ CSS સિન્ટેક્સ નથી.
- તાત્કાલિક પૂર્વાવલોકન કરો. દરેક ફેરફાર લાઇવ પ્રીવ્યૂમાં તરત જ દેખાય છે. પ્રકાશિત કરતા પહેલા તમારું ફોર્મ કેવું દેખાશે તે બરાબર જુઓ.
- ડિફોલ્ટ તરીકે સાચવો. નવા ફોર્મમાં તમારી સ્ટાઇલ આપમેળે લાગુ કરો. એકવાર બનાવો, દરેક જગ્યાએ ફરીથી ઉપયોગ કરો.
તમે શું કસ્ટમાઇઝ કરી શકો છો
કલર્સ
તમારા ફોર્મના દરેક રંગને નિયંત્રિત કરો. ફોર્મ કન્ટેનર અને વ્યક્તિગત ફીલ્ડ માટે પૃષ્ઠભૂમિ રંગો. લેબલ્સ, પ્લેસહોલ્ડર્સ અને ઇનપુટ ટેક્સ્ટ માટે ટેક્સ્ટ રંગો. ડિફોલ્ટ, ફોકસ અને ભૂલ સ્થિતિઓ માટે બોર્ડર રંગો. પૃષ્ઠભૂમિ, ટેક્સ્ટ અને હોવર ઇફેક્ટ્સ માટે બટન રંગો.
ટાઇપોગ્રાફી
લેબલ્સ અને ઇનપુટ ફીલ્ડ્સ માટે ફોન્ટ્સ પસંદ કરો. ફોન્ટ કદને સ્વતંત્ર રીતે ગોઠવો—એક્ઝાન્સ માટે મોટા લેબલ્સ, ગૌણ માહિતી માટે નાના સહાયક ટેક્સ્ટ. બોલ્ડ લેબલ્સ અથવા હળવા ઇનપુટ ટેક્સ્ટ માટે ફોન્ટ વજન નિયંત્રિત કરો.
અંતર અને લેઆઉટ
શ્વાસ લેવાની જગ્યા બનાવવા માટે ફીલ્ડ્સ વચ્ચે અંતર સેટ કરો. આરામદાયક ટેક્સ્ટ એન્ટ્રી માટે ફીલ્ડ્સની અંદર પેડિંગ ગોઠવો. તમારા પૃષ્ઠ લેઆઉટમાં તેને સંપૂર્ણ રીતે સ્થિત કરવા માટે સમગ્ર ફોર્મની આસપાસ માર્જિન નિયંત્રિત કરો.
કિનારીઓ અને ખૂણાઓ
બોર્ડરની પહોળાઈ, શૈલી અને રંગ વ્યાખ્યાયિત કરો. આધુનિક દેખાવ માટે ગોળાકાર ખૂણાઓ અથવા ન્યૂનતમ ડિઝાઇન માટે તેમને તીક્ષ્ણ રાખો. વિવિધ ફોર્મ સ્ટેટ્સમાં વિવિધ બોર્ડર શૈલીઓ લાગુ કરો—ડિફોલ્ટ રૂપે સૂક્ષ્મ બોર્ડર્સ, ફોકસ પર અગ્રણી બોર્ડર્સ.
બટનો
તમારા બ્રાન્ડ સાથે મેળ ખાતા સબમિટ બટનો ડિઝાઇન કરો. પૃષ્ઠભૂમિ રંગ, ટેક્સ્ટ રંગ, બોર્ડર ત્રિજ્યા, પેડિંગ, ફોન્ટ કદ અને ફોન્ટ વજન. હોવર અને સક્રિય સ્થિતિઓને કસ્ટમાઇઝ કરો જેથી બટનો પ્રતિભાવશીલ અને ક્લિક કરી શકાય તેવું લાગે.
ફોર્મ કન્ટેનર
એકંદર ફોર્મ રેપરને સ્ટાઇલ કરો. પૃષ્ઠભૂમિ રંગ ઉમેરો અથવા તેને પારદર્શક રાખો. ઊંડાઈ માટે બોક્સ શેડો લાગુ કરો. ગોળાકાર ફોર્મ કન્ટેનર માટે બોર્ડર ત્રિજ્યા સેટ કરો. ફોર્મ્સ ખૂબ પહોળા ન ખેંચાય તે માટે મહત્તમ-પહોળાઈને નિયંત્રિત કરો.
સામાન્ય ફોર્મ સ્ટાઇલિંગ દૃશ્યો
બ્રાન્ડ માર્ગદર્શિકા સાથે મેળ કરો
તમારી કંપની પાસે ચોક્કસ રંગો છે—પ્રાથમિક માટે #0F2D5F, ઉચ્ચારો માટે #F59E0B. સ્ટાઇલ એડિટરમાં તે મૂલ્યો દાખલ કરો. ફોર્મ બટનો તમારા ઉચ્ચાર રંગનો ઉપયોગ કરે છે. ફોર્મ લેબલ્સ તમારા પ્રાથમિક રંગનો ઉપયોગ કરે છે. સંપૂર્ણ બ્રાન્ડ સુસંગતતા.
હાઇ-કોન્ટ્રાસ્ટ ફોર્મ્સ બનાવો
ઘેરા પૃષ્ઠભૂમિવાળી વેબસાઇટ? એવા હળવા સ્વરૂપો બનાવો જે અલગ દેખાય. હળવી પૃષ્ઠભૂમિ? દૃષ્ટિની સ્પર્ધા કર્યા વિના ફોર્મ વિસ્તારને વ્યાખ્યાયિત કરવા માટે સૂક્ષ્મ પડછાયાઓ સાથે બોર્ડર્ડ સ્વરૂપોનો ઉપયોગ કરો.
ન્યૂનતમ સ્વરૂપો ડિઝાઇન કરો
બોર્ડર્સ દૂર કરો, અંતર ઘટાડો, પારદર્શક પૃષ્ઠભૂમિનો ઉપયોગ કરો. એવા ફોર્મ્સ બનાવો જે બોક્સમાં બેસવાને બદલે પૃષ્ઠમાં એકીકૃત લાગે.
બોલ્ડ કોલ-ટુ-એક્શન ફોર્મ બનાવો
મોટા બટનો, મજબૂત રંગો, ઉદાર પેડિંગ. તમારા સૌથી મહત્વપૂર્ણ લીડ જનરેશન પૃષ્ઠો માટે ધ્યાન માંગનારા ફોર્મ્સ બનાવો.
કોઈપણ થીમ સાથે મેળ ખાતા ફોર્મ્સ
ઓટો ફોર્મ બિલ્ડર દરેક WordPress થીમ સાથે કામ કરે છે. તમારા સ્ટાઇલવાળા ફોર્મ્સ કોઈપણ ડિઝાઇન સંદર્ભને અનુરૂપ બને છે.
શું તમે વુડમાર્ટ, એસ્ટ્રા, જનરેટપ્રેસ, ડિવી, કે અન્ય કોઈ થીમનો ઉપયોગ કરી રહ્યા છો? તમારા ફોર્મ્સ મૂળ દેખાશે. સ્ટાઇલ એડિટર તમને કોઈપણ ડિઝાઇન સિસ્ટમ સાથે મેચ કરવા માટે પૂરતું નિયંત્રણ આપે છે.
કોઈ થીમ વિરોધાભાસ નથી. કોઈ શૈલી વારસાગત સમસ્યાઓ નથી. ફક્ત એવા ફોર્મ્સ જે તમે ઇચ્છો તે રીતે જ દેખાય છે.
કોઈ CSS જરૂરી નથી
તમારા ફોર્મ્સને સ્ટાઇલ કરવા માટે તમારે કસ્ટમ CSS લખવાની જરૂર નથી. વિઝ્યુઅલ એડિટર બધું જ સંભાળે છે.
પરંતુ જો તમે CSS નિયંત્રણ ઇચ્છતા હો, તો ઓટો ફોર્મ બિલ્ડર ફોર્મ દીઠ કસ્ટમ CSS ને સપોર્ટ કરે છે. એજ કેસ માટે ઓવરરાઇડ ઉમેરો અથવા વિઝ્યુઅલ એડિટરમાં ઉપલબ્ધ ન હોય તેવી એડવાન્સ્ડ સ્ટાઇલ લાગુ કરો. એડવાન્સ્ડ યુઝર્સને જરૂરી સુગમતા મળે છે.
