Styling a submission button with HTML and CSS

I've tried following a few solutions on Stack Overflow, but I just can't seem to get this simple line of code to work.

<a class="lp-element lp-pom-button" id="lp-pom-button-25"><span class="label" style="margin-top: -10px;">Get Notified!</span></a>

It's supposed to be a submit button, but even when I change it to this:

<a class="lp-element lp-pom-button" id="lp-pom-button-25" type="submit" name="submit"><span class="label" style="margin-top: -10px;">Get Notified!</span></a>

It still doesn't submit to the PHP form.

Any help would be greatly appreciated. You can see it in action on the page below for better understanding:

keyinventory[dot]com
htmlcss

Answer №1

If you want to successfully submit the form, it's important to use either a <button type="submit"> or <input type="submit"> element. It seems that traditional links may not have the capability to submit a form without the use of javascript.

An enhanced version of your current code snippet could look like this: 


<button type="submit" class="lp-element lp-pom-button" id="lp-pom-button-30" name="submit"><span class="label" style="margin-top: -10px;">Subscribe Now!</span></button>

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

How can I dynamically adjust the font size of content in a React Material-UI Button when it's unexpectedly

In my web application project, I have created multiple choice questions where each answer is displayed within a single button: <Button fullWidth={true} variant="contained" onClick={(answer) => this.handleAnswer(this.state.answers[0].tex ...

htmlcssreactjsfrontendmaterial-ui

Tips for positioning a navigation bar in the center for various screen resolutions

After hours of searching, I still can't find a solution to my problem. I'm new to this, and on my main monitor, everything looks centered just fine. 1920x1080: View larger image But on my 1280x1024 monitor: View smaller image As you can see, i ...

htmlcsscenternavbar

Output the name of the file while executing the ant process

Currently, I am utilizing YUI compressor within an ant build process to compress CSS and JavaScript files. I would like the compressor to display the name of each file it is processing as it goes along, so that in case of an error, I can easily pinpoint wh ...

javascriptcssantyui

Tips for storing HTML form data in a local JSON file without the need for PHP or Node.js dependencies

I'm interested in saving any information panel in an HTML file to a local JSON file. For example, if there are blocks like this: <div class="panel"> <div> <input type="text" name="producttype" id=&q ...

javascripthtmljqueryjsonajax

Differences in functionality across various browsers when dealing with complex subgrid structures

After nesting a subgrid inside a padded subgrid within a grid, I noticed varying behavior across different web browsers. Chrome/Edge (Windows) Firefox (Windows) Safari MacOS https://i.stack.imgur.com/uHlto.png https://i.stack.imgur.com/SGxuC.png ht ...

csscross-browsersubgrid

Create a stylish border around an ion-card using a sleek black bar

I have a card element with a title and subtitle, and I want to add a black bar above the header. <ion-list> <ion-card (click)="onEventClick(event.id)" *ngFor="let event of events"> <ion-card-header> ...

htmlcssionic4

Moving data from one table to another and making changes or removing it

After successfully adding data from one table to another using .click, I encountered an issue. Whenever I utilize the search field in the top table, it clears the appended rows in the bottom table. I am looking for a solution to have these tables generate ...

javascriptjqueryhtml

Automating Web Form Completion with VBA and Selenium

I am experiencing an issue with filling out a form. I have attempted the following methods: driver.FindElementByXPath("//div[@id='s_dane_dokumentu-section?grid-1-grid?c_nr_lrn_komunikatu-control?xforms-input-1']").sendkeys "2112345 ...

htmlvbaseleniumselenium-webdriverselenium-chromedriver

Troubleshooting Problems with CSS Media Queries on Various 1280 screens

I'm facing an issue with creating a responsive layout using CSS media queries to adapt to different screen resolutions. Even though I've set up Media Queries for specific resolutions like: /*1280 x 1024*/ /*1280 x 960*/ /*1280 x 800*/ /*1280 x 7 ...

htmlcssresponsive-designmedia-queries

Fading effect of Bootstrap JS on reducing content size

My quest for a toggle collapse button led me to this helpful link: https://getbootstrap.com/docs/4.0/components/collapse/ I found what I needed, but encountered an issue with the transition; clicking on the button immediately reveals my div. I desire a slo ...

javascripthtmljquerycssbootstrap-4

Tips for optimizing background images for various screen sizes?

I'm experiencing an issue with my background image where the head is being cut off on larger screens. Is there a way to ensure that the entire picture is always displayed regardless of screen size? The initial property for background-size is set to co ...

htmlcssbootstrap-4sassbackground-image

setting the width of <input> fields to automatically adjust

Curious about CSS. I was under the impression that setting width:auto for a display:block element would make it 'fill available space'. However, when applied to an <input> element, this doesn't seem to hold true. For instance: <b ...

css

Using the val() function on a select element can occasionally result in a null value

Having an issue with my select. For some reason, when I use $(".test").val(), it sporadically returns null. Can't seem to figure out what's causing this inconsistency. console.log($('.test').val()); <script src="https://ajax.googl ...

javascriptjqueryhtmlselect

Modify the date format inside the content of an HTML element or its descendants (excluding their attributes)

I have been trying to reformat some dates using JavaScript. My initial approach was: var regex = /(\d{4})-(\d{2})-(\d{2})/g; $('.container td').each(function() { $(this).html($(this).html().replace(regex, '$3-$2-$1')); ...

javascriptjqueryhtml

Use JavaScript to swap out images

How can I change the image arrow when it is clicked? Currently, I have this code snippet: http://codepen.io/anon/pen/qEMLxq. However, when the image is clicked, it changes but does not hide. <a id="Boton1" class="button" onClick="showHide()" href="j ...

javascripthtmlimage

Is there a way to ensure consistent border thickness in a material-ui table layout?

In my current setup of a material UI table, I have applied a 1-pixel thickness to all elements. This leads to a slightly thicker appearance at the points where two cells meet compared to the outer edges. How can I achieve a consistent border width of 1px ...

cssmaterial-uifrontend

Trouble displaying background image in Electron Application

When I try to load an image file in the same directory as my login.vue component (where the following code is located), it won't display: <div background="benjamin-child-17946.jpg" class="login" style="height:100%;"> A 404 error is popping up: ...

htmlcsswebpackvue.jselectron

Testing a feature in Angular that modifies a variable

Trying to test a function that updates a Boolean variable has been causing some confusion for me. The strange thing is, even though the function seems to be called successfully when using the toHaveBeenCalled method, the variable itself never actually gets ...

htmlangulartypescript

Fully responsive header designed for optimal experience at any screen height

I am facing issues with the header and cannot seem to find a solution. My goal is to make the header span 100% of the window screen height. I need a responsive header that adjusts to 100% height, and when resizing for a smaller viewport, nothing should sho ...

javascripthtmlcsstwitter-bootstrap

ReactJS: Want to update card design by utilizing the onClick event handler

Currently, I am aware that there will be a need to refactor this code later on to separate things into their own components. However, due to time constraints, I have to wire this up as is at the moment. To achieve this, I utilized array.map() to create car ...

javascriptcssreactjsonclick