How to create custom submit buttons for your Gravity Forms and place them anywhere 🎉
There are plenty of reasons why you might want to create your own custom Gravity Forms submit buttons – from simply wanting more control over style and graphics to being able to disconnect your submit button from the the form container itself and place that button anywhere on your page.
This is especially useful when creating mini-applications using Gravity Forms (as you know, I’m a huge fan of this). So in this tutorial we’ll look at an incredibly simple way to create your own Gravity Forms submit buttons (using your favorite page builder) all based on tweaking some official Gravity Forms documentation.
✅ Step 1: 02:35 | Create a custom attribute for your button adding an onclick function.
✅ Step 2: 04:45 | Hide the default button. We don’t want to use display: none as this will not work. The default submit button needs to remain active and visible so that our new button can simulate a click.
✅ Step 3 (Optional): 06:20 | If your form redirects to a new page such as a thank you page or something similar than you don’t need to worry about step 3 as a whole new page is going to lead. That said, If you are using ajax submit, you’ll want to hide your custom button when the ajax confirmation message is displayed on screen. To do this, we’ll use a small javascript snippet that simply looks for the ajax confirmation class and then targets a custom class with display: none.
🔗 BOWP Resources: https://buildingonwp.com/how-to-create-custom-submit-buttons-for-your-gravity-forms-and-place-them-anywhere/
🔗 GF Docs: https://docs.gravityforms.com/adding-an-inline-submit-button-in-gravity-forms-2-5/#h-steps
Видео How to create custom submit buttons for your Gravity Forms and place them anywhere 🎉 канала BuildingOnWordPress (with Josh Donnelly)
This is especially useful when creating mini-applications using Gravity Forms (as you know, I’m a huge fan of this). So in this tutorial we’ll look at an incredibly simple way to create your own Gravity Forms submit buttons (using your favorite page builder) all based on tweaking some official Gravity Forms documentation.
✅ Step 1: 02:35 | Create a custom attribute for your button adding an onclick function.
✅ Step 2: 04:45 | Hide the default button. We don’t want to use display: none as this will not work. The default submit button needs to remain active and visible so that our new button can simulate a click.
✅ Step 3 (Optional): 06:20 | If your form redirects to a new page such as a thank you page or something similar than you don’t need to worry about step 3 as a whole new page is going to lead. That said, If you are using ajax submit, you’ll want to hide your custom button when the ajax confirmation message is displayed on screen. To do this, we’ll use a small javascript snippet that simply looks for the ajax confirmation class and then targets a custom class with display: none.
🔗 BOWP Resources: https://buildingonwp.com/how-to-create-custom-submit-buttons-for-your-gravity-forms-and-place-them-anywhere/
🔗 GF Docs: https://docs.gravityforms.com/adding-an-inline-submit-button-in-gravity-forms-2-5/#h-steps
Видео How to create custom submit buttons for your Gravity Forms and place them anywhere 🎉 канала BuildingOnWordPress (with Josh Donnelly)
Комментарии отсутствуют
Информация о видео
26 октября 2023 г. 20:57:21
00:07:34
Другие видео канала