Hướng dẫn chèn mũi tên vào nút gửi cho contact 7

admin29/12/2023 782

Bạn đang dùng wordpress và plugin gửi form là contact 7 nhưng khi dùng shortcode [submit “Gửi đi”] thì không thể chèn được các icon mũi tên hay chỉnh sửa gì nó vì khi biên dịch ra thì nó là dạng input submit. Giờ bạn muốn chuyển nó thành nút button có thể chèn các icon vào. Bài viết này sẽ hướng dẫn bạn cách làm nó.

Hướng dẫn chi tiết cách chèn mũi tên vào nút gửi ở contact 7

Trong môi trường soạn thảo của contact 7 thì nó cho phép chèn shortcode và html, chính vì thế chúng ta đừng dùng shortcode [submit “Gửi đi”]  nữa mà chèn trực tiếp nút button dạng html vào như code dưới:

<button type="submit" class="btn btn-large btn-primary wpcf7-form-control wpcf7-submit has-spinner nutgui"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
<path d="M8.16675 19.8333L19.8334 8.16663M19.8334 8.16663H8.16675M19.8334 8.16663V19.8333" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg></button>

Nếu để ý bạn sẽ thấy trong button mình đã chèn class: wpcf7-form-control wpcf7-submit has-spinner đây chính là bí mật để đảm bảo chạy được các ajax check giống như khi mình dùng dạng type bằng input mặc định mà contact 7 sinh ra.

Nếu bạn dùng các icon của font awesome thì bạn cứ chèn nó trực tiếp vào trong <button></button>

Nếu bạn muốn có 1 form nhận email dạng inline như hình mình gửi ở trên thì bạn có thể copy đoạn code sau dán vào contact 7

<div class="nhantin">
[email* email placeholder "Nhập email *"]
<button type="submit" class="btn btn-large btn-primary wpcf7-form-control wpcf7-submit has-spinner nutgui"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
<path d="M8.16675 19.8333L19.8334 8.16663M19.8334 8.16663H8.16675M19.8334 8.16663V19.8333" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg></button>
</div>

 

Sau đó css thì bạn copy đoạn này chèn vào:

.nhantin { position: relative; }.nutgui { position: absolute; top: 15px; right: 0px; margin-right: 0px!important; }.nhantin input[type="email"] { background: transparent!important; width: 100%!important; margin-right: 0px; padding-right: 0px; height: 64px; border-radius: 100px; border: 1px solid #F5F5F5; color: #fff; }

 
Chỉ cần làm như trên là bạn đã có thể chèn mũi tên hay các icon tùy thích vào nút gửi của plugin contact 7 rồi nhé!

Click vào Comment nhanh ở dưới để chia sẻ suy nghĩ của Bạn.
Cảm ơn bạn đã chia sẻ contact 7 quá chi tiếtTôi đã làm theo hướng dẫn contact 7 quá chi tiếtHướng dẫn chèn mũi tên vào nút contact Thật là tuyệt Tôi đã làm theo hướng dẫn chèn mũi tên vào nút contact Thật là tuyệt
Hỏi đáp

Bài viết mới nhất
admin05/05/2024 133
admin05/05/2024 85
admin30/04/2024 126
admin26/03/2024 201
admin09/03/2024 569
admin20/02/2024 267
admin19/02/2024 657
admin18/02/2024 570
Chia sẻ mới nhất
admin09/03/2024 569
admin20/02/2024 267
admin19/02/2024 657
admin18/02/2024 570
admin01/02/2024 333
admin31/01/2024 275
admin21/01/2024 278
admin21/01/2024 333
admin18/01/2024 330
admin16/01/2024 270