How to place form using googleapis jquery - Support | Kriesi.at

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
April 17, 2020 at 2:27 pm #1204719

sberendss
Participant

I need to nicely integrate a login form to an external intranet on a WP-Enfold website.
The supplied form is a login.html with a folder with JS files.

I can grab the code from the login.html and put it in the code block element, but it gives two problems:
1) <form name=”main” action=”login.html” method=”post”> login.html (action) doesn’t exist in this situation. Can I replace it by “#” or the root URL?
2) index.html also contains <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> and <script src=”js/test.js”></script> If I add this to the code block, the content doesn’t show up in the frontend. What is the proper way to link to those JS files?

Thank you very much again!

Sytse

April 26, 2020 at 12:16 am #1207127
Mike
Moderator
Hey sberendss,
Sorry for the late reply, thanks for the files, on my localhost I placed the css & js in a directory in /wp-content/uploads/form/
Then I placed this in a code block element, note the path to the files, you will need to change to your path.
```
<link href="/wp-content/uploads/form/css/vendor/bootstrap.min.css" rel="stylesheet">
		<link href="/wp-content/uploads/form/css/test.css" rel="stylesheet">
	</head>
	<body>
		<div class="login-form">
			<form name="main" action="" method="post">
				<h2 class="text-center">Log in</h2>       
				<div class="form-group">
					<input 	class="form-control" 
							required="required"
							id="userid"
							type="text" 
							placeholder="gebruikersnaam" 
							name="userid">
				</div>
				<div class="form-group">
					<input 	class="form-control" 
							required="required" 
							type="password" 
							placeholder="wachtwoord"
							id="password"
							name="password">
				</div>
				<div class="form-group">
					<select id="languageid" name="languageID">
						<option value="NLD" selected>Nederlands</option>
						<option value="DEU">Duits</option>
						<option value="ENU">Engels</option>
					</select>					
				</div>
				<div class="form-group">
					<button class="btn btn-primary btn-block" 
							type="button" 
							onclick="login(this.form)">Inloggen</button>
				</div>
			</form>	
		</div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script>window.jQuery || document.write('<script src="/wp-content/uploads/form/js/jquery-3.3.1.min.js"><\/script>')</script>
		<script src="/wp-content/uploads/form/js/vendor/bootstrap.bundle.min.js"></script>
		<script src="/wp-content/uploads/form/js/test.js"></script>
```
This seems to work

Best regards,
Mike
May 4, 2020 at 11:00 am #1209478
sberendss
Participant
Mike, thank you very much!
In the meanwhile, we have the form up and running.

Thanks again,

Sytse
- This reply was modified 4 years, 6 months ago by sberendss.
May 4, 2020 at 12:03 pm #1209494

Mike
Moderator

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘How to place form using googleapis jquery’ is closed to new replies.