Can I add a text field to the contact us form?
in MultiStore by (150 points)

1 Answer

0 votes

Short answer: Yes.

Long answer:

Please reference my answers in this forum post: https://forums.vortx.com/?qa=3537/create-custom-service-request-form&show=3537#q3537

This is a pastebin link to a copy of the code you would manipulate if you are comfortable editing the default contact form file: http://pastebin.com/NpTTVktG

In the following example, I've included samples of what edits you might make, depending on whether you want a single line text field or a multi-line text area field. I've included commenting to specify where the samples are. Of course it will need customizing for your specific needs (options, names, etc.), but it should get you started in the right direction.

<form action="/t-contact.aspx" method="post">				
	<div class="form contact-form">
		<div class="form-group-full form-group has-feedback">
			<label class="form-label form-label-required" for="From">
				<span class="form-label-prefix form-label-prefix-required"></span>
				<span class="form-label-wrap">Your Name</span>
				<span class="form-label-suffix form-label-suffix-required">(required)</span>
			</label>  
			<div class="entry-feedback-wrapper">
				<input autocomplete="name" class="form-control text-box single-line" data-val="true" data-val-required="Your first and last name are required." id="From" name="From" placeholder="Your first and last name" required="required" type="text" value="" /> 
				<i class="fa form-control-feedback"></i>
			</div> 
			<span class="field-validation-valid form-validation-message" data-valmsg-for="From" data-valmsg-replace="true"></span> 
		</div>
		
		<!-- EXAMPLE OF NEW SINGLE LINE TEXT FIELD HERE -->
		<div class="form-group-full form-group has-feedback">
			<label class="form-label form-label-required" for="Sample1">
				<span class="form-label-prefix form-label-prefix-required"></span>
				<span class="form-label-wrap" style="color:red;">Sample 1</span>
				<span class="form-label-suffix form-label-suffix-required">(required)</span>
			</label>  
			<div class="entry-feedback-wrapper">
				<input class="form-control text-box single-line" id="Sample1" name="Sample1" placeholder="Example of new field" type="text" value="" style="background-color:yellow;" /> 
				<i class="fa form-control-feedback"></i>
			</div> 
		</div>
		<!-- END EXAMPLE OF NEW SINGLE LINE TEXT FIELD -->
		
		
		<div class="form-group-full form-group has-feedback">
			<label class="form-label form-label-required" for="Phone">
				<span class="form-label-prefix form-label-prefix-required"></span>
				<span class="form-label-wrap">Phone Number</span>
				<span class="form-label-suffix form-label-suffix-required">(required)</span>
			</label>  
			<div class="entry-feedback-wrapper">
				<input autocomplete="tel" class="form-control text-box single-line" data-val="true" data-val-required="Your phone number is required." id="Phone" name="Phone" placeholder="Your phone number" required="required" type="tel" value="" /> 
				<i class="fa form-control-feedback"></i>
			</div> 
			<span class="field-validation-valid form-validation-message" data-valmsg-for="Phone" data-valmsg-replace="true"></span> 
		</div>
		
		<div class="form-group-full form-group has-feedback">
			<label class="form-label form-label-required" for="Email">
				<span class="form-label-prefix form-label-prefix-required"></span>
				<span class="form-label-wrap">Email Address</span>
				<span class="form-label-suffix form-label-suffix-required">(required)</span>
			</label>  
			<div class="entry-feedback-wrapper">
				<input autocomplete="email" class="form-control text-box single-line" data-val="true" data-val-regex="ContactUs.EmailAddress.Format" data-val-regex-pattern="^[email protected]+\..+$" data-val-required="Your email address is required." id="Email" name="Email" placeholder="Your email address" required="required" type="email" value="" /> 
				<i class="fa form-control-feedback"></i>
			</div> 
			<span class="field-validation-valid form-validation-message" data-valmsg-for="Email" data-valmsg-replace="true"></span>
		</div>
		
		<div class="form-group-full form-group has-feedback">
			<label class="form-label form-label-required" for="Subject">
				<span class="form-label-prefix form-label-prefix-required"></span>
				<span class="form-label-wrap">Subject</span>
				<span class="form-label-suffix form-label-suffix-required">(required)</span>
			</label>  
			<div class="entry-feedback-wrapper">
				<input class="form-control text-box single-line" data-val="true" data-val-required="Email subject is required." id="Subject" name="Subject" placeholder="Email subject" required="required" type="text" value="" /> 
				<i class="fa form-control-feedback"></i>
			</div> 
			<span class="field-validation-valid form-validation-message" data-valmsg-for="Subject" data-valmsg-replace="true"></span> 
		</div>
		
		<div class="form-group-full form-group has-feedback">
			<label class="form-label form-label-required" for="Message">
				<span class="form-label-prefix form-label-prefix-required"></span>
				<span class="form-label-wrap">Message</span>
				<span class="form-label-suffix form-label-suffix-required">(required)</span>
			</label>  
			<div class="entry-feedback-wrapper">
				<textarea class="form-control text-box multi-line" data-val="true" data-val-required="Message is required." id="Message" name="Message" placeholder="What can we help you with?" required="required">
				</textarea> 
				<i class="fa form-control-feedback"></i>
			</div> 
			<span class="field-validation-valid form-validation-message" data-valmsg-for="Message" data-valmsg-replace="true"></span> 
		</div>
		
		
		<!-- EXAMPLE OF NEW TEXT AREA FIELD HERE -->
		<div class="form-group-full form-group has-feedback">
			<label class="form-label form-label-required" for="Sample2">
				<span class="form-label-prefix form-label-prefix-required"></span>
				<span class="form-label-wrap" style="color:red;">Sample2</span>
				<span class="form-label-suffix form-label-suffix-required">(required)</span>
			</label>  
			<div class="entry-feedback-wrapper">
				<textarea class="form-control text-box multi-line" id="Sample2" name="Sample2" style="background-color:yellow;">
				</textarea> 
				<i class="fa form-control-feedback"></i>
			</div> 
		</div>
		<!-- END EXAMPLE OF NEW TEXT AREA FIELD -->

		<div class=" form-group-captcha form-group-full form-group has-feedback">
			<label class="form-label form-label-required" for="CaptchaCode">
				<span class="form-label-prefix form-label-prefix-required"></span>
				<span class="form-label-wrap">Security Code</span>
				<span class="form-label-suffix form-label-suffix-required">(required)</span>
			</label>  
			<div class="input-group entry-feedback-wrapper">
				<input class="form-control text-box single-line" data-val="true" data-val-required="Captcha is required." id="CaptchaCode" name="CaptchaCode" required="required" type="text" value="" /> 
				<span class="input-group-addon input-group-addon-captchaimage">
					<img src="/captcha?scope=ContactUsIndex" />
				</span>
			</div> 
			<span class="field-validation-valid form-validation-message" data-valmsg-for="CaptchaCode" data-valmsg-replace="true"></span> 
		</div>
		
		<div class="page-action-bar contact-us-actions">
			<input type="submit" class="btn btn-primary submit-contact-button" value="Submit" />
		</div>
	</div>
</form>	

 

For assistance in finding the applicable document to edit, please also reference the following two links:

https://www.youtube.com/watch?v=YqFxALGuQiU

https://forums.vortx.com/?qa=2811/i-need-to-create-a-custom-submission-form&show=2811#q2811

 

(Yes, I did offer another method as well in my linked answer, but I can almost guarantee that the one above is the better option.)

by (260 points)
...