Version 10.

How do I add a selection dropdown box to the contact us form?
in ML by (380 points)

3 Answers

0 votes
 
Best answer

After a lot of trial and error, I've been able to add a dropdown selection to the contact form and add it to the email that is received. This works in version 10 of ASPDNSF. Code is VB.net

In the viewmodel set the properties of your dropdown list
 

Public Property SelectedTestingType() As String
            Get
                Return m_SelectedTestingType
            End Get
            Set(value As String)
                m_SelectedTestingType = value
            End Set
        End Property
        Private m_SelectedTestingType As String

        Public Property TestingType() As Dictionary(Of String, String)
            Get
                Return m_TestingType
            End Get
            Set(value As Dictionary(Of String, String))
                m_TestingType = value
            End Set
        End Property
        Private m_TestingType As Dictionary(Of String, String)

In the controller, modify the function Index() As ActionResult to include your dropdown (highlighted code).
 

<HttpGet, ImportModelStateFromTempData>
        Public Function Index() As ActionResult
            ViewBag.MetaTitle = String.Format("{0} - {1}", AppLogic.AppConfig("StoreName"), AppLogic.GetString("ContactUs.Page.Title"))

            Dim model = New RequestPricingRenderModel(pageHeader:=AppLogic.GetString("ContactUs.Page.Header"), useCaptcha:=AppLogic.AppConfigBool("ContactUs.UseCaptcha")) With {.SelectedTestingType = "None Selected",
          .TestingType = New Dictionary(Of String, String)() From {
            {"Value1", "Text1"},
            {"Value2", "Text2"},
            {"Value3", "Text3"},
            {"Value4", "Text4"}
            }
            }
            Return View(model)
        End Function

Modify the Function GetContactTopic to include the selected value from the dropdown list.

Private Function GetContactTopic(ByVal model As ContactUsViewModel) As String
            Return (New Topic("ContactEmail")).ContentsRAW.Replace("%NAME%", model.From).Replace("%EMAIL%", model.Email).Replace("%PHONE%", model.Phone).Replace("%MESSAGE%", model.Message).Replace("%TESTINGTYPE%", model.SelectedTestingType)
        End Function

In the View add dropdown list to form layout (highlighted code)
 

@Using Html.BeginForm()
            @<div class="form contact-form">
                @Html.EditorEntryFor(Function(m) m.From)
                @Html.EditorEntryFor(Function(m) m.Email)
                @Html.EditorEntryFor(Function(m) m.Phone)
                @Html.DropDownListFor(Function(m) m.SelectedTestingType, New SelectList(Model.TestingType, "Key", "Value"), "-- None Selected --")
                @Html.EditorEntryFor(Function(m) m.Message)

                @If Model.UseCaptcha Then
            @Html.CaptchaEntryFor(
                                                                                              expression:=Function(m) m.CaptchaCode,
                                                                                              scope:=String.Concat(ControllerNames.ContactUs, ActionNames.Index))
                End If

                <div class="page-action-bar contact-us-actions">
                    <input type="submit" class="btn btn-primary submit-contact-button" value="@Html.StringResource("common.cs.61")" />
                </div>
            </div>End Using

Finally, modify the ContactEmail Topic in the admin to include the selected value from the dropdown list.
 

<table style="width: 400px;">
    <tbody>
        <tr>
            <td align="right" style="width: 150px;">Customer Name: </td>
            <td align="left">%NAME%</td>
        </tr>
        <tr>
            <td align="right" style="width: 150px;">Customer Email: </td>
            <td align="left">%EMAIL%</td>
        </tr>
        <tr>
            <td align="right" style="width: 150px;">Customer Phone:</td>
            <td align="left">%PHONE%</td>
        </tr>
         <tr>
            <td align="right" style="width: 150px;">Type of Testing:</td>
            <td align="left">%TESTINGTYPE%</td>
        </tr>
        <tr>
            <td colspan="2"> </td>
        </tr>
        <tr>
            <td colspan="2" style="padding-top: 3px;">%MESSAGE%</td>
        </tr>
    </tbody>
</table>

 

by (380 points)
0 votes

For adding a selection drop down box to a table-layout like your current form, you want to duplicate the code currently used for your "country" selection dropdown. (I've highlighted enough lines for you to know what to look for, instead of every line representing a different country.)  Be sure to edit accordingly, to reflect the purpose and options of the new selection dropdown.

<FORM id="MailArea" method="post" action="sendform_contact.aspx">
        <div>
        <script type="text/javascript">function CheckFields(){var ergx = new RegExp('\\w+([-+.\']\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*'); if(document.getElementById("MailName").value == "" || document.getElementById("MailEmail").value == ""){alert("Please complete entries.");return false;} if(!ergx.test(document.getElementById("MailEmail").value)){alert("Invalid Email.");return false;}}</script>
        </div>
        <div style="CLEAR: both" align="left">
        <TABLE border="0" cellSpacing="0" cellPadding="5" width="454">
            <TBODY>
                <TR>
                    <TD class="label required" vAlign="bottom" width="102" align="right">Your Name:</TD>
                    <TD vAlign="middle" width="348" align="left"><INPUT id="MailName" name="Name" size="27"></TD>
                </TR>

                <TR>
                    <TD class="label required" vAlign="top" width="102" align="right">Your E-Mail:</TD>
                    <TD vAlign="middle" width="348" align="left"><INPUT id="MailEmail" name="EMail" size="27"></TD>
                </TR>
                <TR>
                    <TD class="label" vAlign="top" width="102" align="right">Company Name:</TD>
                    <TD vAlign="middle" width="348" align="left"><INPUT id="company_name" name="company_name" size="27"></TD>
                </TR>
                <TR>
                    <TD class="label" vAlign="top" width="102" align="right">Address 1:</TD>
                    <TD vAlign="middle" width="348" align="left"><INPUT id="address_1" name="address_1" size="27"></TD>
                </TR>
                <TR>
                    <TD class="label" vAlign="top" width="102" align="right">Address 2:</TD>
                    <TD vAlign="middle" width="348" align="left"><INPUT id="address_2" name="address_2" size="27"></TD>
                </TR>
                <TR>
                    <TD vAlign="top" width="102" align="right">City:</TD>
                    <TD vAlign="middle" align="left"><INPUT id="city" name="city" size="27"></TD>
                    <TD vAlign="top" width="102" align="right">State:</TD>
                    <TD vAlign="middle" width="75" align="left"><INPUT id="state" name="state" size="27"></TD>
                    <TD vAlign="top" width="102" align="right">Zip:</TD>
                    <TD vAlign="middle" width="75" align="left"><INPUT id="zip" name="zip" size="27"></TD>
                </TR>
                <TR>
                    <TD vAlign="middle" width="102" align="right">Country:</TD>
                    <TD vAlign="middle" align="left"><SELECT id="country" size="1" name="country">
                    <OPTION>Afghanistan</OPTION>
                    <OPTION>Ă…land Islands</OPTION>
                    <OPTION>Albania</OPTION>
                    <OPTION>Algeria</OPTION>
                    <OPTION>American Samoa</OPTION>
                    <OPTION>Andorra</OPTION>
                    <OPTION>Angola</OPTION>
                    <OPTION>Anguilla</OPTION>
                    <OPTION>Antarctica</OPTION>
                    <OPTION>Antigua and Barbuda</OPTION>
                    <OPTION>Argentina</OPTION>
                    <OPTION>Armenia</OPTION>
                    <OPTION>Aruba</OPTION>
                    <OPTION>Australia</OPTION>
                    <OPTION>Austria</OPTION>
                    <OPTION>Azerbaijan</OPTION>
                    <OPTION>Bahamas</OPTION>
                    </SELECT></TD>
                </TR>
                <TR>
                    <TD class="label" vAlign="top" width="102" align="right">Phone:</TD>
                    <TD vAlign="middle" width="348" align="left"><INPUT id="MailPhone" name="Phone" size="27"></TD>
                    <TD vAlign="top" width="102" align="right">Ext:</TD>
                    <TD vAlign="middle" align="left"><INPUT id="phone_ext" name="phone_ext" width="75" size="27"></TD>
                    <TR>
                        <TD class="label" vAlign="top" width="102" align="right">Comments:</TD>
                        <TD vAlign="middle" width="348" align="left"><TEXTAREA id="MailMessage" cols="41" rows="11" name="S1"></TEXTAREA></TD>
                    </TR>
                    <TR>
                        <TD width="102"></TD>
                        <TD width="348"><INPUT onclick="return CheckFields();" name="B1" value="Submit" type="submit">&nbsp;&nbsp;&nbsp;&nbsp;<INPUT name="reset" value="Reset" type="reset"></TD>
                    </TR>
                </TBODY>
            </TABLE>
            </div>
        </FORM>

 

For example, you might insert something like this:

              <TR>
                    <TD vAlign="middle" width="102" align="right">New Dropdown:</TD>
                    <TD vAlign="middle" align="left"><SELECT id="newdropdown" size="1" name="newdropdown">
                    <OPTION>Option 1</OPTION>
                    <OPTION>Option 2</OPTION>
                    <OPTION>Option 3</OPTION>
                    </SELECT></TD>
                </TR>

Again, 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

 

Hope this helps.

by (260 points)
0 votes

Interestingly enough, yours is the second request I've seen for this information.

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

Below is a copy of the code you would manipulate if you are comfortable editing the default contact form file for a css-based layout. (I've provided this example in case you switch to a css-based layout in the future.)

There should be highlighting of the lines showing what I modified (added) for the other forum member. 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="/contactus" 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>
                <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="Services Requested">
                    <span class="form-label-prefix form-label-prefix-required"></span>
                    <span class="form-label-wrap">Service Requested</span>
                    <span class="form-label-suffix form-label-suffix-required">(required)</span>
                </label>  
                <div class="entry-feedback-wrapper">
                    <select class="form-control" id="svcRequest" name="Service Requested" placeholder="Your email address" required="required" value="" /> 
                        <option value="empty">&nbsp;</option>
                        <option value="Breakdown">Breakdown</option>
                        <option value="Routine Inspection">Routine Inspection</option>
                        <option value="Repair">Repair</option>
                        <option value="Install">Install</option>
                        <option value="New Crane">New Crane</option>
                    </select>
                    <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="Desired Time Frame">
                    <span class="form-label-prefix form-label-prefix-required"></span>
                    <span class="form-label-wrap">Desired Time Frame</span>
                    <span class="form-label-suffix form-label-suffix-required">(required)</span>
                </label>  
                <div class="entry-feedback-wrapper">
                    <select class="form-control" id="timeframe" name="Desired Time Frame" placeholder="Your email address" required="required" value="" />    
                        <option value="empty">&nbsp;</option>
                        <option value="Emergency">Emergency</option>
                        <option value="1-2 days">1-2 days</option>
                        <option value="3-5 days">3-5 days</option>
                        <option value="1-2 weeks">1-2 weeks</option>
                        <option value="30+ days">30+ days</option>
                    </select>
                    <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>
        <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, but I can almost guarantee that the one above is the better option.)

by (260 points)
edited by
...