ਵਰਡਪ੍ਰੈਸ ਫਾਰਮਾਂ ਵਿੱਚ ਕਸਟਮ HTML ਸਮੱਗਰੀ ਕਿਵੇਂ ਸ਼ਾਮਲ ਕਰੀਏ
ਫਾਰਮ ਸਿਰਫ਼ ਇਨਪੁੱਟ ਖੇਤਰ ਨਹੀਂ ਹੁੰਦੇ। ਕਈ ਵਾਰ ਤੁਹਾਨੂੰ ਕੁਝ ਸਮਝਾਉਣ, ਭਾਗਾਂ ਨੂੰ ਵੰਡਣ, ਇੱਕ ਚਿੱਤਰ ਦਿਖਾਉਣ, ਜਾਂ ਸਵਾਲਾਂ ਵਿਚਕਾਰ ਸੰਦਰਭ ਜੋੜਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਕਸਟਮ HTML ਸਮੱਗਰੀ ਸਥਿਰ ਰੂਪਾਂ ਨੂੰ ਨਿਰਦੇਸ਼ਿਤ ਅਨੁਭਵਾਂ ਵਿੱਚ ਬਦਲ ਦਿੰਦੀ ਹੈ। ਇੱਥੇ ਦੱਸਿਆ ਗਿਆ ਹੈ ਕਿ ਆਪਣੇ ਵਰਡਪ੍ਰੈਸ ਰੂਪਾਂ ਵਿੱਚ ਅਮੀਰ ਸਮੱਗਰੀ ਕਿਵੇਂ ਜੋੜਨੀ ਹੈ।
HTML ਬਲਾਕ ਕੀ ਹੈ?
ਪਰਿਭਾਸ਼ਾ
HTML ਬਲਾਕ ਇੱਕ ਖਾਸ ਫਾਰਮ ਐਲੀਮੈਂਟ ਹੈ ਜੋ ਇਨਪੁਟ ਇਕੱਠੇ ਕੀਤੇ ਬਿਨਾਂ ਸਮੱਗਰੀ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ। ਇਹ ਤੁਹਾਡੇ ਫਾਰਮ ਖੇਤਰਾਂ ਵਿਚਕਾਰ HTML ਨੂੰ ਰੈਂਡਰ ਕਰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਟੈਕਸਟ, ਚਿੱਤਰ, ਵੀਡੀਓ, ਡਿਵਾਈਡਰ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਜੋੜ ਸਕਦੇ ਹੋ।
HTML ਬਲਾਕ ਬਨਾਮ ਨਿਯਮਤ ਖੇਤਰ
| ਨਿਯਮਤ ਖੇਤਰ | HTML ਬਲਾਕ |
|---|---|
| ਉਪਭੋਗਤਾ ਇਨਪੁੱਟ ਇਕੱਠਾ ਕਰੋ | ਸਿਰਫ਼ ਸਮੱਗਰੀ ਦਿਖਾਓ |
| ਡਾਟਾ ਸਪੁਰਦ ਕਰੋ | ਕੋਈ ਡਾਟਾ ਸਪੁਰਦ ਨਹੀਂ ਕੀਤਾ ਗਿਆ |
| ਪਹਿਲਾਂ ਤੋਂ ਪਰਿਭਾਸ਼ਿਤ ਕਿਸਮਾਂ | ਕੋਈ ਵੀ HTML ਸਮੱਗਰੀ |
| ਮਿਆਰੀ ਸਟਾਈਲਿੰਗ | ਕਸਟਮ ਸਟਾਈਲਿੰਗ ਸੰਭਵ ਹੈ |
HTML ਬਲਾਕਾਂ ਦੀ ਵਰਤੋਂ ਕਿਉਂ ਕਰੀਏ?
1. ਹਦਾਇਤਾਂ ਅਤੇ ਮਾਰਗਦਰਸ਼ਨ
ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਇਹ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰੋ ਕਿ ਕੀ ਕਰਨਾ ਹੈ:
- ਗੁੰਝਲਦਾਰ ਸਵਾਲਾਂ ਨੂੰ ਸਮਝਾਓ
- ਸੰਦਰਭ ਪ੍ਰਦਾਨ ਕਰੋ
- ਲੋੜਾਂ ਦੀ ਸੂਚੀ ਬਣਾਓ
- ਭਾਗਾਂ ਰਾਹੀਂ ਮਾਰਗਦਰਸ਼ਨ ਕਰੋ
2. ਵਿਜ਼ੂਅਲ ਸੰਗਠਨ
ਲੰਬੇ ਰੂਪਾਂ ਨੂੰ ਤੋੜੋ:
- ਭਾਗ ਸਿਰਲੇਖ
- ਖਿਤਿਜੀ ਡਿਵਾਈਡਰ
- ਵਿਜ਼ੂਅਲ ਸੈਪਰੇਟਰ
- ਸਮੂਹਬੱਧ ਸਮੱਗਰੀ
3. ਰਿਚ ਮੀਡੀਆ
ਵਿਜ਼ੂਅਲ ਐਲੀਮੈਂਟਸ ਸ਼ਾਮਲ ਕਰੋ:
- ਚਿੱਤਰ ਅਤੇ ਆਈਕਨ
- ਏਮਬੇਡ ਕੀਤੇ ਵੀਡੀਓਜ਼
- Infographics
- ਡਾਇਗਰਾਮ
4. ਕਾਨੂੰਨੀ ਅਤੇ ਪਾਲਣਾ
ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੋ:
- ਨਿਯਮ ਅਤੇ ਸ਼ਰਤਾਂ ਦਾ ਟੈਕਸਟ
- ਗੋਪਨੀਯਤਾ ਨੋਟਿਸ
- ਬੇਦਾਅਵਾ
- ਲੋੜੀਂਦੇ ਖੁਲਾਸੇ
5. ਬ੍ਰਾਂਡਿੰਗ
ਆਪਣੇ ਬ੍ਰਾਂਡ ਨੂੰ ਮਜ਼ਬੂਤ ਕਰੋ:
- ਲੋਗੋ
- ਬ੍ਰਾਂਡ ਦੇ ਰੰਗ
- ਵਿਉਂਤਬੱਧ ਸਟਾਈਲਿੰਗ
- ਇਕਸਾਰ ਦਿੱਖ
ਇੱਕ HTML ਬਲਾਕ ਜੋੜਨਾ
ਕਦਮ 1: ਖੇਤਰ ਸ਼ਾਮਲ ਕਰੋ
- ਆਪਣਾ ਫਾਰਮ ਇਸ ਵਿੱਚ ਖੋਲ੍ਹੋ ਏ.ਐਫ.ਬੀ.
- ਲੱਭੋ HTML ਬਲਾਕ ਖੇਤਰ ਸੂਚੀ ਵਿੱਚ
- ਇਸਨੂੰ ਆਪਣੇ ਫਾਰਮ ਵਿੱਚ ਲੋੜੀਂਦੀ ਸਥਿਤੀ ਤੇ ਖਿੱਚੋ।
ਕਦਮ 2: ਆਪਣੀ ਸਮੱਗਰੀ ਸ਼ਾਮਲ ਕਰੋ
- HTML ਬਲਾਕ ਨੂੰ ਚੁਣਨ ਲਈ ਉਸ 'ਤੇ ਕਲਿੱਕ ਕਰੋ।
- ਸੈਟਿੰਗਾਂ ਪੈਨਲ ਖੋਲ੍ਹੋ
- ਆਪਣੀ HTML ਸਮੱਗਰੀ ਦਰਜ ਕਰੋ
- ਦਿੱਖ ਦੀ ਪੁਸ਼ਟੀ ਕਰਨ ਲਈ ਪੂਰਵਦਰਸ਼ਨ ਕਰੋ
ਕਦਮ 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; ਟੈਕਸਟ ਅਲਾਈਨ: ਟੈਕਸਟ-ਅਲਾਈਨ: ਸੈਂਟਰ;
ਸਟਾਈਲਡ ਬਾਕਸ ਬਣਾਉਣਾ
ਜਾਣਕਾਰੀ ਬਾਕਸ (ਨੀਲਾ):
ℹ️ ਜਾਣਕਾਰੀ ਸੁਨੇਹਾ ਇੱਥੇ
ਸਫਲਤਾ ਡੱਬਾ (ਹਰਾ):
✓ ਸਫਲਤਾ ਦਾ ਸੁਨੇਹਾ ਇੱਥੇ
ਚੇਤਾਵਨੀ ਡੱਬਾ (ਪੀਲਾ):
⚠️ ਚੇਤਾਵਨੀ ਸੁਨੇਹਾ ਇੱਥੇ ਹੈ
ਗਲਤੀ ਬਾਕਸ (ਲਾਲ):
✕ ਇੱਥੇ ਗਲਤੀ ਜਾਂ ਮਹੱਤਵਪੂਰਨ ਚੇਤਾਵਨੀ ਹੈ
ਜਵਾਬਦੇਹ ਡਿਜ਼ਾਈਨ ਸੁਝਾਅ
ਚਿੱਤਰ
ਰਿਸਪਾਂਸਿਵ ਤਸਵੀਰਾਂ ਲਈ ਹਮੇਸ਼ਾਂ max-width ਦੀ ਵਰਤੋਂ ਕਰੋ:
ਵੀਡੀਓ
ਏਮਬੈਡਡ ਵੀਡੀਓਜ਼ ਲਈ ਰਿਸਪਾਂਸਿਵ ਰੈਪਰ ਦੀ ਵਰਤੋਂ ਕਰੋ:
ਟੈਕਸਟ ਪੜ੍ਹਨਯੋਗਤਾ
- ਸੰਬੰਧਿਤ ਫੌਂਟ ਆਕਾਰ (em, rem) ਵਰਤੋ
- ਲਾਈਨ ਦੀ ਲੰਬਾਈ ਪੜ੍ਹਨਯੋਗ ਰੱਖੋ
- ਮੋਬਾਈਲ 'ਤੇ ਢੁਕਵੀਂ ਪੈਡਿੰਗ
ਵਧੀਆ ਪ੍ਰੈਕਟਿਸ
1. ਇਸਨੂੰ ਸੰਖੇਪ ਰੱਖੋ
- ਛੋਟਾ, ਸਕੈਨ ਕਰਨ ਯੋਗ ਟੈਕਸਟ
- ਪੈਰਿਆਂ ਉੱਤੇ ਬੁਲੇਟ ਪੁਆਇੰਟ
- ਸਿਰਫ਼ ਜ਼ਰੂਰੀ ਜਾਣਕਾਰੀ
2. ਵਿਜ਼ੂਅਲ ਲੜੀ
- ਸਿਰਲੇਖ ਸਾਫ਼ ਕਰੋ
- ਇਕਸਾਰ ਸਟਾਈਲਿੰਗ
- ਲਾਜ਼ੀਕਲ ਵਹਾਅ
3. ਪਹੁੰਚਯੋਗਤਾ
- ਚਿੱਤਰਾਂ ਲਈ ਵਿਕਲਪਿਕ ਟੈਕਸਟ
- ਕਾਫ਼ੀ ਰੰਗ ਵਿਪਰੀਤ
- ਸਿਮੈਂਟਿਕ HTML (h2, h3, p, ul)
- ਅਰਥ ਲਈ ਸਿਰਫ਼ ਰੰਗ 'ਤੇ ਨਿਰਭਰ ਨਾ ਕਰੋ
4. ਇਸ ਨੂੰ ਜ਼ਿਆਦਾ ਨਾ ਕਰੋ
- ਬਹੁਤ ਜ਼ਿਆਦਾ ਸਮੱਗਰੀ ਹਾਵੀ ਕਰ ਦਿੰਦੀ ਹੈ
- ਇਨਪੁੱਟ ਖੇਤਰਾਂ ਨਾਲ ਸਮੱਗਰੀ ਨੂੰ ਸੰਤੁਲਿਤ ਕਰੋ
- ਹਰੇਕ HTML ਬਲਾਕ ਲਈ ਉਦੇਸ਼
5. ਚੰਗੀ ਤਰ੍ਹਾਂ ਜਾਂਚ ਕਰੋ
- ਡੈਸਕਟਾਪ ਅਤੇ ਮੋਬਾਈਲ 'ਤੇ ਪੂਰਵਦਰਸ਼ਨ
- ਸਾਰੇ ਲਿੰਕ ਕੰਮ ਕਰਦੇ ਹਨ ਦੀ ਜਾਂਚ ਕਰੋ।
- ਚਿੱਤਰਾਂ ਦੇ ਲੋਡ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ
- ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਟੈਸਟ ਕਰੋ
ਐਡਵਾਂਸਡ HTML ਬਲਾਕ ਵਿਚਾਰ
ਪ੍ਰਗਤੀ ਸੂਚਕ
1 2 3 3 ਵਿੱਚੋਂ ਕਦਮ 2: ਪ੍ਰੋਜੈਕਟ ਵੇਰਵੇ
ਦੋ-ਕਾਲਮ ਲੇਆਉਟ
ਵਿਕਲਪ ਏ ਵਿਕਲਪ A ਦਾ ਵੇਰਵਾ... ਵਿਕਲਪ ਬੀ ਵਿਕਲਪ B ਦਾ ਵੇਰਵਾ...
ਸਮੇਟਣਯੋਗ ਭਾਗ (ਵੇਰਵੇ/ਸਾਰਾਂਸ਼)
ਪੂਰੀਆਂ ਸ਼ਰਤਾਂ ਪੜ੍ਹਨ ਲਈ ਕਲਿੱਕ ਕਰੋ ਪੂਰੇ ਨਿਯਮ ਅਤੇ ਸ਼ਰਤਾਂ ਦਾ ਟੈਕਸਟ ਇੱਥੇ...
ਆਈਕਨ ਸੂਚੀ
✓ $50 ਤੋਂ ਵੱਧ ਦੇ ਆਰਡਰਾਂ 'ਤੇ ਮੁਫ਼ਤ ਸ਼ਿਪਿੰਗ ✓ 30-ਦਿਨਾਂ ਦੀ ਪੈਸੇ ਵਾਪਸ ਕਰਨ ਦੀ ਗਰੰਟੀ ✓ 24/7 ਗਾਹਕ ਸਹਾਇਤਾ
ਉਲਟੀ ਗਿਣਤੀ/ਜ਼ਰੂਰੀ
🔥 ਸੀਮਤ ਸਮੇਂ ਲਈ ਪੇਸ਼ਕਸ਼ - ਯੋਗਤਾ ਪੂਰੀ ਕਰਨ ਲਈ ਸ਼ੁੱਕਰਵਾਰ ਤੱਕ ਜਮ੍ਹਾਂ ਕਰੋ!
ਸੁਰੱਖਿਆ ਬਾਰੇ ਵਿਚਾਰ
ਕੀ ਸੁਰੱਖਿਅਤ ਹੈ
- ਸਟੈਂਡਰਡ HTML ਟੈਗ (p, div, h1-h6, ul, li, ਆਦਿ)
- ਇਨਲਾਈਨ ਸਟਾਈਲ
- ਭਰੋਸੇਯੋਗ ਸਰੋਤਾਂ ਤੋਂ ਤਸਵੀਰਾਂ
- ਪ੍ਰਮੁੱਖ ਪਲੇਟਫਾਰਮਾਂ ਤੋਂ ਏਮਬੈਡ ਕੀਤੇ ਵੀਡੀਓ
ਕੀ ਬਚਣਾ ਹੈ
- HTML ਬਲਾਕਾਂ ਵਿੱਚ JavaScript (ਛੱਡਿਆ ਜਾ ਸਕਦਾ ਹੈ)
- ਬਾਹਰੀ ਸਕ੍ਰਿਪਟਾਂ
- ਗੈਰ-ਭਰੋਸੇਯੋਗ iframe ਸਰੋਤ
- HTML ਬਲਾਕਾਂ ਦੇ ਅੰਦਰ ਫਾਰਮ ਐਲੀਮੈਂਟਸ
ਸਕ੍ਰਿਪਟ ਪਾਬੰਦੀਆਂ 'ਤੇ ਨੋਟ
ਜ਼ਿਆਦਾਤਰ ਫਾਰਮ ਬਿਲਡਰ XSS ਹਮਲਿਆਂ ਨੂੰ ਰੋਕਣ ਲਈ HTML ਨੂੰ ਸੈਨੇਟਾਈਜ਼ ਕਰਦੇ ਹਨ। ਸੁਰੱਖਿਆ ਲਈ JavaScript ਅਤੇ ਕੁਝ ਖਾਸ ਟੈਗ ਆਪਣੇ ਆਪ ਹਟਾਏ ਜਾ ਸਕਦੇ ਹਨ।
ਸਮੱਸਿਆ ਨਿਵਾਰਣ
HTML ਰੈਂਡਰਿੰਗ ਨਹੀਂ ਹੋ ਰਿਹਾ
- ਸਿੰਟੈਕਸ ਗਲਤੀਆਂ ਦੀ ਜਾਂਚ ਕਰੋ
- ਪੁਸ਼ਟੀ ਕਰੋ ਕਿ ਟੈਗ ਸਹੀ ਢੰਗ ਨਾਲ ਬੰਦ ਹਨ
- ਕੁਝ ਟੈਗ ਪ੍ਰਤਿਬੰਧਿਤ ਹੋ ਸਕਦੇ ਹਨ
ਸਟਾਈਲਿੰਗ ਲਾਗੂ ਨਹੀਂ ਹੈ
- ਇਨਲਾਈਨ ਸਟਾਈਲ ਸਿੰਟੈਕਸ ਦੀ ਜਾਂਚ ਕਰੋ
- ਥੀਮ CSS ਓਵਰਰਾਈਡ ਹੋ ਸਕਦਾ ਹੈ
- ਹੋਰ ਖਾਸ ਸਟਾਈਲ ਜਾਂ !ਮਹੱਤਵਪੂਰਨ ਵਰਤੋ
ਚਿੱਤਰ ਨਹੀਂ ਦਿਖਾਏ ਜਾ ਰਹੇ
- ਪੁਸ਼ਟੀ ਕਰੋ ਕਿ ਚਿੱਤਰ URL ਸਹੀ ਹੈ
- ਚਿੱਤਰ ਇਜਾਜ਼ਤਾਂ ਦੀ ਜਾਂਚ ਕਰੋ
- ਪੂਰਾ URL ਵਰਤੋ (https://…)
ਮੋਬਾਈਲ 'ਤੇ ਲੇਆਉਟ ਬ੍ਰੇਕਿੰਗ
- ਚਿੱਤਰਾਂ ਵਿੱਚ ਵੱਧ ਤੋਂ ਵੱਧ ਚੌੜਾਈ: 100% ਸ਼ਾਮਲ ਕਰੋ
- ਲਚਕਦਾਰ ਲੇਆਉਟ (ਫਲੈਕਸਬਾਕਸ) ਦੀ ਵਰਤੋਂ ਕਰੋ
- ਅਸਲ ਮੋਬਾਈਲ ਡਿਵਾਈਸ 'ਤੇ ਟੈਸਟ ਕਰੋ
ਸੰਖੇਪ
ਫਾਰਮਾਂ ਵਿੱਚ ਕਸਟਮ HTML ਸਮੱਗਰੀ ਜੋੜਨਾ:
- HTML ਬਲਾਕ ਸ਼ਾਮਲ ਕਰੋ - ਆਪਣੇ ਫਾਰਮ 'ਤੇ ਖਿੱਚੋ
- ਸਮੱਗਰੀ ਦਰਜ ਕਰੋ - ਸੈਟਿੰਗ ਪੈਨਲ ਵਿੱਚ HTML
- ਢੁਕਵੀਂ ਸਥਿਤੀ ਵਿੱਚ ਰੱਖੋ - ਸੰਬੰਧਿਤ ਖੇਤਰਾਂ ਵਿਚਕਾਰ
- ਲੋੜ ਅਨੁਸਾਰ ਸਟਾਈਲ ਕਰੋ - ਇਨਲਾਈਨ ਸਟਾਈਲ ਜਾਂ ਕਲਾਸਾਂ
- ਪਹੁੰਚਯੋਗ ਰੱਖੋ - ਅਲਟ ਟੈਕਸਟ, ਕੰਟ੍ਰਾਸਟ, ਸਿਮੈਂਟਿਕ HTML
- ਜਵਾਬਦੇਹੀ ਨਾਲ ਟੈਸਟ ਕਰੋ - ਡੈਸਕਟਾਪ ਅਤੇ ਮੋਬਾਈਲ
ਸਿੱਟਾ
HTML ਬਲਾਕ ਸਧਾਰਨ ਪ੍ਰਸ਼ਨਾਵਲੀ ਤੋਂ ਫਾਰਮਾਂ ਨੂੰ ਗਾਈਡਡ ਅਨੁਭਵਾਂ ਵਿੱਚ ਬਦਲਦੇ ਹਨ। ਜਿੱਥੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਇਸਦੀ ਲੋੜ ਹੋਵੇ ਉੱਥੇ ਸੰਦਰਭ ਸ਼ਾਮਲ ਕਰੋ, ਲੰਬੇ ਫਾਰਮਾਂ ਨੂੰ ਲਾਜ਼ੀਕਲ ਭਾਗਾਂ ਵਿੱਚ ਵਿਵਸਥਿਤ ਕਰੋ, ਅਤੇ ਸ਼ਾਮਲ ਕਰਨ ਅਤੇ ਜਾਣਕਾਰੀ ਦੇਣ ਲਈ ਰਿਚ ਮੀਡੀਆ ਸ਼ਾਮਲ ਕਰੋ। ਭਾਵੇਂ ਇਹ ਇੱਕ ਸੈਕਸ਼ਨ ਹੈਡਿੰਗ, ਹਦਾਇਤ ਬਾਕਸ, ਜਾਂ ਏਮਬੈਡਡ ਵੀਡੀਓ ਹੋਵੇ, ਕਸਟਮ HTML ਸਮੱਗਰੀ ਤੁਹਾਡੇ ਫਾਰਮਾਂ ਨੂੰ ਵਧੇਰੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਅਤੇ ਉਪਭੋਗਤਾ-ਅਨੁਕੂਲ ਬਣਾਉਂਦੀ ਹੈ।
ਆਟੋ ਫਾਰਮ ਬਿਲਡਰ HTML ਬਲਾਕ ਫੀਲਡ ਕਿਸਮ ਸ਼ਾਮਲ ਹੈ, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਆਪਣੇ ਫਾਰਮ ਫੀਲਡਾਂ ਵਿਚਕਾਰ ਕੋਈ ਵੀ HTML ਸਮੱਗਰੀ ਜੋੜ ਸਕਦੇ ਹੋ। ਪੇਸ਼ੇਵਰ, ਜਾਣਕਾਰੀ ਭਰਪੂਰ ਫਾਰਮ ਬਣਾਓ ਜੋ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਬਮਿਸ਼ਨ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ ਮਾਰਗਦਰਸ਼ਨ ਕਰਦੇ ਹਨ।
ਕੀ ਤੁਸੀਂ ਆਪਣੇ ਫਾਰਮਾਂ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਲਈ ਤਿਆਰ ਹੋ? ਆਟੋ ਫਾਰਮ ਬਿਲਡਰ ਡਾਊਨਲੋਡ ਕਰੋ ਅਤੇ ਅੱਜ ਹੀ ਕਸਟਮ ਸਮੱਗਰੀ ਜੋੜਨਾ ਸ਼ੁਰੂ ਕਰੋ।