Customzing

[rwebb]

Do you have any documentation on how to customize the form modal popup? I would like to create my contact form using this method

---

[Support]

Hello, thanks for your purchase.

To create a modal with contact form you can set the HTML like this:

<button class="btn btn-modern btn-primary" data-bs-toggle="modal" data-bs-target="#formModal">
	Launch Form Modal
</button>

<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="formModalLabel">Contact Us</h4>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
			</div>
			<div class="modal-body">
			
				<p class="mb-4">Feel free to ask for details, don't save any questions!</p>

				<form class="contact-form" action="php/contact-form.php" method="POST">
					<div class="contact-form-success alert alert-success d-none mt-4">
						<strong>Success!</strong> Your message has been sent to us.
					</div>

					<div class="contact-form-error alert alert-danger d-none mt-4">
						<strong>Error!</strong> There was an error sending your message.
						<span class="mail-error-message text-1 d-block"></span>
					</div>

					<div class="row">
						<div class="form-group col-lg-6">
							<label class="form-label mb-1 text-2">Full Name</label>
							<input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control text-3 h-auto py-2" name="name" required>
						</div>
						<div class="form-group col-lg-6">
							<label class="form-label mb-1 text-2">Email Address</label>
							<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control text-3 h-auto py-2" name="email" required>
						</div>
					</div>
					<div class="row">
						<div class="form-group col">
							<label class="form-label mb-1 text-2">Subject</label>
							<input type="text" value="" data-msg-required="Please enter the subject." maxlength="100" class="form-control text-3 h-auto py-2" name="subject" required>
						</div>
					</div>
					<div class="row">
						<div class="form-group col">
							<label class="form-label mb-1 text-2">Message</label>
							<textarea maxlength="5000" data-msg-required="Please enter your message." rows="8" class="form-control text-3 h-auto py-2" name="message" required></textarea>
						</div>
					</div>
					<div class="row">
						<div class="form-group col">
							<input type="submit" value="Send Message" class="btn btn-primary btn-modern" data-loading-text="Loading...">
						</div>
					</div>
				</form>
				
				
			</div>
		</div>
	</div>
</div>

Also, add the script js/views/view.contact.js at the bottom of the file.

Kind Regards.

---

[rwebb]

Ok I’ve got it working for sending the email but the success message is displaying as:

{"response":"success"}

instead of the styled divs. I do have them in there as listed above. I did some customizing of the form though but just added a field.

Also is there a way to make the “success” message pop up in a separate window with a timer to close?

Thanks,
Rich

---

[rwebb]

I think it might be doing this because it’s now a Modal instead of on the main page, but I’m not sure how to fix it. Ideally I would like a success or error message to pop up in a new tab or window for about 10 seconds and automatically close. I’m not sure if that is possible or not?

I’m also not sure that the javascript is running… not sure how to tell.

Rich

---

[Support]

Hello, can you confirm that you added the script js/views/view.contact.js at the bottom of the file?

Please send us a private message with the URL of your site so we can make a few tests.

Thanks.

---

[rwebb]

Yes, the JS script is at the bottom with the other JS

URL Sent

Rich

---

[rwebb]

This reply has been marked as private.

[Support]

This reply has been marked as private.

[rwebb]

This reply has been marked as private.

[Support]

Hello, the popup HTML must go before the scripts and not after:

The scripts must be the last part of the HTML.

---

[rwebb]

Ok – readjusted and now it’s working! Thank you for a great template!

Rich

---

[Author]

Posts