വേർഡ്പ്രസ്സ് ഫോമുകളിൽ ഇഷ്ടാനുസൃത HTML ഉള്ളടക്കം എങ്ങനെ ചേർക്കാം

ഫോമുകൾ വെറും ഇൻപുട്ട് ഫീൽഡുകളല്ല. ചിലപ്പോൾ നിങ്ങൾ എന്തെങ്കിലും വിശദീകരിക്കുകയോ, വിഭാഗങ്ങൾ വിഭജിക്കുകയോ, ഒരു ചിത്രം കാണിക്കുകയോ, അല്ലെങ്കിൽ ചോദ്യങ്ങൾക്കിടയിൽ സന്ദർഭം ചേർക്കുകയോ ചെയ്യേണ്ടതുണ്ട്. ഇഷ്ടാനുസൃത HTML ഉള്ളടക്കം സ്റ്റാറ്റിക് ഫോമുകളെ ഗൈഡഡ് അനുഭവങ്ങളാക്കി മാറ്റുന്നു. നിങ്ങളുടെ വേർഡ്പ്രസ്സ് ഫോമുകളിലേക്ക് സമ്പന്നമായ ഉള്ളടക്കം എങ്ങനെ ചേർക്കാമെന്ന് ഇതാ.

HTML ബ്ലോക്ക് എന്താണ്?

നിര്വചനം

ഇൻപുട്ട് ശേഖരിക്കാതെ ഉള്ളടക്കം പ്രദർശിപ്പിക്കുന്ന ഒരു പ്രത്യേക ഫോം ഘടകമാണ് HTML ബ്ലോക്ക്. ഇത് നിങ്ങളുടെ ഫോം ഫീൽഡുകൾക്കിടയിൽ HTML റെൻഡർ ചെയ്യുന്നു, ഇത് ടെക്സ്റ്റ്, ഇമേജുകൾ, വീഡിയോകൾ, ഡിവൈഡറുകൾ എന്നിവയും അതിലേറെയും ചേർക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

HTML ബ്ലോക്ക് vs റെഗുലർ ഫീൽഡുകൾ

എന്തിനാണ് HTML ബ്ലോക്കുകൾ ഉപയോഗിക്കുന്നത്?

1. നിർദ്ദേശങ്ങളും മാർഗ്ഗനിർദ്ദേശങ്ങളും

എന്തുചെയ്യണമെന്ന് മനസ്സിലാക്കാൻ ഉപയോക്താക്കളെ സഹായിക്കുക:

• സങ്കീർണ്ണമായ ചോദ്യങ്ങൾ വിശദീകരിക്കുക
• സന്ദർഭം നൽകുക
• ആവശ്യകതകളുടെ പട്ടിക
• വിഭാഗങ്ങളിലൂടെ ഗൈഡ് ചെയ്യുക

2. വിഷ്വൽ ഓർഗനൈസേഷൻ

നീണ്ട രൂപങ്ങൾ തകർക്കുക:

• വിഭാഗ തലക്കെട്ടുകൾ
• തിരശ്ചീന ഡിവൈഡറുകൾ
• വിഷ്വൽ സെപ്പറേറ്ററുകൾ
• ഗ്രൂപ്പ് ചെയ്‌ത ഉള്ളടക്കം

3. റിച്ച് മീഡിയ

ദൃശ്യ ഘടകങ്ങൾ ചേർക്കുക:

• ചിത്രങ്ങളും ഐക്കണുകളും
• ഉൾച്ചേർത്ത വീഡിയോകൾ
• വിവരഗ്രാഫിക്സ്
• ഡയഗ്രാമുകൾ

4. നിയമവും അനുസരണവും

പ്രധാനപ്പെട്ട വിവരങ്ങൾ പ്രദർശിപ്പിക്കുക:

• നിബന്ധനകളും വ്യവസ്ഥകളും ടെക്സ്റ്റ്
• സ്വകാര്യതാ അറിയിപ്പുകൾ
• നിരാകരണങ്ങൾ
• ആവശ്യമായ വെളിപ്പെടുത്തലുകൾ

5 ബ്രാൻഡിംഗ്

നിങ്ങളുടെ ബ്രാൻഡ് ശക്തിപ്പെടുത്തുക:

• ലോഗോകൾ
• ബ്രാൻഡ് നിറങ്ങൾ
• ഇഷ്‌ടാനുസൃത സ്റ്റൈലിംഗ്
• സ്ഥിരതയുള്ള രൂപം

ഒരു HTML ബ്ലോക്ക് ചേർക്കുന്നു

ഘട്ടം 1: ഫീൽഡ് ചേർക്കുക

1. നിങ്ങളുടെ ഫോം തുറക്കുക എ.എഫ്.ബി.
2. കണ്ടെത്തുക HTML ബ്ലോക്ക് ഫീൽഡ് ലിസ്റ്റിൽ
3. നിങ്ങളുടെ ഫോമിൽ ആവശ്യമുള്ള സ്ഥാനത്തേക്ക് അത് വലിച്ചിടുക.

ഘട്ടം 2: നിങ്ങളുടെ ഉള്ളടക്കം ചേർക്കുക

1. അത് തിരഞ്ഞെടുക്കാൻ HTML ബ്ലോക്കിൽ ക്ലിക്കുചെയ്യുക.
2. ക്രമീകരണ പാനൽ തുറക്കുക
3. നിങ്ങളുടെ HTML ഉള്ളടക്കം നൽകുക
4. ദൃശ്യപരത പരിശോധിക്കുന്നതിനുള്ള പ്രിവ്യൂ

ഘട്ടം 3: സ്ഥാനവും ശൈലിയും

1. ആവശ്യമെങ്കിൽ പുനഃക്രമീകരിക്കാൻ വലിച്ചിടുക
2. ഇൻലൈൻ സ്റ്റൈലുകളോ ക്ലാസുകളോ ചേർക്കുക
3. ഫ്രണ്ട് എന്റിൽ ടെസ്റ്റ് ചെയ്യുക

HTML ബ്ലോക്ക് ഉപയോഗിക്കുന്നതിനുള്ള പൊതുവായ രീതികൾ

1. വിഭാഗ തലക്കെട്ടുകൾ

സ്വകാര്യ വിവരം താഴെ നിങ്ങളുടെ ബന്ധപ്പെടാനുള്ള വിവരങ്ങൾ നൽകുക.

ഫലമായി:

സ്വകാര്യ വിവരം
നിങ്ങളുടെ കോൺടാക്റ്റ് വിശദാംശങ്ങൾ ചുവടെ നൽകുക.

2. തിരശ്ചീന വിഭജനം

ഫലമായി: വിഭാഗങ്ങളെ വേർതിരിക്കുന്ന ഒരു വൃത്തിയുള്ള രേഖ.

3. ഇൻസ്ട്രക്ഷൻ ബോക്സ്

 പ്രധാനം: തുടരുന്നതിന് മുമ്പ് ദയവായി നിങ്ങളുടെ ഓർഡർ നമ്പർ തയ്യാറാക്കി വയ്ക്കുക.

4. ബുള്ളറ്റ് ചെയ്ത നിർദ്ദേശങ്ങൾ

സമർപ്പിക്കുന്നതിന് മുമ്പ്, ദയവായി ഉറപ്പാക്കുക: ആവശ്യമായ എല്ലാ ഫീൽഡുകളും പൂരിപ്പിച്ചു. നിങ്ങളുടെ ഇമെയിൽ വിലാസം ശരിയാണ്. താഴെയുള്ള നിബന്ധനകൾ നിങ്ങൾ അവലോകനം ചെയ്‌തു.

5. ചിത്രം

6. എംബഡഡ് വീഡിയോ

7. മുന്നറിയിപ്പ്/അലേർട്ട് ബോക്സ്

 ⚠️ മുന്നറിയിപ്പ്: സമർപ്പിച്ചവ അയച്ചതിനുശേഷം എഡിറ്റ് ചെയ്യാൻ കഴിയില്ല.

8. വിജയം/വിവര ബോക്സ്

 ✓ നിങ്ങളുടെ പുരോഗതി സ്വയമേവ സംരക്ഷിക്കപ്പെടും.

9. സ്വകാര്യതാ അറിയിപ്പ്

നിങ്ങളുടെ വിവരങ്ങൾ ഞങ്ങളുടെ സ്വകാര്യതാ നയത്തിന് കീഴിൽ പരിരക്ഷിച്ചിരിക്കുന്നു. നിങ്ങളുടെ ഡാറ്റ ഞങ്ങൾ ഒരിക്കലും മൂന്നാം കക്ഷികളുമായി പങ്കിടില്ല.

10. നിബന്ധനകളുടെയും വ്യവസ്ഥകളുടെയും സംഗ്രഹം

 സേവന നിബന്ധനകൾ ഈ ഫോം സമർപ്പിക്കുന്നതിലൂടെ, നിങ്ങൾ... സമ്മതിക്കുന്നു.

ഫോം ലേഔട്ട് ഉദാഹരണങ്ങൾ

മൾട്ടി-സെക്ഷൻ ഫോം

[HTML ബ്ലോക്ക്: സെക്ഷൻ 1 - വ്യക്തിഗത വിവര തലക്കെട്ട്] നെയിം ഫീൽഡ് ഇമെയിൽ ഫീൽഡ് ഫോൺ ഫീൽഡ് [HTML ബ്ലോക്ക്: ഡിവൈഡർ] [HTML ബ്ലോക്ക്: സെക്ഷൻ 2 - പ്രോജക്റ്റ് വിശദാംശങ്ങളുടെ തലക്കെട്ട്] പ്രോജക്റ്റ് തരം ഡ്രോപ്പ്ഡൗൺ വിവരണം ടെക്സ്റ്റ് ഏരിയ ബജറ്റ് ഫീൽഡ് [HTML ബ്ലോക്ക്: ഡിവൈഡർ] [HTML ബ്ലോക്ക്: സെക്ഷൻ 3 - അന്തിമ ഘട്ടങ്ങളുടെ തലക്കെട്ട്] ഫയൽ അപ്‌ലോഡ് നിബന്ധനകൾ ചെക്ക്ബോക്സ് സമർപ്പിക്കുക ബട്ടൺ

ഇൻസ്ട്രക്ഷണൽ ഫോം

[HTML ബ്ലോക്ക്: സ്വാഗത സന്ദേശവും നിർദ്ദേശങ്ങളും] [HTML ബ്ലോക്ക്: ഘട്ടം 1 സൂചകം] ചോദ്യം 1 ചോദ്യം 2 [HTML ബ്ലോക്ക്: ഘട്ടം 2 സൂചകം] ചോദ്യം 3 ചോദ്യം 4 [HTML ബ്ലോക്ക്: അവലോകന ഓർമ്മപ്പെടുത്തൽ] സമർപ്പിക്കൽ ബട്ടൺ

അപേക്ഷാ ഫോറം

[HTML ബ്ലോക്ക്: കമ്പനി ലോഗോ] [HTML ബ്ലോക്ക്: സ്ഥാന ശീർഷകവും വിവരണവും] നാമ ഫീൽഡ് ഇമെയിൽ ഫീൽഡ് [HTML ബ്ലോക്ക്: ഫോർമാറ്റ് ആവശ്യകതകളുള്ള "നിങ്ങളുടെ റെസ്യൂമെ അപ്‌ലോഡ് ചെയ്യുക" എന്ന നിർദ്ദേശം] ഫയൽ അപ്‌ലോഡ് ഫീൽഡ് [HTML ബ്ലോക്ക്: തുല്യ അവസര പ്രസ്താവന] സമർപ്പിക്കുക ബട്ടൺ

HTML ബ്ലോക്കുകൾ സ്റ്റൈലിംഗ്

ഇൻലൈൻ ശൈലികൾ

ഘടകങ്ങളിലേക്ക് നേരിട്ട് ശൈലികൾ ചേർക്കുക:

നിങ്ങളുടെ സ്റ്റൈൽ ചെയ്ത ഉള്ളടക്കം ഇതാ.

പൊതുവായ സ്റ്റൈൽ പ്രോപ്പർട്ടികൾ

പശ്ചാത്തലം: പശ്ചാത്തലം: #f5f5f5; പാഡിംഗ്: പാഡിംഗ്: 15px; മാർജിൻ: മാർജിൻ: 20px 0; ബോർഡർ: ബോർഡർ: 1px സോളിഡ് #ddd; ബോർഡർ ആരം: ബോർഡർ-ആരം: 5px; ഫോണ്ട് വലുപ്പം: ഫോണ്ട്-വലുപ്പം: 14px; നിറം: നിറം: #333; വാചക വിന്യാസം: വാചക-അലൈൻ: മധ്യഭാഗം;

സ്റ്റൈൽഡ് ബോക്സുകൾ സൃഷ്ടിക്കുന്നു

വിവരപ്പെട്ടി (നീല):

 ℹ️ വിവര സന്ദേശം ഇവിടെ

വിജയപ്പെട്ടി (പച്ച):

 ✓ വിജയ സന്ദേശം ഇവിടെ

മുന്നറിയിപ്പ് ബോക്സ് (മഞ്ഞ):

 ⚠️ മുന്നറിയിപ്പ് സന്ദേശം ഇവിടെ

പിശക് ബോക്സ് (ചുവപ്പ്):

 ✕ ഇവിടെ പിശക് അല്ലെങ്കിൽ പ്രധാനപ്പെട്ട മുന്നറിയിപ്പ്

റെസ്പോൺസീവ് ഡിസൈൻ നുറുങ്ങുകൾ

ചിത്രങ്ങൾ

പ്രതികരണാത്മക ചിത്രങ്ങൾക്കായി എപ്പോഴും പരമാവധി വീതി ഉപയോഗിക്കുക:

വീഡിയോകൾ

എംബഡഡ് വീഡിയോകൾക്ക് റെസ്പോൺസീവ് റാപ്പർ ഉപയോഗിക്കുക:

ടെക്സ്റ്റ് റീഡബിലിറ്റി

• ആപേക്ഷിക ഫോണ്ട് വലുപ്പങ്ങൾ ഉപയോഗിക്കുക (em, rem)
• വരി ദൈർഘ്യം വായിക്കാൻ കഴിയുന്ന തരത്തിൽ നിലനിർത്തുക
• മൊബൈലിൽ മതിയായ പാഡിംഗ്

മികച്ച രീതികൾ

1. സംക്ഷിപ്തമായി സൂക്ഷിക്കുക

• ചെറുതും സ്കാൻ ചെയ്യാവുന്നതുമായ വാചകം
• ഖണ്ഡികകൾക്ക് മുകളിലുള്ള ബുള്ളറ്റ് പോയിന്റുകൾ
• അത്യാവശ്യ വിവരങ്ങൾ മാത്രം

2. വിഷ്വൽ ശ്രേണി

• തലക്കെട്ടുകൾ മായ്ക്കുക
• സ്ഥിരമായ സ്റ്റൈലിംഗ്
• ലോജിക്കൽ ഒഴുക്ക്

3. പ്രവേശനക്ഷമത

• ചിത്രങ്ങൾക്കുള്ള Alt ടെക്സ്റ്റ്
• മതിയായ വർണ്ണ കോൺട്രാസ്റ്റ്
• സെമാന്റിക് HTML (h2, h3, p, ul)
• അർത്ഥത്തിനായി നിറത്തെ മാത്രം ആശ്രയിക്കരുത്.

4. ഇത് അമിതമാക്കരുത്

• വളരെയധികം ഉള്ളടക്കം അമിതമായി ബാധിക്കുന്നു
• ഇൻപുട്ട് ഫീൽഡുകൾ ഉപയോഗിച്ച് ഉള്ളടക്കം സന്തുലിതമാക്കുക
• ഓരോ HTML ബ്ലോക്കിന്റെയും ഉദ്ദേശ്യം

5. നന്നായി പരിശോധിക്കുക

• ഡെസ്‌ക്‌ടോപ്പിലും മൊബൈലിലും പ്രിവ്യൂ ചെയ്യുക
• എല്ലാ ലിങ്കുകളും പ്രവർത്തിക്കുന്നുണ്ടോ എന്ന് പരിശോധിക്കുക.
• ചിത്രങ്ങൾ ലോഡ് ചെയ്യുന്നത് പരിശോധിക്കുക
• വ്യത്യസ്ത ബ്രൗസറുകളിൽ പരീക്ഷിക്കുക

വിപുലമായ HTML ബ്ലോക്ക് ആശയങ്ങൾ

പുരോഗതി സൂചകം

1    2  3 ഘട്ടം 2 / 3: പ്രോജക്റ്റ് വിശദാംശങ്ങൾ

രണ്ട്-കോളം ലേഔട്ട്

ഓപ്ഷൻ എ ഓപ്ഷൻ എയുടെ വിവരണം... ഓപ്ഷൻ ബി ഓപ്ഷൻ ബിയുടെ വിവരണം...

ചുരുക്കാവുന്ന വിഭാഗം (വിശദാംശങ്ങൾ/സംഗ്രഹം)

പൂർണ്ണ നിബന്ധനകൾ വായിക്കാൻ ക്ലിക്ക് ചെയ്യുക പൂർണ്ണ നിബന്ധനകളും വ്യവസ്ഥകളും ഇവിടെ...

ഐക്കൺ ലിസ്റ്റ്

✓ $50-ൽ കൂടുതലുള്ള ഓർഡറുകൾക്ക് സൗജന്യ ഷിപ്പിംഗ് ✓ 30 ദിവസത്തെ പണം തിരികെ ലഭിക്കുമെന്ന ഗ്യാരണ്ടി ✓ 24/7 ഉപഭോക്തൃ പിന്തുണ

കൗണ്ട്ഡൗൺ/അടിയന്തിരാവസ്ഥ

 🔥 പരിമിത കാല ഓഫർ - യോഗ്യത നേടുന്നതിന് വെള്ളിയാഴ്ചയ്ക്കകം സമർപ്പിക്കുക!

സുരക്ഷാ പരിഗണനകൾ

എന്താണ് സുരക്ഷിതം

• സ്റ്റാൻഡേർഡ് HTML ടാഗുകൾ (p, div, h1-h6, ul, li, മുതലായവ)
• ഇൻലൈൻ ശൈലികൾ
• വിശ്വസനീയമായ ഉറവിടങ്ങളിൽ നിന്നുള്ള ചിത്രങ്ങൾ
• പ്രധാന പ്ലാറ്റ്‌ഫോമുകളിൽ നിന്നുള്ള ഉൾച്ചേർത്ത വീഡിയോകൾ

എന്താണ് ഒഴിവാക്കേണ്ടത്

• HTML ബ്ലോക്കുകളിലെ JavaScript (നീക്കം ചെയ്‌തേക്കാം)
• ബാഹ്യ സ്ക്രിപ്റ്റുകൾ
• വിശ്വസനീയമല്ലാത്ത iframe ഉറവിടങ്ങൾ
• HTML ബ്ലോക്കുകൾക്കുള്ളിലെ ഫോം ഘടകങ്ങൾ

സ്ക്രിപ്റ്റ് നിയന്ത്രണങ്ങളെക്കുറിച്ചുള്ള കുറിപ്പ്

XSS ആക്രമണങ്ങൾ തടയുന്നതിനായി മിക്ക ഫോം ബിൽഡർമാരും HTML സാനിറ്റൈസ് ചെയ്യുന്നു. സുരക്ഷയ്ക്കായി JavaScript ഉം ചില ടാഗുകളും സ്വയമേവ നീക്കം ചെയ്യപ്പെട്ടേക്കാം.

ട്രബിൾഷൂട്ടിംഗ്

HTML റെൻഡർ ചെയ്യുന്നില്ല

• വാക്യഘടന പിശകുകൾക്കായി പരിശോധിക്കുക
• ടാഗുകൾ ശരിയായി അടച്ചിട്ടുണ്ടോ എന്ന് പരിശോധിക്കുക.
• ചില ടാഗുകൾ നിയന്ത്രിച്ചിരിക്കാം.

സ്റ്റൈലിംഗ് പ്രയോഗിച്ചിട്ടില്ല

• ഇൻലൈൻ ശൈലി വാക്യഘടന പരിശോധിക്കുക
• തീം CSS അസാധുവാക്കപ്പെട്ടേക്കാം
• കൂടുതൽ നിർദ്ദിഷ്ട ശൈലികൾ ഉപയോഗിക്കുക അല്ലെങ്കിൽ !important

ചിത്രങ്ങൾ കാണിക്കുന്നില്ല

• ചിത്രത്തിന്റെ URL ശരിയാണോ എന്ന് പരിശോധിക്കുക
• ഇമേജ് അനുമതികൾ പരിശോധിക്കുക
• പൂർണ്ണ URL ഉപയോഗിക്കുക (https://…)

മൊബൈലിൽ ലേഔട്ട് തകരുന്നു

• ചിത്രങ്ങളിലേക്ക് പരമാവധി വീതി: 100% ചേർക്കുക
• വഴക്കമുള്ള ലേഔട്ടുകൾ ഉപയോഗിക്കുക (ഫ്ലെക്സ്ബോക്സ്)
• യഥാർത്ഥ മൊബൈൽ ഉപകരണത്തിൽ പരീക്ഷിക്കുക

ചുരുക്കം

ഫോമുകളിലേക്ക് ഇഷ്ടാനുസൃത HTML ഉള്ളടക്കം ചേർക്കുന്നു:

1. HTML ബ്ലോക്ക് ചേർക്കുക – നിങ്ങളുടെ ഫോമിലേക്ക് വലിച്ചിടുക
2. ഉള്ളടക്കം നൽകുക – ക്രമീകരണ പാനലിൽ HTML
3. ഉചിതമായി സ്ഥാനം പിടിക്കുക – പ്രസക്തമായ മേഖലകൾക്കിടയിൽ
4. ആവശ്യാനുസരണം സ്റ്റൈൽ ചെയ്യുക - ഇൻലൈൻ ശൈലികൾ അല്ലെങ്കിൽ ക്ലാസുകൾ
5. ആക്‌സസ് ചെയ്യാവുന്ന രീതിയിൽ നിലനിർത്തുക – ആൾട്ട് ടെക്സ്റ്റ്, കോൺട്രാസ്റ്റ്, സെമാന്റിക് HTML
6. പ്രതികരണാത്മകമായി പരീക്ഷിക്കുക – ഡെസ്ക്ടോപ്പും മൊബൈലും

തീരുമാനം

HTML ബ്ലോക്കുകൾ ലളിതമായ ചോദ്യാവലികളിൽ നിന്ന് ഫോമുകളെ ഗൈഡഡ് അനുഭവങ്ങളാക്കി മാറ്റുന്നു. ഉപയോക്താക്കൾക്ക് ആവശ്യമുള്ളിടത്ത് സന്ദർഭം ചേർക്കുക, ലോജിക്കൽ വിഭാഗങ്ങളായി നീണ്ട ഫോമുകൾ ക്രമീകരിക്കുക, ഇടപഴകാനും അറിയിക്കാനും റിച്ച് മീഡിയ ഉൾപ്പെടുത്തുക. ഒരു സെക്ഷൻ ഹെഡിംഗ് ആയാലും, ഇൻസ്ട്രക്ഷൻ ബോക്സായാലും, എംബഡഡ് വീഡിയോ ആയാലും, ഇഷ്ടാനുസൃത HTML ഉള്ളടക്കം നിങ്ങളുടെ ഫോമുകളെ കൂടുതൽ ഫലപ്രദവും ഉപയോക്തൃ സൗഹൃദവുമാക്കുന്നു.

ഓട്ടോ ഫോം ബിൽഡർ നിങ്ങളുടെ ഫോം ഫീൽഡുകൾക്കിടയിൽ ഏതെങ്കിലും HTML ഉള്ളടക്കം ചേർക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന HTML ബ്ലോക്ക് ഫീൽഡ് തരം ഉൾപ്പെടുന്നു. സമർപ്പണ പ്രക്രിയയിലൂടെ ഉപയോക്താക്കളെ നയിക്കുന്ന പ്രൊഫഷണൽ, വിവരദായക ഫോമുകൾ സൃഷ്ടിക്കുക.

നിങ്ങളുടെ ഫോമുകൾ മെച്ചപ്പെടുത്താൻ തയ്യാറാണോ? ഓട്ടോ ഫോം ബിൽഡർ ഡൗൺലോഡ് ചെയ്യുക ഇന്നുതന്നെ ഇഷ്ടാനുസൃത ഉള്ളടക്കം ചേർക്കാൻ തുടങ്ങൂ.