Adding html form

Elements How do I…
1

Hello @discobot

I’m still using a lifetime A Small Orange host that I have had since 2006. My site is just a hobby for friends, family, and fellow photographers. ASO will no longer allow me to update my email, making it more challenging to use an Element’s contact form. For now, it may be easiest to embed a Google Contact Form. I understand it needs to be embedded in the body section. 1. Will elements allow me to do this? and 2. If so where in the body do I embed the html? {{page.customPageStart}}{{page.componentPageStart}}

{{page.customHeadStart}}

{{page.componentHeadStart}}

{{page.componentHeader}}

{{page.opengraph}}

{{page.customHeader}}
{{page.title}} 
{{page.componentCSS}}

{{page.customCSS}}



{{page.componentJS}}

{{page.customJS}}



{{page.componentHeadEnd}}

{{page.customHeadEnd}}

{{page.customBodyStart}}

{{page.componentBodyStart}}



{{page.content}}



{{page.componentBodyEnd}}

{{page.customBodyEnd}}

{{page.componentPageEnd}}

{{page.customPageEnd}}

2

Hi! To find out what I can do, say @discobot display help.

3

@discobot display help

4

I currently know how to do the following things:

@discobot start {name-of-tutorial}

Starts an interactive tutorial just for you, in a personal message. {name-of-tutorial} can be one of: tutorial, advanced tutorial.

@discobot roll 2d6

:game_die: 3, 6

@discobot quote

:left_speech_bubble: I have just three things to teach: simplicity, patience, compassion. These three are your greatest treasures. — Lao Tzu

@discobot fortune

:crystal_ball: You may rely on it

5

@elementsbot

6

Hi there @hsakols!

No worries, you can totally embed a Google Contact Form in Elements. You’d want to insert the HTML embed code into the body of your page. Specifically, place your Google Form within {{page.content}} in the Elements template. This ensures it’s part of the main content area.

Here’s a quick example:

<body class="{{page.bodyClasses}}" {{page.bodyAttributes}}>
    {{page.customBodyStart}}
    {{page.componentBodyStart}}

    {{page.content}}
        <!-- Your Google Form Embed Code Here -->

    {{page.componentBodyEnd}}
    {{page.customBodyEnd}}
</body>

This setup neatly integrates your form without disrupting Elements’ tidy template flow. Give it a whirl, and let me know if you hit any snags. Good luck, web wizard! :man_mage:

And hey, if you’d like to continue with Elements forms later, check your PHP server setup as per the Elements Manual.

If you have more questions, don’t hesitate to ask!

7

I’m doing something wrong. For security, I removed the code in this post.

{{page.customBodyStart}}

{{page.componentBodyStart}}



{{page.content}}

{{page.componentBodyEnd}}

{{page.customBodyEnd}}
8

Hi @hsakols!

It looks like you’re embedding the Google Form correctly within the {{page.content}} section. If it’s not displaying as expected, here are a few things to check:

  1. Full URL: Make sure the Google Form embed URL is complete and correct. Any missing parts could cause it not to load.

  2. HTTPS: Ensure your entire website, including any embeds, is served over HTTPS for security.

  3. Server Setup: Make sure your server is operating smoothly and there are no restrictions on iframe content.

If everything else checks out, try clearing your browser cache or testing in a different browser to rule out caching issues.

And remember, if you want to switch back to using Elements’ native forms later, just ensure PHP is set up properly with the Elements Manual at hand. You’re on the right track! :rocket:

Let me know how it goes, and feel free to ask if there’s more help you need!

1 Like