How to save phone number from front end form

[laurabennett]

I need the ability for front-end users to update their phone number but it's not currently working as I had hoped. Can I register the PhoneNumberAsset bundle and use the field from the front end, or is there a way to store the default country code as a hidden field so that it will save? Thanks!

[laurabennett]

I did get it to work but having trouble with the CSS from the Asset bundle overwriting my css.

{% do view.registerAssetBundle("rynpsc\phonenumber\assets\PhoneNumberAsset") %}

              <div class="pageoverflow">
                <label class="pagetext">Phone</label>
                {{ hiddenInput('fields[phone][region]', 'US') }}
                <input type="tel" id="fields-phone-number" class="pageinput" name="fields[phone][number]" value="{{ member.phone }}">
              </div>

[rynpsc]

Sorry for not getting back sooner but looks like you've got it all figured out!

In terms of the CSS, the asset bundle isn't designed for use on the frontend. That said I'm not sure why it would be overwriting your css as all of the plugins css is scoped to rynpsc-phonenumber. The compiled css can be seen here https://github.com/rynpsc/craft-phone-number/blob/master/src/assets/dist/styles/main.css.

I'm going to close this issue as neither Craft or Craft plugin Asset bundles are designed for use on the frontend as the styles are all made to fit in within the control panel styles so would always conflict on the frontend.

I'll make a note to update the docs for future users trying to save fields on the frontend.

Thanks for using the plugin.

[laurabennett]

Thanks Ryan! I think the css problem could be with the import as I see that your styles refer only to your field. @import "node_modules/craftcms-sass/mixins";

I thought the purpose of Asset Bundles was the ability to use them on the front end? That said, I understand your plugin isn't designed or tested for that purpose.

On Tue, Sep 28, 2021 at 11:53 AM Ryan @.***> wrote:

Sorry for not getting back sooner but looks like you've got it all figured out!

In terms of the CSS, the asset bundle isn't designed for use on the frontend. That said I'm not sure why it would be overwriting your css as all of the plugins css is scoped to rynpsc-phonenumber. The compiled css can be seen here https://github.com/rynpsc/craft-phone-number/blob/master/src/assets/dist/styles/main.css .

I'm going to close this issue as neither Craft or Craft plugin Asset bundles are designed for use on the frontend as the styles are all made to fit in within the control panel styles so would always conflict on the frontend.

I'll make a note to update the docs for future users trying to save fields on the frontend.

Thanks for using the plugin.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/rynpsc/craft-phone-number/issues/15#issuecomment-929358896, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEYJKJSG4RCAAMS3DZEOOB3UEHQH5ANCNFSM5EUKV6TA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

--

Laura Bennett digital diva

drive > P.O. Box 2838, 170 Kearsarge Street North Conway, NH 03860 603.356.3030 @.***