topic Re: Using forms in a custom module in CMS Development

Using forms in a custom module

pogacem — Wed, 18 Jan 2023 16:26:41 GMT

Hello, I'm working on a custom module where I'd like to reuse an existing form. The form is already defined and used in multiple places on my website (opens in an overlay when pressing a specific button), but I want to add it to <a>Click here to register</a> link in a custom module. I successfully added the form to the module, it's visible in the fields list, but I'm not able to figure out how to open the overlay with a simple text link.

Re: Using forms in a custom module

Jaycee_Lewis — Thu, 19 Jan 2023 16:34:01 GMT

Hi, @pogacem 👋 Thanks for reaching out. Can you provide any additional details? Giving the community more information on — code examples, screenshots, more information on how your overlay currently works, etc.

We can tag in some of our community members such as @Jnix284 @piersg, and providing them more context is always helpful.

Best,

Jaycee

Re: Using forms in a custom module

pogacem — Thu, 19 Jan 2023 16:50:16 GMT

Here is the current version that has almost everything but the link: https://22709867.hs-sites.com/fitpredictor

The form is invoked by the [REQUEST A DEMO] buttons on the page - this is strictly no-code.

The part of the page that contains the custom module is https://22709867.hs-sites.com/fitpredictor#try - here I want to add a link - See the example text "Request a demo now!"

The code is very simple:

 <p><a id="request_demo"><b>Request a demo now!</b></a></p>

I was able to add the existing form to the custom module:

But I don't know how to display it in the same way as the buttons do, when I'm clicking on the simple link (I don't want to use a button here).

Re: Using forms in a custom module

pogacem — Thu, 19 Jan 2023 16:54:16 GMT

Hey @Jaycee_Lewis, thanks for noticing my cry for help. I've added some context, let me know if more is needed.

Re: Using forms in a custom module

Jnix284 — Thu, 19 Jan 2023 17:37:10 GMT

Hi @pogacem , this will be beyond my expertise to help isolate the specific issue with the code, but hopefully I can help point the conversation in the right direction to see if there's someone else @Jaycee_Lewis can refer.

You have the button at the top working, and then you have the text link further down on the same page that's not working - in looking at the code, my guess is that the JS for the first is interfering with the functionality of the second.

I would recommend removing the first button from the page to verify that the second module link works independently. If it does, then your answer lies in the JS. If it doesn't, then we've isolated it to the module configuration.

Re: Using forms in a custom module

Jaycee_Lewis — Thu, 19 Jan 2023 17:40:59 GMT

Hey, @Jnix284 👋 Thanks for taking a look and nudging us further down the path. Hey, @Anton do you have any insight here? Thank you!

Re: Using forms in a custom module

pogacem — Mon, 23 Jan 2023 16:31:44 GMT

Hey @Jnix284, I'm 100% sure the js code is incorrect. I've added this form to a div, but I am stuck on how to invoke that form overlay. Do you maybe have an example where you're reusing such a form?

Here is my code for the div that contains the form:

 <div id="form_wrap" class="form_wrap">
{% form
form_to_use="{{ module.request_a_demo_form.form_id }}"
response_response_type="{{ module.request_a_demo_form.response_type }}"
response_message="{{ module.request_a_demo_form.message }}"
response_redirect_id="{{ module.request_a_demo_form.redirect_id }}"
response_redirect_url="{{module.request_a_demo_form.redirect_url}}"
gotowebinar_webinar_key="{{ module.request_a_demo_form.gotowebinar_webinar_key }}"
%}
</div>

Re: Using forms in a custom module

Jnix284 — Mon, 23 Jan 2023 16:48:39 GMT

Hi @pogacem no, unfortunately I don't have an example similar to this.

Hopefully @Anton can shed some light on what might be the issue with the code.

Re: Using forms in a custom module

Anton — Mon, 23 Jan 2023 18:10:52 GMT

Hi @pogacem,

Seems like you're looking for a so-called modal-box.

There are a ton of free available snippets out there. If you use e.g. bootstrap or some other framework like tailwind there are already prebuild classes and functions included.

But no worries - if you don't know if you're using one or don't want to use a heavy framework just for just one simple modal-box you can either create a plain CSS one (not recommended since it can be A LOT of work and there's no real benefit), create a jQuery modalbox since your theme will - most likely have jQuery or simply create a plain JS version.

Here's a code you can use/modify for a jQuery modal box.

Or simply copy/paste the following code and modify it to your needs

HTML+Hubl part:

{# start trigger button #} <a href="#" class="modal-trigger" data-modal="modal-{{name|md5}}">{{ module.modal_open_text }}</a>{# adding a hubl as data-modal allows you to use this module several times on one page #} {# end trigger button #} <div class="modal" id="modal-{{name|md5}}"> {# use the 'data-modal' hubl as id to link the button to the modal box #} <div class="modal-sandbox"></div> <div class="modal-box"> {# start header & headline #} {% unless module.modal_headline == "" %}{# by adding this unless-statement the header and headline will only be shown if there's a headline #} <div class="modal-header"> <div class="close-modal">✖</div> <h3>{{ module.modal_headline }}</h3> </div> {% endunless %} {# end header & headline #} {# start modal body/form #} <div class="modal-body"> {% form form_to_use="{{ module.form_select.form_id }}" response_response_type="{{ module.form_select.response_type }}" response_message="{{ module.form_select.message }}" response_redirect_id="{{ module.form_select.redirect_id }}" response_redirect_url="{{module.form_select.redirect_url}}" gotowebinar_webinar_key="{{ module.form_select.gotowebinar_webinar_key }}" %} </div> </div> </div> {# start jQuery; you can paste the 'script' part into the JS part of the module #} {% require_js %} <script> $(".modal-trigger").click(function(e){ e.preventDefault(); dataModal = $(this).attr("data-modal"); $("#" + dataModal).css({"display":"block"}); // $("body").css({"overflow-y": "hidden"}); //Prevent double scrollbar. }); $(".close-modal, .modal-sandbox").click(function(){ $(".modal").css({"display":"none"}); // $("body").css({"overflow-y": "auto"}); //Prevent double scrollbar. }); </script> {% end_require_js %} {# end jQuery #}

CSS(can be placed in your main CSS file):

.modal, .modal-box { z-index: 900; } .modal-sandbox { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: transparent; } .modal { display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgb(0,0,0); background: rgba(0,0,0,.8); overflow: auto; } .modal-box { position: relative; width: 80%; max-width: 920px; margin: 100px auto; animation-name: modalbox; animation-duration: .4s; animation-timing-function: cubic-bezier(0,0,.3,1.6); } .modal-header { padding: 20px 40px; background: #546E7A; color: #ffffff; } .modal-body { background: #ECEFF1; padding: 60px 40px; } /* Close Button */ .close-modal { text-align: right; cursor: pointer; } /* Animation */ @-webkit-keyframes modalbox { 0% { top: -250px; opacity: 0; } 100% { top: 0; opacity: 1; } } @keyframes modalbox { 0% { top: -250px; opacity: 0; } 100% { top: 0; opacity: 1; } } /* Aditional Styles */ .modal-trigger, button.modal-trigger { padding: 20px 40px; background: transparent; color: #ffffff; border: 1px solid #ffffff; text-decoration: none; } .modal-trigger { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: ease .2s; } button { border: 1px solid #333333; outline: none; color: #333333; } .modal-trigger:hover { padding: 20px 60px; }

JS(optional if you're using just the HTML+Hubl version from above):

$(".modal-trigger").click(function(e){ e.preventDefault(); dataModal = $(this).attr("data-modal"); $("#" + dataModal).css({"display":"block"}); // $("body").css({"overflow-y": "hidden"}); //Prevent double scrollbar. }); $(".close-modal, .modal-sandbox").click(function(){ $(".modal").css({"display":"none"}); // $("body").css({"overflow-y": "auto"}); //Prevent double scrollbar. });

Thank you @Jnix284 for the push.

Let me know if this helps,

best,

Anton

Re: Using forms in a custom module

Jaycee_Lewis — Mon, 23 Jan 2023 19:05:49 GMT

Thanks, @Anton and @Jnix284 🙌

Re: Using forms in a custom module

Jnix284 — Mon, 23 Jan 2023 19:46:35 GMT

You're welcome @Jaycee_Lewis , always happy to help, although @Anton did all the hard work! 🙌

Re: Using forms in a custom module

pogacem — Tue, 24 Jan 2023 17:44:56 GMT

Thanks so much, Anton, now it's clear (and it is working)!. 🙏