Modal link using text, no button

Hello Canvas Team,

I am trying to link to a modal contact form using text instead of a button. When I removed the class="button" from the modal form code the text become unclickable. What code do I use to link text to a modal pop up?

Thanks for the information.

I am using the code from the Contact-5-recaptcha.html

The code I am using is below. I tried adding the code you suggested but was unable to get it to work.

<!-- Modal Contact Form
							============================================= -->
							<a href="#" data-toggle="modal" data-target="#contactFormModal" class="button">Email us to see how we can help you</a>
							<a href="#" data-toggle="modal" data-target="#contactFormModal" class="button button-3d nomargin btn-block d-block d-md-none center">Send an Email</a>

							<div class="modal fade" id="contactFormModal" tabindex="-1" role="dialog" aria-labelledby="contactFormModalLabel" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<h4 class="modal-title" id="contactFormModalLabel">Send Us an Email</h4>
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
										</div>
										<div class="modal-body">

											<div class="form-widget">
												<div class="form-result"></div>
												<form class="nobottommargin" id="template-contactform" name="template-contactform" action="include/form.php" method="post">

													<div class="form-process"></div>

													<div class="col_half">
														<label for="template-contactform-name">Name <small>*</small></label>
														<input type="text" id="template-contactform-name" name="template-contactform-name" value="" class="sm-form-control required" />
													</div>

													<div class="col_half col_last">
														<label for="template-contactform-email">Email <small>*</small></label>
														<input type="email" id="template-contactform-email" name="template-contactform-email" value="" class="required email sm-form-control" />
													</div>

													<div class="clear"></div>

													<div class="col_half">
														<label for="template-contactform-phone">Phone</label>
														<input type="text" id="template-contactform-phone" name="template-contactform-phone" value="" class="sm-form-control" />
													</div>

													<div class="col_half col_last">
														<label for="template-contactform-service">Services</label>
														<select id="template-contactform-service" name="template-contactform-service" class="sm-form-control">
															<option value="">-- Select One --</option>
															<option value="Wordpress">Wordpress</option>
															<option value="PHP / MySQL">PHP / MySQL</option>
															<option value="HTML5 / CSS3">HTML5 / CSS3</option>
															<option value="Graphic Design">Graphic Design</option>
														</select>
													</div>

													<div class="clear"></div>

													<div class="col_full">
														<label for="template-contactform-subject">Subject <small>*</small></label>
														<input type="text" id="template-contactform-subject" name="subject" value="" class="required sm-form-control" />
													</div>

													<div class="col_full">
														<label for="template-contactform-message">Message <small>*</small></label>
														<textarea class="required sm-form-control" id="template-contactform-message" name="template-contactform-message" rows="6" cols="30"></textarea>
													</div>

													<div class="col_full hidden">
														<input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="sm-form-control" />
													</div>

													<div class="col_full">

														<script src="https://www.google.com/recaptcha/api.js" async defer></script>
														<div class="g-recaptcha" data-sitekey="6LfijgUTAAAAACPt-XfRbQszAKAJY0yZDjjhMUQT"></div>

													</div>

													<div class="col_full">
														<button class="button button-3d nomargin" type="submit" id="template-contactform-submit" name="template-contactform-submit" value="submit">Send Message</button>
													</div>

													<input type="hidden" name="prefix" value="template-contactform-">

												</form>

											</div>

										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
										</div>
									</div><!-- /.modal-content -->
								</div><!-- /.modal-dialog -->
							</div><!-- /.modal -->
							<!-- Modal Contact Form End -->

						</div>
					</div>

				</div>

			</div>

		</section><!-- #content end -->

I am also having trouble with landscape mode on idevices. When you switch the phone from portrait to landscape the header text gets cut off. Here is a link to a video showing the error. https://youtu.be/wZk413IdDFk Any suggestions on how to fix this?

1. Thanks! The code for the text modal link worked but I am now having an issue with the link text. Here is the page I am working with for reference.
   http://www.cultbranding.com/testindex.html

The link is under "Email us to see how we can help you"

I am having an issue with the text color when the link is clicked. The link text goes to black after it is clicked, can I change it so to the link text stays orange after it has been clicked?

1. The JS code you provided helped with the top part of text not being cut but now it is cutting of the CTA button. I have added a link with a video showing the error. Any thoughts on how to prevent this?

https://youtu.be/FrzSqQ7JfDc