Support » Plugin: Calculated Fields Form » How do I make CFF work like an HTML Form

  • Resolved kimcoetzee

    (@kimcoetzee)


    Hi There I have an HTML form that I’d like to build with CFF. But I cant figure out how to set the form action or any of the other attributes my HTML form has.

    Here is what HTML form looks like.

    `<form id=”form1″ action=”https://example.com/&#8221; method=”get” target=”_blank”>
    <div>

    </div>
    <div class=”divRow”>
    <div class=”divCellselect”>Select<br>
    <select id=”myform” name=”myform”>
    <option value=””>All</option>
    <option value=”1111″>Option1</option>
    <option value=”2222″>Option1</option>
    <option value=”3333″>Option1</option>
    <option value=”4444″>Option1</option>
    <option value=”5555″>Option1</option>
    <option value=”6666″>Option1</option>
    </select>
    </div>
    <div class=”divCell”>Start<br><input type=”date” id=”start” name=”start”></div>
    <div class=”divCell”>End<br><input type=”date” id=”end” name=”end”></div>
    <div class=”divCell”>Number<br><input type=”number” id=”number” name=”number”></div>
    </div>
    <div>Promo Code<br><input type=”text” id=”promo” name=”promo”></div>
    <div><input type=”text” id=”chain” name=”chain” value=”12345″ class=”hideoption”><input type=”text” id=”level” name=”level” value=”chain” class=”hideoption”><input type=”text” id=”currency” name=”currency” value=”ZAR” class=”hideoption”><input type=”submit” value=”Submit” class=”gbut”></div>
    </div>
    </form>

    And the reason I need all these attributes is because the URL that it goes to uses the attributes to filter its results.

    For the dropdown box its easy enough to set the value. But I do not see how to set the values on the date, text or calculated fields or how to send this information when the user clicks the Submit button.

    I’ve searched the forums but am not finding information that can help me.

    I’m hoping you are able to assist.

    • This topic was modified 11 months, 1 week ago by kimcoetzee.
    • This topic was modified 11 months, 1 week ago by kimcoetzee.
    • This topic was modified 11 months, 1 week ago by kimcoetzee.
Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @kimcoetzee

    You can redirect the users instead of submitting the form.

    Assuming the fields are: fieldname1, fieldname2, and fieldname3.

    And you want to redirect the user to the URL:

    https://www.your-website.com/page/?param1=value_of_fieldname1&param2=value_of_fieldname2&param3=value_of_fieldname3

    Insert a button field in the form with the following piece of code as its onclick event:

    redirectToURL('https://www.your-website.com/page/', {param1:getField('fieldname1').val(), param2:getField('fieldname2').val(), param3:getField('fieldname3').val()});

    Best regards.

    Thread Starter kimcoetzee

    (@kimcoetzee)

    Thank You But when I do that nothing happens.

    Down in the middle of the page is a blue button that says Book Now. Click on that and you will see the form.

    Here’s the code I inserted.

    redirectToURL(‘https://www.limencodesign.co.za/&#8217;,
    {param1:getField(‘fieldname1’).val(),
    param2:getField(‘fieldname2’).val(),
    param3:getField(‘fieldname3’).val()});

    See https://grandpalm.wamdev.co.za/winners-circle-accommodation-discounts/

    Plugin Author codepeople

    (@codepeople)

    Hello @kimcoetzee

    You’ve installed an outdated plugin version that does not include the URL module.

    Please, install the latest plugin update. I see you’re using the commercial version of the plugin.

    Commercial products are not supported in these forums. We will happily answer this and any other questions you can have on our own site.

    Best regards.

    Thread Starter kimcoetzee

    (@kimcoetzee)

    Thank you I’ve installed the free version of the plugin and now it’s working fine. Just one more question how do I set it to open the link in a new tab.

    Plugin Author codepeople

    (@codepeople)

    Hello @kimcoetzee

    In this case, I recommend you use a different operation. Please, use the generateURL operation to generate the URL and window.open with _blank as the second parameter.

    
    window.open(
    generateURL('https://www.limencodesign.co.za/',
    {param1:getField('fieldname1').val(),
    param2:getField('fieldname2').val(),
    param3:getField('fieldname3').val()}),
    '_blank'
    );
    

    I’m sorry, but the support service does not cover the implementation of the users’ projects. If you need a custom coding service, do not hesitate to contact me through my private website:

    https://cff.dwbooster.com/customization

    Best regards.

    Thread Starter kimcoetzee

    (@kimcoetzee)

    Thank You that worked fine. There is one odd thing that is happening is that one of the parameters is a text field and the outputted value keeps on adding inverted commas ( ” ) before and after the text submitted in the field.

    Plugin Author codepeople

    (@codepeople)

    Hello @kimcoetzee

    In this case, you can get the values directly from the tag:

    window.open(
    generateURL('https://www.limencodesign.co.za/',
    {param1:getField('fieldname1').jQueryREf().find(':input').val(),
    param2:getField('fieldname2').jQueryREf().find(':input').val(),
    param3:getField('fieldname3').jQueryREf().find(':input').val()}),
    '_blank'
    );

    or apply the JSON.parse to the fields values:

    window.open(
    generateURL('https://www.limencodesign.co.za/',
    {param1:JSON.parse(getField('fieldname1').val()),
    param2:JSON.parse(getField('fieldname2').val()),
    param3:JSON.parse(getField('fieldname3').val())}),
    '_blank'
    );

    Best regards.

    Thread Starter kimcoetzee

    (@kimcoetzee)

    Thank you that has certainly helped. I now see though that no matter what date I put into a date field that the getField result is always the current date.

    Is there a way I need to set the date field up in order for the date selected in the form to get outputted?

    Plugin Author codepeople

    (@codepeople)

    Hello @kimcoetzee

    You should use the CDATE operation to transform the value into a date text. For example, assuming the date field is the fieldname1, the code would be:

    CDATE(getField('fieldname1').val())

    Best regards.

    Thread Starter kimcoetzee

    (@kimcoetzee)

    Thank You that worked perfectly.

    Hi, I have a similar use case and there is no clear documentation on that in CFF (I really wish documentation be more complete).

    I need to redirect to a URL with parameter but I always get the value in “” that is not what I want. for exemple :

    redirectToURL(‘https://services.domain.com/&#8217;, {var_nom:getField(‘fieldname2’).val(), var_business:getField(‘fieldname3’).val()});

    will result https://services.domain.com/?var_nom=”Bill%20Gates”&var_business=”Microsoft&#8221; instead of https://services.domain.com/?var_nom=Bill%20Gates&var_business=Microsoft

    How can I get rid of “” , when using generateURL(“https://services.domain.com/&#8221;, {“var_nom”:fieldname2, “var_business”:fieldname3}) it work fine I get the Right URL but I can not use the string URL on a Button.

    Regards

    Plugin Author codepeople

    (@codepeople)

    Hello @visite360pro

    You can use JSON.parse, described in a previous entry. If you need additional support, please, contact us through our private website: Contact Us

    Best regards.

    visite360pro

    (@visite360pro)

    I there a way to have two action on one button ?
    Submit then redirect to an url with UTM variable coming form feldnameX ?
    jQuery(this.form).submit();
    +
    generateURL(‘https://website.com/&#8217;, {var_nom:JSON.parse(getField(‘fieldname2’).val()), var_business:JSON.parse(getField(‘fieldname3’).val())}),
    ‘_top’
    );

    Or use variable from fieldnameX in the URL of the thanks you page :

    https://website.com/?utm_source=%5Bfieldname2%5D&utm_medium=%5Bfieldname3%5D

    That would have the same result : submit + redirect to special URL compose with variable from the form.

    Regards,

    Plugin Author codepeople

    (@codepeople)

    Hello @visite360pro

    You cannot submit a form and redirect at once because the submit does a redirect by itself.

    However, you can include fields in thank you page’s URL:

    https://website.com/?utm_source=<%fieldname2%>&utm_medium=<%fieldname3%>

    I’m sorry, but commercial products are not supported in these forums. We will happily answer this and any other questions you can have on our own site.

    Thank you.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘How do I make CFF work like an HTML Form’ is closed to new replies.