Embedded form shows up during editing, but blank on live site

Support
#1

I’ve embedded a form… in fact I tried it a couple different ways, straight text, raw element… in the JS as well. I can now see the code twice on the page while I’m editing, but in the live view, I’ve got nothing. Is this an extension problem?

#2

Hi There,

Thank you for writing in, I actually got the form on my end and a line of JS.


You need to leave your HTML content on the RAW Content element and separate the JavaScript to the <head>. You can use the wp_head function on doing this.

Hope it helps,
Cheers!

#3

Sorry… not sure I understand where to put things or what is. Here is the embed code for the form

<script type='text/javascript' src='https://d1aqhv4sn5kxtx.cloudfront.net/actiontag/at.js' crossorigin='anonymous'></script>
<div class="ngp-form"
    data-form-url="https://actions.everyaction.com/v1/Forms/WoikU21AbE6EYpDr1wRKvQ2"
    data-fastaction-endpoint="https://fastaction.ngpvan.com"
    data-inline-errors="true"
    data-fastaction-nologin="true"
    data-databag="everybody">
</div>

Are you saying that part goes here and part goes elsewhere or to add something different.

Also, I know that text is responsive, but the max font/form size is very large. Is there a way to keep it responsive, but make the max font size smaller?

Thank you!

#4

Hi There,

Yes, that’s what I mean, split your JS and HTML code.

Add this to your child theme’s functions.php file.

function hook_javascript() {  ?>

        <script type='text/javascript' src='https://d1aqhv4sn5kxtx.cloudfront.net/actiontag/at.js' crossorigin='anonymous'></script>
    <?php }
    
add_action('wp_head', 'hook_javascript');

Notice the <script> line, that is the first line on your code.

The rest (HTML codes) can be placed on a RAW Content element.

But it seems adding both on RAW Content element works, thats fine too.

Do you mean the form title? Please add this to Page CSS

.at-title {
	font-size: calc(1.5rem - 10px) !important;
}

That is 1.5rem is the current size, we just reduce it by 10px, feel free to adjust it where you see fit.

Cheers!

#5

I’ve investigated a bit further:

  1. The title is a start, but I was talking about the text on the entire form. Is there a way to reduce the size of the form container AND the text - all of it?

  2. I just logged out and checked the page in Safari and the form isn’t showing at all. What would cause this?

  3. I am able to see the form in Chrome, so I tested it and the confirmation page come up underneath the header, so it is cut off also. The greyed text is too large as well. How about this one? (See graphic)

#6

Hi There,

I could provide you the selectors you need to adjust the styling of this form. But I advise consulting the documentation or the plugin/script author first, they might have an easier way of styling this form.

Since this is a 3rd party script further customization or fixing issues of it falls outside the scope of our support, due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script.

  1. Please add this to Theme Options > CSS and feel free to adjust the values to your needs.
/*form max width*/
body .ngp-form {
	max-width: 600px;
}

/*form title*/
body .at-title {
	font-size: 1rem;
}

/*subtitle*/
body .at fieldset legend {
	font-size: 1rem;
}

/*field label*/
body .at label {
	font-size: 0.5rem;
}

/*input fields*/
body .at input[type="text"], body .at input[type="password"], body .at input[type="date"], body .at input[type="datetime"], body .at input[type="datetime-local"], body .at input[type="month"], body .at input[type="week"], body .at input[type="email"], body .at input[type="number"], body .at input[type="search"], body .at input[type="tel"], body .at input[type="time"], body .at input[type="url"], body .at input[type="color"], body .at textarea, body .at select {
	height: 1rem;
	font-size: 14px;
	padding-top: 0;
    padding-bottom: 0;
}

/*checkbox field */
body .at input[type="checkbox"]+span:before {
	height: 0.75rem;
    width: 0.75rem;
}

  1. Please clear your browser’s cache, or use the browser’s private/incognito feature. If it still does not work, please contact the plugin/script author regarding this issue.

  2. You can add this to Theme Options > CSS.

/*confirmation box position*/
section.fastaction-modal .fa-modal-inner {
	top: 35% !important;
}

Hope it helps,
Cheers!

#7

All of this code worked perfectly, but I will check with the 3rd party as you recommended! Thank you SO much!

#8

You’re welcome :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.