What could be the reason why the form is appearing correctly on one landing page but not the other?

I have embedded a Marketo form on two different landing pages on our website. I am using the same JavaScript provided by Marketo for both pages (shown in the code below). However, on page 2, the form field label and cell are displaying incorrectly, appearing too far to the left compared to page 1.

Could someone please help me understand why this issue is occurring and provide guidance on how to make page 2 look like page 1?

Code for Page 1:

[column lg="3"] [/column] [column lg="6" md="12" sm="12" xs="12"]<h4 style="text-align: center;"><span style="color: #000000;"><strong>HEADLINE HERE</strong></span></h4><p style="text-align: center;"><span style="color: #333333;">TEXT HERE</span><br /> <br /> <script src="//app-ab05.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_1035"></form>
<script>MktoForms2.loadForm("//app-ab05.marketo.com", "578-AFO-782", 1035);</script>[/column] [column lg="3"] [/column]

Code for Page 2:

<p>[column lg="3"] [/column] [column lg="6" md="12" sm="12" xs="12"]</p>
<h4 style="text-align: center;">TEXT GOES HERE</h4>
<p> </p>
<script src="//app-ab05.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_1035"></form>
<script>MktoForms2.loadForm("//app-ab05.marketo.com", "578-AFO-782", 1035);</script>
[/column] [column lg="3"] [/column]</p>
htmlcssformsmarketo

Answer №1

It seems like Page 2 has some additional paragraph elements compared to Page 1, and it's missing the span element present in Page 1. To address this, I suggest eliminating the extra paragraph elements and adding the missing span element to see if Page 2 displays correctly. Here's a proposed solution:

[row]
[column lg="3"] [/column]
[column lg="6" md="12" sm="12" xs="12"]
<h4 style="text-align: center;"><span style="color: #000000;"><strong>INSERT TEXT HERE</strong></span>
</h4><br /> <br />
<script src="//app-cd13.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_1056"></form>
<script>MktoForms2.loadForm("//app-cd13.marketo.com", "784-XYZ-321", 1056);</script>
[/column]
[column lg="3"] [/column]
[/row]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate text directly into Bootstrap select input on a single line

I am attempting to include an asterisk in a select input field. I can achieve this easily by applying my own CSS, but the challenge is to accomplish this using Bootstrap 3.3.7 or an older version while displaying the asterisk on the same line as shown in t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Populate a Dropdown Menu with Directory Content for User Selection of d3.js JSON Data

I have a d3 forced-directed graph that is currently using a static JSON file for data: d3.json("../Data/sample.json", function(error, graph) { //do stuff }); However, I would like to give the user the ability to select the data file from a drop-down ...

javascriptphphtmljsond3.js

Dynamic CSS columns with a set width on the left and right sides

Dividing my background into two parts has been a challenge. Background Image #1 Endlessly Repeating Background Image #1 Background Image #2 Endlessly Repeating Background Image #2 In CSS, creating a background with multiple elements is not as simple as i ...

htmlcssdynamic

What is the process to enable mandatory validation after a change in input in Angular 4?

Currently, I am working on a project using Angular 4. One of the tasks I need to achieve is validation. <input [(ngModel)]="someModel" required placeholder="some placeholder"/> The validation triggers immediately, but I want it to only trigger aft ...

htmlangulartypescriptrequired

Import data into Bootstrap table from an external source

I am having trouble styling the table loaded from the table.html file onto the index page. Even after loading the table, the styles from bootstrap classes are not applied. What could be causing this issue? Importing bootstrap libraries directly into the ta ...

javascripthtmljquerybootstrap-5bootstrap-table

What steps do I need to take to ensure the CSS hover effect functions properly?

After conducting a simple test underneath the main divs, I found that it works as intended. However, the primary one is not functioning properly. I attempted to apply the class "services-icon" to the div containing the image, but it still did not work. I ...

htmlcss

Circular css3 animation originating from the center

Can someone provide an example of how to create a div rotating around a circle in CSS3 while the circle itself is already rotating? I attempted to use webkit frame, but it did not work correctly. If anyone has any examples or tips on achieving this effec ...

animationcss

Disable javascript when using an iPad

I'm working on a website with parallax scrolling that I don't want to function on iPads. Is there a way to prevent the parallax effect from happening when the site is accessed on an iPad? Any guidance on how to disable parallax scrolling based o ...

javascripthtmlcssipadparallax.js

Error message in Angular 2 RC-4: "Type 'FormGroup' is not compatible with type 'typeof FormGroup'"

I'm currently facing an issue with Angular 2 forms. I have successfully implemented a few forms in my project, but when trying to add this one, I encounter an error from my Angular CLI: Type 'FormGroup' is not assignable to type 'typeo ...

angularformstypescript

Attach functions to elements added dynamically

I've been struggling with trying to attach functions to newly added elements using jQuery. Despite experimenting with various online examples, I haven't been able to get anything to work properly. My setup involves a form with an ID and a button. ...

jqueryhtmlajax

Numerous pop-up windows on a single webpage

I am facing an issue with two modal windows on the same page. When I click on the button with the attribute: data-target='#change', the CHANGE MODAL WINDOW fails to show up. As I lack experience in JavaScript, could the problem be with the follo ...

javascriptjqueryhtml

Ensuring proper input with JavaScript form validation

Currently, I am working on implementing a basic form validation feature, but it is not functioning as intended. The desired behavior is for the field border to change color to green or red based on its validity, while displaying text indicating whether t ...

javascripthtmlvalidation

Forming triangles with outlines

Recently, I had the challenge of designing speech bubbles and found a clever technique to create the triangular tip at the end using CSS. By setting the element's width and height to 0 and playing around with borders, you can achieve diagonal shapes f ...

css

What is the best way to retrieve a particular value from a database using PHP?

$sql="Select chanceNo From gm_gacha_token1 where token_code='$mytoken'"; $result=mysql_query($sql); $count=mysql_num_rows($result); Language: PHP I am attempting to retrieve a single value of `chanceNo. Is there a way to get this value and stor ...

phphtmlmysql

Utilize the JQuery range slider within an ASP.NET MVC Razor project

After finding an answer to a question on creating a simple range slider in ASP.NET MVC 3, I decided to implement a jQuery range slider for my ASP.NET MVC Razor view website. Although I managed to get the slider working on the frontend, I encountered issues ...

c#jqueryasp.net-mvcformsrazor

Accessing form data using Vue on submit

I'm working on a project that involves creating a form with a single input field and saving the data to a database. The technology I am using is Vue.js. Here is the template I have designed: <form class="form-horizontal" @submit.prevent="submitBi ...

javascriptformsvue.js

What is the most crucial element to focus on when initially building a website?

I have recently embarked on the journey of learning various programming languages for web development, and I strongly believe that the best way to enhance my skills is by brainstorming ideas and bringing them to life through coding. (Please feel free to co ...

phphtmlcss

You are only able to click the button once per day

I am working on a button that contains numeric values and updates a total number displayed on the page when clicked. I would like this button to only be clickable once per day, so that users cannot click it multiple times within a 24 hour period. Below i ...

javascriptjquerycsshtml

Is there a way to customize the title on the Configuration Page within a Joomla Component?

Problem with updating string in Language File: COM_OHANAH_CONFIGURATION="Ohanah Konfiguration" I have tried adding the above string to the Language File, but it doesn't seem to reflect the changes. I have checked other Joomla Components and they all ...

phphtmlxmljoomla

Retrieve data from a table with XPath expressions

Looking to gather details from this specific website link: Focusing on extracting the number of bedrooms from a table. <div class="panel panel-primary"> <div class="panel-heading">Property Details</div> <div class="panel- ...

htmlparsingxpathweb-scrapingweb-crawler