[Resolved] Adding a popup modal form to a Hook element

[Andrew]

Hi, I’ve used the Hook element to add some fixed position CTAs sitewide (Call and Email buttons). I’m trying to add a modal popup for the Email button but am running into an error when I try to include a form in the popup, specifically the input submit part.

Am I going about this the right way? Do I need to use a shortcode for the form html?

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

how are you adding the form and does it work from within the normal editor?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Andrew]

Hi David,

I’m adding the form as html into the content area of a hook element.

Appearance > Elements > New Hook

The code I add gets cut as soon as it reaches this line:

`<input style=”background-color:#cf6aa4;” class=”elementor-button” name=”submit” type=”submit” value=”Request a quote ” />

It also breaks the Edit Hook element page layout as well.

The form code I’m adding works fine in a custom html widget in the sidebar. e.g. https://www.healthy-weight.co.uk/gastric-band/

Thanks,

Andrew

[David]

Is the HTML in the Hook identical to that in the widget? Just want to make sure there isn’t any errors in the markup. Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Andrew]

Hi, yes, same code.

[David]

Could you share the HTML so i can do some tests?
When adding code you need to highlight it and use the Code button before submitting.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Andrew]

Thanks David,

Code removed

And now I’ve separated the following Javascript into a separate hook.

Code removed

[Andrew]

I thought the offending line was the submit input line but it appears to be the closing textarea, presumably because the area I’m entering the code into is also a textarea.

Publishing the following hook…

<textarea>This is a textarea</textarea>

…results in the following being saved

<textarea>This is a textarea

Any solution for including a text area in a hook? I’m assuming shortcodes but again, if there’s another way to produce the desired outcome I’m all ears.

[David]

Yes, the textarea is the issue, looking into this, it could be a bug. I’ll update asap.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

I tweaked this in 1.8.0-alpha.2, which we’re hoping to release tomorrow.

If you want to try the fix now, go to wp-content/plugins/gp-premium/elements/class-metabox.php and find this line:

<textarea id="generate-element-content" name="_generate_element_content"><?php echo get_post_meta( get_the_ID(), '_generate_element_content', true ); ?></textarea>

And replace it with this:

<textarea id="generate-element-content" name="_generate_element_content"><?php echo esc_textarea( get_post_meta( get_the_ID(), '_generate_element_content', true ) ); ?></textarea>

Let me know if that fixes it for you or not 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Andrew]

Hi Tom,

That has indeed fixed it. Thanks very much 🙂

Andrew

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michael Loguidice]

I am also trying to add a pop-up to my site… just wondering if this is done in Elements – header (type)?

the instructions from Mailchimp said: “Paste the code into your website’s HTML just before the closing < / head > tag.”

Thank you!

[David]

Hi there,

you would use the Hook Element to add the code. And select the WP_Head hook from the list.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts